定时器相关的简单动画js

最新推荐文章于 2023-08-07 16:10:25 发布

北冥烟雨

最新推荐文章于 2023-08-07 16:10:25 发布

阅读量125

点赞数 1

分类专栏： js

本文链接：https://blog.csdn.net/qq_45423800/article/details/118250993

版权

js 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

js文件，包括可以执行简单动画的move函数，和move函数中用到的getStyle函数，用的时候可以直接调

//创建一个可以执行简单动画的函数
			/*
			参数：
			obj:要执行的动画的对象
			attr：要执行的样式，比如：left height top weight
			target:执行动画的目标位置
			speed:移动的速度
			callback:回调函数 ，这个函数将会我们动画执行完毕之后执行
			
			*/
            function move(obj,attr,target,speed,callback){
                //关闭上一个定时器，
                clearInterval(obj.timer);
                    
                //判断速度的正负值
                //从0到target移动，则speed为正；反之，则speed为负
                var current=parseInt(getStyle(obj,attr));
                if (current>target){
                    //此时的速度应为负值
                    speed=-speed;
                }
                    
                //开启一个定时器，用来执行动画效果
                obj.timer=setInterval(function(){
                    
                    //获取box1原来的left值
                    var oldValue=parseInt(getStyle(obj,attr));
                        
                    //在旧的值上增加
                    var newValue=oldValue+speed;
                        
                    //判断newValue的值是否超过targrt
                    if((speed<0 && newValue < target )|| (speed >0 && newValue > target)){
                        newValue=target;
                    }
                
                    //将新值赋值给obj
                    obj.style[attr]=newValue+"px";
                        
                    //当元素移动到target时停止
                    if(newValue===target){
                        clearInterval(obj.timer);
                        //有回调函数就执行
                        callback && callback();
                    }
                },30);
            }
    
    
            function getStyle(obj,name){
            if(window.getComputedStyle){
                //正常浏览器的方式，具有getComputedStyle（）方法
                //在函数中，要调用赋值给形参的实参时，可以使用【】的方法
                return getComputedStyle(obj,null)[name];
            }else{
                //IE8d的方式，没有getComputedStyle（）方法
                return obj.currentstyle[name];
                }
            //也可以写成	
            //return window.getComputedStyle?getComputedStyle(obj,null)[name]:obj.currentstyle[name];
            }

HTML

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #box1{
            width: 100px;
            height:100px;
            left:0;
            background-color: yellow;
            position: absolute;
        }
        #box2{
            width: 100px;
            height:100px;
            left:0;
            top: 200px;
            background-color:tomato;
            position: absolute;
        }
    </style>
    <script src="/BOM/03函数move和getStyle.js"></script>
    <script>
       window.onload=function(){
			//获取box1
			var box1=document.getElementById("box1");
			var box2=document.getElementById("box2");
			//获取btn01
			var btn01=document.getElementById("btn01");
			//获取btn02
			var btn02=document.getElementById("btn02");
			//var timer;
			//点击按钮以后，使box1向右移动（left值增大）
			btn01.onclick=function(){
				move(box1,"left",800,10);
		  }
			//点击按钮以后，使box1向右移动（left值减小）
			btn02.onclick=function(){
				move(box1,"left",0,10);			
		  }
			var btn03=document.getElementById("btn03");
			btn03.onclick=function(){
				move(box2,"left",800,10);
		  }
			var btn04=document.getElementById("btn04");
			btn04.onclick=function(){
				//move(box2,"width",800,10);
				//move(box2,"top",800,10);
				//move(box2,"height",800,10);
				move(box2,"width",800,10,function(){
					move(box2,"height",400,10,function(){
						move(box2,"top",0,10,function(){
					  });		
					});
				});
		  }
        };
        

    </script> 
</head>
<body>
    
</body>
    <button id="btn01">点击按钮以后box1向右移动</button>
    <button id="btn02">点击按钮以后box1向左移动</button>
    <button id="btn03">点击按钮以后box2向右移动</button>
    <button id="btn04">测试按钮</button>

    <br> 
    <br>


    <div id="box1"></div>
    <div id="box2"></div>
    <div style="width:0; height: 1000px; border-left:1px black solid; position:absolute; left: 800px;top:0;"></div>

</html>

北冥烟雨

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
定时器相关的简单动画js

js文件，包括可以执行简单动画的move函数，和move函数中用到的getStyle函数，用的时候可以直接调//创建一个可以执行简单动画的函数 /* 参数： obj:要执行的动画的对象 attr：要执行的样式，比如：left height top weight target:执行动画的目标位置 speed:移动的速度 callback:回调函数，这个函数将会我们动画执行完毕之后执行 */ function move(ob
复制链接

扫一扫

专栏目录