分享到JavaScript 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
		    *{
		    	margin: 0;
		    	padding: 0;
		    }
			#div1{
				width:150px;
				height:200px;
				background: pink;
				position: absolute;
			}
			#div1 span{
				width:30px;
				height:60px;
				background: deepskyblue;
				position: absolute;
				right:-30px;
				top:60px;
			}
		</style>
		<script>
			window.onload=function(){
				var oDiv1=document.getElementById('div1');
				var timer="null";
				
				oDiv1.onmousemove=function(){
					move(0);
				}
				oDiv1.onmouseout=function(){
					move(-150);
				}
				
				
				function move(iTarget){
				var oDiv1=document.getElementById('div1');	
				clearInterval(timer);
				timer=setInterval(function(){	
					var speed;
				  if(oDiv1.offsetLeft>iTarget){
				  	  speed=-5;
				  }
				else{
					speed=5;
				}
				  if(oDiv1.offsetLeft==iTarget){
				  	clearInterval(timer);
				  }
				  else{
				     oDiv1.style.left=oDiv1.offsetLeft+speed+'px';
				  }
				  
				},30);
				}
			}
		</script>
	</head>
	<body>
		<div id="div1">
			<span>分享到</span>
		</div>
	</body>
</html>

 

posted @ 2017-11-28 12:33  赵翔个人博客  阅读(108)  评论(0)    收藏  举报