变速的动画效果

最新推荐文章于 2022-12-13 21:10:17 发布

菜鸟级码农小林

最新推荐文章于 2022-12-13 21:10:17 发布

阅读量162

点赞数

本文链接：https://blog.csdn.net/m0_59735348/article/details/124661125

版权

JavaScript 同时被 3 个专栏收录

26 篇文章 1 订阅

订阅专栏

html

20 篇文章 0 订阅

订阅专栏

css

8 篇文章 0 订阅

订阅专栏

先封装一个动画函数

animate.js

function animate(obj,target,callBack){
	clearInterval(obj.timer)
    obj.timer =	setInterval(function(){
	    var step = (target - obj.offsetLeft) / 10
	    // 取整数
	    step = step > 0 ? Math.ceil(step) : Math.floor(step)
	    if(obj.offsetLeft == target){
		    // 停止
		    clearInterval(obj.timer)
		    //回调函数
		    if(callBack){
			    callBack()
		    }
	    }
	    obj.style.left = obj.offsetLeft + step +'px'
	},50)
}

animate.html

<!DOCTYPE html>
<html lang="en">
<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>
    // 引入animate.js文件，下面才能调用
	<script src="animate.js"></script>
</head>
<style>
	.aside{
		position: absolute;
		right: 0;
		width: 50px;
		background-color: aquamarine;
	}
	.con{
		background-color: bisque;
		width: 100px;
		position: absolute;
		left:0;
	}
</style>
<body>
	<div class="aside">
		<span>⬅</span>
	    <div class="con">我出来了</div>
	</div>
	<script>
		var aside = document.querySelector('.aside')
		var con = document.querySelector('.con')
		aside.addEventListener('mouseenter',function(){
			animate(con,-100,function(){
				aside.children[0].innerHTML = '➡'
			})
		})
		aside.addEventListener('mouseleave',function(){
			animate(con,0,function(){
				aside.children[0].innerHTML = '⬅'
			})
			
		})
	</script>
</body>
</html>

菜鸟级码农小林

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
变速的动画效果

先封装一个动画函数animate.jsfunction animate(obj,target,callBack){ clearInterval(obj.timer) obj.timer = setInterval(function(){ var step = (target - obj.offsetLeft) / 10 // 取整数 step = step > 0 ? Math.ceil(step) : Math.floor(step) if
复制链接

扫一扫

专栏目录