JavaScript常用封装函数

v1 发布于2019-08-21 12:24 / 800人阅读

摘要：基本运动透明度变化抖动获取计算后的样式获取计算后的样式并且赋值事件绑定下常用封装函数先处理不是真值或者没有上一个兄弟节点的情况。递归不断往上一层一层地找元素节点，直到找到或者返回为止。获取元素在当前页面中的绝对位置

基本运动
function doMove(obj,attr,speed,target,endFn){

var iCur = getStyle( obj, attr );

speed = iCur <= target ? Math.abs(speed) : -Math.abs(speed);

clearInterval(obj.timer);

obj.timer = setInterval(function(){

    iCur = getStyle( obj, attr ) + speed;

    if( (speed > 0 && iCur >= target) || (speed < 0 && iCur <= target) ){

        iCur = target;

    }

    obj.style[attr] = iCur + "px";

    if(iCur == target){

        clearInterval(obj.timer);

        if( typeof endFn === "function" ){  endFn(); }  
    }

},30);

}

透明度变化
function opacity(obj,speed,target,endFn){

var iCur = getStyle( obj, "opacity" ) * 100;

speed = iCur <= target ? Math.abs(speed) : -Math.abs(speed);

clearInterval(obj.alpha);

obj.alpha = setInterval(function(){

    iCur = getStyle( obj, "opacity" )*100 + speed;

    if( (speed > 0 && iCur >= target) || (speed < 0 && iCur <= target) ){

        iCur = target;

    }

    obj.style.opacity = iCur / 100;

    obj.style.filter = "alpha(opacity: "+ iCur +")";

    if(iCur == target){

        clearInterval(obj.alpha);

        if( typeof endFn === "function" ){  endFn(); }  
    }

},30);

}

抖动

function shake(obj,attr,endFn){

var pos = getStyle(obj,attr);

var arr = [];

for(var i=14; i>=0; i-=2){

    arr.push(-i,i); 
}

obj.shake = setInterval(function(){

    obj.style[attr] = pos + arr[i++] + "px";

    if(i==arr.length){

        clearInterval(obj.shake);   

        if( typeof endFn === "function" )endFn();
    }   

},30);

}

获取计算后的样式
function getStyle( obj ,attr ){

if( obj.currentStyle ){

    return parseFloat( obj.currentStyle[attr] || 1 );   
} 

return parseFloat( getComputedStyle(obj)[attr] );

}

获取计算后的样式并且赋值
function css(obj,attr,val){

if(val)
{
    if(attr=="opacity")
    {
        obj.style["opacity"]=val/100;

        obj.style["filter"]="alpha(opacity="+val+")";
    }
    else
    {
        obj.style[attr]=val+"px";
    }
}
else
{
    iVal=parseFloat(getStyle(obj,attr));

    if(attr=="opacity")
    {
        iVal=Math.round(iVal*100);
    }
    return iVal;
}

}

事件绑定
function bind(obj,ev,fn){

if( obj.addEventListener ){

    obj.addEventListener(ev,fn,false);

}else{

    obj.attachEvent("on" + ev,function(){

        fn.call(obj);   
    }); 
}

}

DOM下常用封装函数
function getPrev( obj ){

if( !obj || !obj.previousSibling )return null;

//先处理obj不是真值或者没有上一个兄弟节点的情况。

return obj.previousSibling.nodeType === 1 ? obj.previousSibling : getPrev( obj.previousSibling ); //递归

//不断往上一层一层地找元素节点，直到找到或者返回Null为止。

}

function getNext( obj ){

if( !obj || !obj.nextSibling )return null;

//先处理obj不是真值或者没有下一个兄弟节点的情况。

return obj.nextSibling.nodeType === 1 ? obj.nextSibling : getNext( obj.nextSibling ); //递归

//不断往下一层一层地找元素节点，直到找到或者返回Null为止。

}

