JS运动址多物体任意值运动框架

最新推荐文章于 2018-08-31 21:29:28 发布

曲奇小姐

最新推荐文章于 2018-08-31 21:29:28 发布

阅读量161

点赞数

分类专栏： Javascript

本文链接：https://blog.csdn.net/weixin_41586886/article/details/81064498

版权

Javascript 专栏收录该内容

44 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>JS运动之多物体任意值运动框架，可以改变任意属性（包括透明度）</title>
    <style>
    div{
      width: 200px;
      height: 100px;
      background-color: yellow;
      float:left;
      margin-left: 20px;
    }
    </style>
  </head>
  <body>
    <div id="div1">变高</div>
    <div id="div2">变宽</div>
    <div id="div3">字体变大</div>
    <div id="div4">改变透明度</div>
  </body>
   <script type="text/javascript">
   oDiv1=document.getElementById('div1');
   oDiv2=document.getElementById('div2');
   oDiv3=document.getElementById('div3');
   oDiv4=document.getElementById('div4');

   function getStyle(obj,name){ //用来获取非行间样式，下面的做法是为了兼容浏览器
     if(obj.currentStyle){  //如果浏览器支持currentStyle
       return obj.currentStyle[name];
     }
     else{
       return getComputedStyle(obj,false)[name];//如果浏览器支持getComputedStyle
     }
   }

   function startMove(obj,atrr,iTarget){  //此时的运动框架增加了一个属性的参数，用来给不同的属性带来运动效果
     clearInterval(obj.timer);
     obj.timer=setInterval(function(){
       var cur=0;
       if(atrr=='opacity'){  //opacity的值是在0到1之间的小数，如果用parseInt就只能变成0了，所以要区别对待
         cur=parseFloat(getStyle(obj,atrr))*100;
       }
       else{
         cur=parseInt(getStyle(obj,atrr));
       }

       var speed=(iTarget-cur)/6;
       speed=speed>0?Math.ceil(speed):Math.floor(speed);

       if(cur==iTarget){
         clearInterval(obj.timer);
       }
       else{
         if(atrr=='opacity'){
           obj.style.filter='alpha(opacity:'+(cur+speed)+')';
           obj.style.opacity=(cur+speed)/100;
         }
         else{
           obj.style[atrr]=cur+speed+'px';
         }
       }
     },30);
   };
//展示变高的效果
   oDiv1.onmouseover=function(){
     startMove(this,'height',400);
   };
   oDiv1.onmouseout=function(){
     startMove(this,'height',100);
   }
//展示变宽的效果
   oDiv2.onmouseover=function(){
     startMove(this,'width',700);
   };
   oDiv2.onmouseout=function(){
     startMove(this,'width',200);
   }
//展示字体变大的效果
  oDiv3.onmouseover=function(){
    startMove(this,'font-size',24);
  };
  oDiv3.onmouseout=function(){
    startMove(this,'font-size',14);
  }
  //展示透明度变化的效果
  oDiv4.onmouseover=function(){
    startMove(this,'opacity',30);
  };
  oDiv4.onmouseout=function(){
    startMove(this,'opacity',100);
  }
   </script>
</html>

曲奇小姐

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS运动址多物体任意值运动框架

&lt;!DOCTYPE html&gt;&lt;html lang="en" dir="ltr"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;JS运动之多物体任意值运动框架，可以改变任意属性（包括透明度）&lt;/title&gt; &lt
复制链接

扫一扫

专栏目录