Javascript --链式运动

最新推荐文章于 2024-07-29 13:58:45 发布

happyprincess123

最新推荐文章于 2024-07-29 13:58:45 发布

阅读量152

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/happyprincess123/article/details/79756578

版权

链式运动

页面元素一个运动接着一个运动，一个div先变宽，然后变高，最后透明度也发生变化，然后在倒着变化返回去，如下：

怎么样，想知道是怎么实现的吗？嘿嘿！请看：

1、首先呢，我们简单在页面写个div,给它设个样式

<body>
    <div id="div1">

    </div>

</body>

  <style>
        div{
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>

2、接下来，开始写javascript

   <script>
        window.onload = function () {
            
            // 获取div的id
            var oDiv = document.getElementById("div1");

            // DIV的连续变化
            oDiv.onmouseover = function () {
                    startMove(oDiv,"width",300,function () {
                        startMove(oDiv,"height",400,function () {
                            startMove(oDiv,"opacity",30);
                        });
                    });
            };

            oDiv.onmouseout = function () {
                startMove(oDiv,"opacity",100,function () {
                    startMove(oDiv,"height",100,function () {
                        startMove(oDiv,"width",100);
                    });
                });
            };

            // 获取元素样式属性,因为不能获取行间样式
            function  getStyle(obj,attr) {
               return getComputedStyle ? getComputedStyle(obj,false)[attr] : obj.currentStyle[attr];
            };

            // 完美运动框架

            function startMove(obj,attr,iTarget,fn) {

                // 关闭定时器
                clearInterval(obj.timer);

                obj.timer = setInterval(function () {

                    // 定义一个临时变量,用于保存获取的样式的值
                    var oTemp = 0;
                    // 因为opacity只能是小数，所以需要用float
                    if(attr == "opacity"){
                        oTemp = Math.round(parseFloat(getStyle(obj,attr))*100);
                    }else{
                        oTemp = parseInt(getStyle(obj,attr));
                    }

                    // 动作进行的步伐速度

                    var speed = (iTarget-oTemp)/10;
                    // 分别进行向上和向下取整
                    speed = speed > 0?Math.ceil(speed):Math.floor(speed);

                    // 当样式值达到目标值后，关闭定时器

                    if(iTarget == oTemp){
                        clearInterval(obj.timer);

                        // 如果需要进行下一个动作，则继续调用该函数
                        if(fn){
                            fn();
                        }
                    }else{
                        // 如果传来的样式属性时opacity
                        if(attr == "opacity"){

                            // 考虑到火狐和IE兼容问题，采用两种方法
                            obj.style.opacity = (speed+oTemp)/100;
                            obj.style.filter = "alpha(opacity:"+oTemp+speed+")";
                        }else{
                            obj.style[attr] =oTemp + speed +"px";
                        }
                    }

                },30);
            }
        }
    </script>

暂时是小白，与君共勉！！！

happyprincess123

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Javascript --链式运动

链式运动页面元素一个运动接着一个运动，一个div先变宽，然后变高，最后透明度也发生变化，然后在倒着变化返回去，如下：怎么样，想知道是怎么实现的吗？嘿嘿！请看：1、首先呢，我们简单在页面写个div,给它设个样式&lt;body&gt; &lt;div id="div1"&gt; &lt;/div&gt;&lt;/body&gt; &lt;style&gt; ...
复制链接

扫一扫