源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

JavaScript 创建运动框架的实现代码

  • 时间:2020-06-14 13:53 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:JavaScript 创建运动框架的实现代码
[b]封装好的运动框架Move(obj,attr,iTarget),可直接调用:[/b] 可用于设置width、border、fontSize、marginLeft、opacity等许多常见属性值的变速变化,实现各种有趣效果。 [b]兼容IE和FF。 [/b]
[u]复制代码[/u] 代码如下:
/****************     *     *   IE-BUG:     *   在IE中,设置opacity属性时,元素样式中需要设置opacity属性,才能读取到opacity值。     *     *   obj:元素对象。   attr:用引号包围的属性名。   iTarget:属性目标值。     *     *****************/     function Move(obj,attr,iTarget){         clearInterval(obj.timer);//关闭前一个定时器,解决对同个对象同时调用多个Move()时,定时器叠加问题。使用obj.timer给每个调用Move()的对象赋予各自的定时器,防止多个对象同时调用Move()时,同用一个定时器,而导致相关干扰问题。         obj.timer=setInterval(function(){             var cur=0;//创建一个变量,用于存储 attr属性每时每刻的值             if(attr=="opacity"){             //针对在FF中opacity属性值为浮点数值问题,将属性值 四舍五入、转换成浮点型。乘以100,使opacity属性值与IE统一为百分数                 cur=Math.round(parseFloat(getStyle(obj,attr))*100);             }else{                 cur=parseInt(getStyle(obj,attr));//将除opacity外的属性(width/fontSize/MarginLeft等)的初始值 转换为整型             }             var speed=(iTarget-cur)/10;//创建 递减的速度speed变量。实现属性值的变速改变             speed=speed>0?Math.ceil(speed):Math.floor(speed);//取整,解决浏览器忽略小于1px的数值 导致运动结束时,离目标值Itarget少几个像素的问题             if(iTarget==cur){//当目标值等于目标值时,结束定时器                 clearInterval(obj.timer);             }else{                     cur+=speed;//当前值cur 加上 递减的速度值speed                 if(attr=="opacity"){                     // 分别对IE和FF设置opacity属性值                     obj.style.filter="alpha(opacity:"+cur+")"; //for IE                     obj.style.opacity=cur/100;   //for FF                 }else{                     obj.style[attr]=cur+"px"; //给指定属性attr 添加值cur+speed                 }             }         },30);     }     //getStyle()函数 用于兼容IE和FF:获取 对象的 非行间样式中的属性的值。 obj:元素对象。 name:属性名。     function getStyle(obj,name){         if(obj.currentStyle){             return obj.currentStyle[name];//for IE         }else{             return getComputedStyle(obj,false)[name];//for FF         }     }
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部