码迷,mamicode.com
首页 > Web开发 > 详细

使用js编写一个简单的运动框架

时间:2017-11-07 00:06:09      阅读:272      评论:0      收藏:0      [点我收藏+]

标签:==   var   个人   int   html   window   ima   round   alpha   

 

下班后,,没事捣鼓捣鼓个人的小爱好。

 

     首先,说明我的这个运动框架(css所有属性)也是常见的框架一种,健壮性并不是太好,对于新手学习倒是挺好,,若是大神,老司机请拐弯。

 

     上来,我们先定义一个区块,然后在关联一个可以实时看到属性值发生变化值的标签。

 

html:

<body>
<div id = "div1">
</div>
<input type = "text" id = "txt1">
</input>
</body>

     

css:

#div1{
width:200px;
height:200px;
position:absolute;
top:200px;
left:0px;
background-color:yellow;
opacity:0.3;
filter:alpha(opacity:30);

}

 

js:

首先,我们先写页面加载函数,因为我不是把函数直接绑定到元素上面的方式

//编写加载函数

window.onload = function(){

   var oDiv = document.getElementById(‘div1‘);

  //对标签进行鼠标上移事件绑定

   oDiv.onmouseover = function(){

    startMove(this , ‘opacity‘,100);

};

  //对标签进行鼠标离开事件绑定

   oDiv.onmouseout = function(){

   startMove(this, ‘opacity‘,30);

};

};

 

//编写得到样式函数,因为我们需要对元素的css进行动画

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 cur = 0;
     //兼容透明度动画
     if(attr == ‘opacity‘){

     cur = Math.round(parseFloat(getStyle(obj,attr))*100);

     }

    else{
    

    cur = parseInt(getStyle(obj,attr));

    }

    //设置动画的步长
   //让动画具有缓冲效果

   var speed = (ITarget-cur)/6;

   speed = speed>0?Math.ceil(apeed):Math.floor(speed);

   //当动画需要的步长设置好,之后我们需要进一步判断我们的目标值,来进一步确认动画的开始和结束

   if(cur == iTarget){

    //如果到达了目标值,那么我们就清除动画,释放这个定时器,解放内存

   clearInterval(obj.timer);

    }
    else{

    //如果没有达到我们的目标值,那么我们需要这个动画一直持续下去,在这个动画的变化中,需要对透明度单独判断

        if(attr == ‘opacity‘){

         obj.style.opacity = (cur+speed)/100;

         ob.style.filter = ‘alpha(opacity:‘+(cur+speed)+‘)‘;

         document.getElementById(‘txt1‘).value = obj.style.opacity;

          }

        else{

          obj.style[attr] = cur+speed+‘px‘;

          document.getElementById(‘txt1‘).value = obj.style.opacity;

          }

    }

 

     },30);

    }

 

 

 

技术分享

技术分享

技术分享

 

使用js编写一个简单的运动框架

标签:==   var   个人   int   html   window   ima   round   alpha   

原文地址:http://www.cnblogs.com/bkyxiao5/p/7795585.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!