你的位置:首页 > 软件开发 > Java > javascript实现的运动框架详解

javascript实现的运动框架详解

发布时间:2015-07-21 13:00:19
javascript实现的运动框架详解:所谓的运动框架简单的说就是让元素的某一个属性值能够有渐进性的变化。运动框架的使用在实际功能中有大量的应用,最常见的比如客服系统,当拖动滚动条的时候,一般客服系统能够以弹性方式跟随,下面就简单介绍一下如何实现此效果:代码实例如下:<!D ...

javascript实现的运动框架详解:

所谓的运动框架简单的说就是让元素的某一个属性值能够有渐进性的变化。运动框架的使用在实际功能中有大量的应用,最常见的比如客服系统,当拖动滚动条的时候,一般客服系统能够以弹性方式跟随,下面就简单介绍一下如何实现此效果:

代码实例如下:

<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://www.51texiao.cn/" /><title>蚂蚁部落</title><style type="text/css">#mytest{ width:100px; height:100px; background-color:black;}</style><script type="text/javascript">function Move(obj,attr,iTarget){ clearInterval(obj.timer); obj.timer=setInterval(function() {  var cur=0;  if(attr=="opacity")  {   if('v' == '\v')   {    cur=parseInt(getStyle(obj,attr));   }   else   {    cur=Math.round(parseFloat(getStyle(obj,attr))*100);   }  }  else  {   cur=parseInt(getStyle(obj,attr));  }           var speed=(iTarget-cur)/10;  speed=speed>0?Math.ceil(speed):Math.floor(speed);         if(iTarget==cur)  {   clearInterval(obj.timer);  }  else  {   cur+=speed;   if(attr=="opacity")   {    obj.style.filter="alpha(opacity:"+cur+")"; //for IE    obj.style.opacity=cur/100;  //for FF   }   else   {    obj.style[attr]=cur+"px";   }  } },30);} function getStyle(obj,name){ if(obj.currentStyle) {  return obj.currentStyle[name];//for IE } else {  return getComputedStyle(obj,false)[name];//for FF }} window.onload=function(){ var mytest=document.getElementById("mytest"); Move(mytest,"width",200);}</script></head><body><div id="mytest">蚂蚁部落欢迎您</div></body></html>

 

海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理:https://www.xlkjsw.com

原标题:javascript实现的运动框架详解

关键词:JavaScript

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。