js运动-任意值添加运动

回顾一下上个例子：

 

 

<script>
        window.onload = function(){
            var liTags = document.getElementsByTagName('li');
            for(var i=0;i<liTags.length;i++){
                 liTags[i].timer = null;// 给每个li都添加一个timer
                 liTags[i].onmouseover = function () {
                    startMove(this,400);
                 }
                 liTags[i].onmouseout = function () {
                    startMove(this,200);
                 }
            }
        }
        function getStyle(obj,attr){
            return getComputedStyle ? getComputedStyle(obj,false)[attr] : obj.currentStyle[attr];
        }
        function startMove(obj,iTarget) {
            clearInterval(obj.timer);
            obj.timer = setInterval(function () {
                var objWidth = parseInt(getStyle(obj,'width'));//因为是通过[]调用属性，所以width必须加单引号
               // var iSpeed = (iTarget -obj.offsetWidth)/10;
               // 因为objWidth存放的就是当前对象的宽，所以直接写objWidth而不是obj.objWidth
                var iSpeed = (iTarget -objWidth)/10;
                    iSpeed = iSpeed>0 ?Math.ceil(iSpeed):Math.floor(iSpeed);
                if(objWidth == iTarget){
                    clearInterval(obj.timer);
                }else{
                    obj.style.width =  objWidth+iSpeed+'px';
                }
            },30);
 
        }
</script>

如果此时需求有变化，让第2个li鼠标移入，高度变化，第三个li鼠标依然边框，第四个li鼠标移入背景变化。一种办法就是复制几分startMove函数，分别把之前width变化改成height，borderWidht，和opacity透明度变化；但是这样显然浪费，可以把他们合并成一个函数，把变化的属性作为参数传进去就好了.

1. function startMove(obj,attr,iTarget) 函数里新增attr参数

2. 调用参数的方式：由obj.style.属性名 变成 obj.style[属性名]

3. 需要分别为每个li添加事件

 

<script>
        window.onload = function(){
            var liTags = document.getElementsByTagName('li');
            for(var i=0;i<liTags.length;i++){
                liTags[i].timer = null;// 给每个li都添加一个timer
                liTags[0].onmouseover = function () {
                    startMove(this,'width',400);
                }
                liTags[0].onmouseout = function () {
                    startMove(this,'width',200);
                }
                liTags[1].onmouseover = function () {
                    startMove(this,'height',100);
                }
                liTags[1].onmouseout = function () {
                    startMove(this,'height',50);
                }
                liTags[2].onmouseover = function () {
                    startMove(this,'borderWidth',10);
                }
                liTags[2].onmouseout = function () {
                    startMove(this,'borderWidth',2);
                }
                liTags[3].onmouseover = function () {
                    startMove(this,'padding',10);
                }
                liTags[3].onmouseout = function () {
                    startMove(this,'padding',0);
                }
            }
        }
        function getStyle(obj,attr){
            return getComputedStyle ? getComputedStyle(obj,false)[attr] : obj.currentStyle[attr];
        }
        function startMove(obj,attr,iTarget) {//attr：把变化的属性最为参数传入
            clearInterval(obj.timer);
            obj.timer = setInterval(function () {
                var objAttr = parseInt(getStyle(obj,attr));
                var iSpeed = (iTarget -objAttr)/10;
                iSpeed = iSpeed>0 ?Math.ceil(iSpeed):Math.floor(iSpeed);
                if(objAttr == iTarget){
                    clearInterval(obj.timer);
                }else{
                    //obj.style.width =  objWidth+iSpeed+'px';
                    obj.style[attr] =  objAttr+iSpeed+'px';// 需要又.属性名的形式改成[]
                }
            },30);
 
        }
    </script>

