JavaScript常用封装函数

模式苔藓
• 阅读 4621

基本运动
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;

}
点赞
收藏
评论区
推荐文章
blmius blmius
4年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(
Wesley13 Wesley13
4年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
待兔 待兔
1年前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Stella981 Stella981
4年前
Javascript 监听简单对象的属性变化
//简单对象的属性的变化监控//通过setAttr改变属性的值var o  {  'a':2,  'b':3};function watch(obj, attr, callback){   if(typeof obj.defaultValues  'undefine
Wesley13 Wesley13
4年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Stella981 Stella981
4年前
JavaScript 动画 3
一、要点速度:varspeed(iTargetcDiv1.offsetLeft)/10;  //10为运动系数缓缓运动为了避免速度为小数:speedspeed0?Math.ceil(speed):Math.floor(speed);  //如果速度大于0向上取整;速度小于0向下取整<!DOCTYPEh
Wesley13 Wesley13
4年前
PHP创建多级树型结构
<!lang:php<?php$areaarray(array('id'1,'pid'0,'name''中国'),array('id'5,'pid'0,'name''美国'),array('id'2,'pid'1,'name''吉林'),array('id'4,'pid'2,'n
Stella981 Stella981
4年前
Javascript中创建函数的几种方法
//工厂函数模式//无法解决对象识别问题functionperson0(name,age,job){varobjnewObject();obj.namename;obj.ageage;obj.jobjob;returno
Python进阶者 Python进阶者
2年前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这
模式苔藓
模式苔藓
Lv1
明月却多情,随人处处行。
文章
3
粉丝
0
获赞
0