js简单运动框架--1 单属性运动

最新推荐文章于 2018-03-20 20:54:01 发布

super晴天

最新推荐文章于 2018-03-20 20:54:01 发布

阅读量453

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/jp571534020/article/details/48441139

版权

JavaScript 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>运动框架</title>
  <style type="text/css">
  *{margin: 0;padding: 0}
  div{width: 100px;height: 100px;background-color: red; margin: 10px;opacity: 0.3}
  </style>
  <script>
     function getStyle(obj,attr){
         if(obj.currentStyle){
          return obj.currentStyle[attr];
         }else{
          return getComputedStyle(obj,false)[attr];
         }
     }
     function startMove(obj,attr,iTarget){
        clearInterval(obj.timer);

        obj.timer=setInterval(function(){
          var icur=0;
          if(attr=="opacity"){
            icur=parseInt(parseFloat(getStyle(obj,attr))*100);
          }else{
              icur=parseInt(getStyle(obj,attr));
          }
          var iSpeed=(iTarget-icur)/8;
          iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);     
          if(iTarget==icur){
            clearInterval(obj.timer);
          }else{
            if(attr=="opacity"){
              obj.style.filter="alpha(opacity:"+(icur+iSpeed)+")";
              obj.style.opacity=(icur+iSpeed)/100;
            }else{
              obj.style[attr]= icur+iSpeed+'px';
            }  
          }
        },30);
     };
     //以上可以封装为move.js,满足大多数js运动
     window.οnlοad=function(){
      var aDiv=document.getElementsByTagName("div");
       aDiv[0].οnmοuseοver=function(){
          startMove(this,"width",300)
       }
       aDiv[0].οnmοuseοut=function(){
          startMove(this,"width",100)
       }
        aDiv[1].οnmοuseοver=function(){
          startMove(this,"height",300)
       }
       aDiv[1].οnmοuseοut=function(){
          startMove(this,"height",100)
       }
        aDiv[2].οnmοuseοver=function(){
          startMove(this,"opacity",100)
       }
       aDiv[2].οnmοuseοut=function(){
          startMove(this,"opacity",30)
       }
     }
  </script>
	</script>
</head>
<body>
	<div></div>
  <div></div>
  <div></div>
</body>
</html>

super晴天

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js简单运动框架--1 单属性运动

运动框架 *{margin: 0;padding: 0} div{width: 100px;height: 100px;background-color: red; margin: 10px;opacity: 0.3} function getStyle(obj,attr){ if(obj.currentStyle){ re
复制链接

扫一扫

专栏目录