匀速分享到效果

最新推荐文章于 2021-12-23 14:03:25 发布

原创最新推荐文章于 2021-12-23 14:03:25 发布 · 106 阅读

0 ·

CC 4.0 BY-SA版权

运动专栏收录该内容

7 篇文章

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			div{
				width: 100px;
				height: 200px;
				background: red;
				position: relative;
				top: 300px;
				left: -100px;
			}
			span{
				border: 1px solid red;
				position: absolute;
				top: 50px;
				left: 100px;
				font-size: 24px;
			}
		</style>
	</head>
	<body>
		<div id="box"><span>分享到</span></div>
	</body>
</html>
<script type="text/javascript">
//	var box = document.getElementsByTagName('div')[0];
    var box = document.getElementById('box')
	box.onmouseover = function(){
		animate(this,0)
	}
	box.onmouseout = function(){
		animate(this,-100)
	}
	
	var timer;
	function animate(obj,target){
		clearInterval(timer);
		var speed;
		timer = setInterval(function(){
			var speed = target - obj.offsetLeft > 0 ? 5 : -5;
			if(obj.offsetLeft == target){
				clearInterval(timer);
			}else{
				obj.style.left = obj.offsetLeft + speed + 'px';
			}
		},20)
	}
	
</script>