function getFirst( obj ){

if( !obj || !obj.firstChild )return null;

//先处理obj不是真值或者没有第一个兄弟节点的情况。

return obj.firstChild.nodeType === 1 ? obj.firstChild : getNext( obj.firstChild ); //递归

//如果第一个子节点不是元素节点，就以第一个子节点为当前节点，查找下一个兄弟节点。

}

function getLast( obj ){

if( !obj || !obj.lastChild )return null;

//先处理obj不是真值或者没有最后一个兄弟节点的情况。

return obj.lastChild.nodeType === 1 ? obj.lastChild : getPrev( obj.lastChild ); //递归

//如果第一个子节点不是元素节点，就以第一个子节点为当前节点，查找下一个兄弟节点。

}

获取元素在当前页面中的绝对位置
function posLeft( obj ){

    var iLeft = 0;

    while( obj ){

        iLeft += obj.offsetLeft;

        obj = obj.offsetParent;
    }
    return iLeft;

}

function posTop( obj ){

    var iTop = 0;

    while( obj ){

        iTop += obj.offsetTop;

        obj = obj.offsetParent;
    }
    return iTop;

}

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/87581.html

编写自己的代码库（javascript常用实例的实现与封装--续）

摘要：前言这个系列的上一篇文章编写自己的代码库常用实例的实现与封装总结了个常见的操作。前序修改以及写法优化此处修改之前提交函数已经发现的，基于这个系列上篇文章的提供的函数。 1.前言这个系列的上一篇文章（编写自己的代码库（javascript常用实例的实现与封装））总结了34个常见的操作。但是在开发中，常见的实例又何止这么多个，经过这些日子的探索，以及他人的意见，现在得追加一些操作实例了。...

Atom 2019-08-20 18:34 评论0 收藏0
JavaScript常用脚本集锦1

摘要：初始化参数可选参数，必填参数可选，只有在请求时需要参数可选回调函数可选参数可选，默认为参数可选，默认为创建引擎对象打开发送普通文本接收文档将字符串转换为对象最后，说明一下此函数的用法。即等待与成功回调，后标志位置为。 jquery限制文本框只能输入数字 jquery限制文本框只能输入数字,兼容IE、chrome、FF（表现效果不一样）,示例代码如下： $(input).keyup(...

ygyooo 2019-08-21 10:22 评论0 收藏0
【Vue原理】Vue源码阅读总结大会 - 序

摘要：扎实基础幸好自己之前花了大力气去给自己打基础，让自己现在的基础还算不错。写文章不容易，点个赞呗兄弟专注 Vue 源码分享，文章分为白话版和源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧研究基于 Vue版本【2.5.17】如果你觉得排版难看，请点击下面链接或者拉到下面关注公众号也可以吧【Vue原理】Vue源码阅读总结大会 - 序阅读源码是需...

Edison 2019-08-23 18:18 评论0 收藏0
常用的JavaScript编程风格

摘要：工作中好的编程风格会更友好，不好的编程风格会让队友难受变量的声明使用和代替存在变量提升等副作用，声明常量使用命名规范使用小驼峰命名，变量名可读性好使用变量说明不要出现让人觉得晦涩难懂的变量不要重复命名当一个对象名有意义的时候，对象里面的的命工作中好的编程风格会更友好，不好的编程风格会让队友难受变量的声明使用let和const代替var（var存在变量提升等副作用），声明常量使用c...

explorer_ddf 2019-08-23 16:55 评论0 收藏0
前端基础入门五（掌握jQuery的常用api，实现动态效果）

摘要：基本概念学习目标学会如何使用，掌握的常用，能够使用实现常见的效果。想要实现简单的动画效果，也很麻烦代码冗余。实现动画非常简单，而且功能更加的强大。注意选择器返回的是对象。 jQuery基本概念学习目标：学会如何使用jQuery，掌握jQuery的常用api，能够使用jQuery实现常见的效果。为什么要学习jQuery？【01-让div显示与设置内容.html】使用javasc...

nevermind 2019-08-30 15:55 评论0 收藏0