完美运动框架（可以改变元素的透明度，宽，高，top,left,字体大小等）

最新推荐文章于 2021-07-07 11:04:35 发布

apple3612

最新推荐文章于 2021-07-07 11:04:35 发布

阅读量522

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/apple3612/article/details/50655743

本文介绍了一个使用CSS样式和JavaScript实现元素动态效果的案例。通过编写JavaScript函数控制DOM元素的运动过程，包括同时和顺序执行不同的动画效果，如改变宽度、高度及透明度等。此外，还涉及了浏览器兼容性和定时器的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            width:100px;height: 100px;background: red;opacity:0.3;filter: Alpha(opacity:30);
            border:1px solid cornflowerblue;
        }
    </style>
    <script>
        //获取非行间样式方法,if...else...是解决兼容性问题
        function getStyle(obj,name){
            if(obj.currentStyle){
                return obj.currentStyle[name];
            }else{
                return getComputedStyle(obj,false)[name];
            }
        }
        //开始运动的方法
//        function startMove(obj,attr,iTarget,fnEnd){
        //obj为需要运动的元素，格式为aDiv或input....获取到的元素
        //json是元素需要变化的属性和值，比如宽度，高度，透明度等，格式为{width:300,height:300,opacity:60;...}
        //fnEnd是元素的属性和值变化后要执行的函数，格式为function(){}
        function startMove(obj,json,fnEnd){
            clearInterval(obj.timer);//obj.timer是开启多个定时器
            obj.timer=setInterval(function(){
                var bStop=true;
                for(var attr in json){//循环json里需要改变的属性，
                var cur=0;//当前元素的值
                //if判断是当需要改变的值为透明度时，做的兼容性，
                // 当谷歌，FF时透明度为小数，需四舍五入取整当是IE时，是整数，用else
                if(attr=='opacity'){
                    cur=Math.round(parseFloat(getStyle(obj,attr))*100)
                }else{
                    cur=parseInt(getStyle(obj,attr));
                }
                var speed=(json[attr]-cur)/6;//缓冲速度的改变，除的数越大，改变的速度越慢，可以自己改变
                speed=speed>0?Math.ceil(speed):Math.floor(speed);
                    if(cur!=json[attr]){
                        bStop=false;
                    }
                    if(attr=='opacity'){
                        obj.style.filter='alpha(opacity:)'+(cur+speed)+')';
                        obj.style.opacity=(cur+speed)/100;
                    }else{
                        obj.style[attr]=cur+speed+'px';
                    }
                }
                if(bStop){
                    clearInterval(obj.timer)
                    if(fnEnd){fnEnd();}//当元素的改变都完成时执行的函数
                }
            },30)
        }

        window.onload=function(){
            var div=document.getElementsByTagName("div")[0];
            var input1=document.getElementsByTagName("input")[0];
            var input2=document.getElementsByTagName("input")[1];
            input1.onclick=function(){
                startMove(div,{width:300,height:300,opacity:100,fontSize:50,borderWidth:10})
            }
            input2.onclick=function(){
                startMove(div,{width:300},function(){
                    startMove(div,{height:300},function(){
                        startMove(div,{opacity:100})
                    })
                })
            }
        }
    </script>
</head>
<body>
<input type="button" value="DIV同时变宽和变高和透明度"/>
<input type="button" value="DIV先变宽后变高后透明度改变"/>
<br/><br/>
<div>asdfsdaf</div>
</body>
</html>