运行一下发现，改变宽，高，border都妥妥的，但是最后一个改变“透明度”没反应，是什么问题那？？

 首先opacity的值0.3一个小数，parseInt(getStyle(obj,attr)之后便变成0，还有最大的一个问题就是最后属性值设置的时候：obj.style[attr] =  objAttr+iSpeed+'px'; 显然opacity并没有px这个单位，所以需要对运动框架做进一步处理

需要判断一下，当接受的参数是“透明度”的时候，需要单独处理一下，把上面出问题的两个地方做一下处理

var objAttr = 0;
if(attr == "opacity"){
     // 由于计算机对 小数的处理有问题，这里用Math.round处理一下
     // objAttr = parseFloat(getStyle(obj,attr)*100);
   //objAttr = parseInt(parseFloat(getStyle(obj,attr))*100);
   objAttr = Math.round(parseFloat(getStyle(obj,attr))*100);
}else{
      objAttr = parseInt(getStyle(obj,attr));
}

如果不做处理直接 objAttr = parseFloat(getStyle(obj,attr)*100); 由于计算机不能很精确的处理小数，会导致一些问题

用parseInt这种方法：objAttr = parseInt(parseFloat(getStyle(obj,attr))*100); 也可以处理小数，但是经过测试在鼠标移出的时候，与原来状态有一点偏差

可以看出，当鼠标移出去的时候，opacity应该回到1，可结果却是0.94 ；所以个人推荐用Math.round四舍五入函数来处理这里的小数问题

做一下判断，下面也同样做判断

if(attr == "opacity"){
   obj.style.filter = 'alpha(opacity:'+(objAttr+iSpeed)+')';
   obj.style.opacity = (objAttr+iSpeed)/100;
}else{
   //obj.style.width =  objWidth+iSpeed+'px';
   obj.style[attr] =  objAttr+iSpeed+'px';// 需要又.属性名的形式改成[]
}

完整代码：

<body>
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
</body>

<style>
        ul{list-style: none;}
        ul li{
            margin: 10px;
            width: 200px;height: 50px;
            border: 2px solid #c00;
            background: lightblue;
        }
</style>

<script>
        window.onload = function(){
            var liTags = document.getElementsByTagName('li');
            for(var i=0;i<liTags.length;i++){
                liTags[i].timer = null;// 给每个li都添加一个timer
                liTags[0].onmouseover = function () {
                    startMove(this,'width',400);
                }
                liTags[0].onmouseout = function () {
                    startMove(this,'width',200);
                }
                liTags[1].onmouseover = function () {
                    startMove(this,'height',100);
                }
                liTags[1].onmouseout = function () {
                    startMove(this,'height',50);
                }
                liTags[2].onmouseover = function () {
                    startMove(this,'borderWidth',10);
                }
                liTags[2].onmouseout = function () {
                    startMove(this,'borderWidth',2);
                }
                liTags[3].onmouseover = function () {
                    startMove(this,'opacity',30);
                }
                liTags[3].onmouseout = function () {
                    startMove(this,'opacity',100);
                }
            }
        }
        function getStyle(obj,attr){
            return getComputedStyle ? getComputedStyle(obj,false)[attr] : obj.currentStyle[attr];
        }
        function startMove(obj,attr,iTarget) {//attr：把变化的属性最为参数传入
            clearInterval(obj.timer);
            obj.timer = setInterval(function () {
                var objAttr = 0;
                if(attr == "opacity"){
                    // 由于计算机对 小数的处理有问题，这里用parseFloat转一下
                    objAttr = Math.round(parseFloat(getStyle(obj,attr))*100);
                }else{
                     objAttr = parseInt(getStyle(obj,attr));
                }
                var iSpeed = (iTarget -objAttr)/10;
                iSpeed = iSpeed>0 ?Math.ceil(iSpeed):Math.floor(iSpeed);
                if(objAttr == iTarget){
                    clearInterval(obj.timer);
                }else{
                    if(attr == "opacity"){
                        obj.style.filter = 'alpha(opacity:'+(objAttr+iSpeed)+')';
                        obj.style.opacity = (objAttr+iSpeed)/100;
                    }else{
                        //obj.style.width =  objWidth+iSpeed+'px';
                        obj.style[attr] =  objAttr+iSpeed+'px';
                    }
                }
            },30);


        }
</script>

最后结果演示：