侧边栏

最新推荐文章于 2024-04-30 11:15:57 发布

原创最新推荐文章于 2024-04-30 11:15:57 发布 · 168 阅读

0 ·

CC 4.0 BY-SA版权

前端同时被 2 个专栏收录

72 篇文章

订阅专栏

22 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	    *{
	    	margin:0px;
	    	padding:0;
	    }
		.active{
			border:1px solid red;
			width:100px;
			height:50px;		
		}
		
		.div1{
			width:100px;
			height:100px;
			margin-top: 100px;
			background-color: red;
			position:relative;
			background-color: green;
			left:-100px;
			
		}
		.div2{
			width:25px;
			height:60px;
			background-color: red;
			position:absolute;
			right:-25px;

		}
		
	</style>
		
</head>
<body>
	
	<div class="div1"  >
		<div class="div2">分享到</div>
	</div>
	
	<script>
		window.onload=function(){
			var div1=document.getElementsByTagName('div')[1];
			var div0=document.getElementsByTagName('div')[0];
			div0.onmouseover=function(){
				startMove(0);
			}
			div0.onmouseout=function(){
				startMove(-100);
			}
		}
		//太容易错了   一定要写在外面不然定时器清除不了 因为startMove函数会被
			var timer=null;
		
		function startMove(des){
			var speed=0;
			var div1=document.getElementsByTagName('div')[1];
			var div0=document.getElementsByTagName('div')[0];
				clearInterval(timer);
				timer=setInterval(function(){

					if(div0.offsetLeft>=des){
						speed=-10;//已经到目标点则回到默认点
					}else{
						speed=10;//还没到目标点  offsetLeft往上加
					}
					if(div0.offsetLeft==des){
						clearInterval(timer);
					}else{
						div0.style.left=div0.offsetLeft+speed+"px";

					}
				},100);
			}

		
			// div0.onmouseover=function(){
			// 	clearInterval(timer);
			// 	timer=setInterval(function(){
			// 		if(div0.offsetLeft>=0){
			// 			clearInterval(timer);
			// 			console.log(div0.offsetLeft);
			// 		}else{
			// 	    div0.style.left=div0.offsetLeft+10+"px";
			
			// 		}
			// 	},100);

			// }
			// div0.onmouseout=function(){
			// 	clearInterval(timer);
			// 	timer=setInterval(function(){
			// 		if(div0.offsetLeft<=-100){
			// 			clearInterval(timer);
			// 		}else{
			// 			div0.style.left=div0.offsetLeft-10+"px";

			// 		}
			// 	},100)


			



	</script>
		
		
</body>
</html>