JS运动框架之分享侧边栏动画

系统管理员 2022-08-07 03:39 207阅读 0赞

# JS运动框架之分享侧边栏动画 #

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style type="text/css">
    		*{
    			margin:0px;
    			padding:0px;
    		}
    			#div1{
    				width:319px;
    				height: 340px;
    				border: 1px solid #FFF;
    				position: absolute;
    				top:100px;
    				left:-320px;
    				background-image: url(images/1.png);
    				background-repeat:no-repeat ;
    			}
    			#div1 span{
    				width:30px;
    				height: 130px;
    				border: 1px solid blue;
    				position: absolute;
    				right:-23px;
    				top:95px;
    				background: red;
    				font-family: "微软雅黑";
    				color: #FFFFFF;
    				text-align: center;
    				line-height: 40px;
    				border-radius: 0px 200px 200px 0px;
    			}
    		</style>
    		<script type="text/javascript">
    			window.οnlοad=function(){
    				var oDiv=document.getElementById("div1");
    				var oSpan=oDiv.getElementsByTagName('span')[0];
    				var time=null;
    				var speed=8;
    				oDiv.οnmοuseοver=function(){//这里给整个div加鼠标移入的事件
    					
    					clearInterval(time);
    					time=setInterval(function(){
    						if(oDiv.offsetLeft>=0){clearInterval(time);}
    						else{
    							oDiv.style.left=oDiv.offsetLeft+speed+'px';
    						}
    					},1);
    				}
    				oDiv.οnmοuseοut=function(){//这里给整个div加鼠标移出事件
    					clearInterval(time);
    					time=setInterval(function(){
    						if(oDiv.offsetLeft<=-320){clearInterval(time);}
    						else{
    							oDiv.style.left=oDiv.offsetLeft-speed+'px';
    						}
    					},1);
    				}
    			}
    		</script>
    	</head>
    	<body>
    		<div id="div1">
    			<span>分享到</span>
    		</div>
    	</body>
    </html>

# 优化后的代码: #

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style type="text/css">
    		*{
    			margin:0px;
    			padding:0px;
    		}
    			#div1{
    				width:319px;
    				height: 340px;
    				border: 1px solid #FFF;
    				position: absolute;
    				top:100px;
    				left:-320px;
    				background-image: url(images/1.png);
    				background-repeat:no-repeat ;
    			}
    			#div1 span{
    				width:30px;
    				height: 130px;
    				border: 1px solid blue;
    				position: absolute;
    				right:-23px;
    				top:95px;
    				background: red;
    				font-family: "微软雅黑";
    				color: #FFFFFF;
    				text-align: center;
    				line-height: 40px;
    				border-radius: 0px 200px 200px 0px;
    			}
    		</style>
    		<script type="text/javascript">
    			window.οnlοad=function(){
    				var oDiv=document.getElementById("div1");
    				var oSpan=oDiv.getElementsByTagName('span')[0];
    				var time=null;
    				var spe=8;
    				var speed=null;
    				function move(bord){
    					clearInterval(time);
    					time=setInterval(function(){
    						if(oDiv.offsetLeft>bord){speed=-spe;}
    						else{speed=spe;}
    						if(oDiv.offsetLeft==bord){clearInterval(time);}
    						else{
    							oDiv.style.left=oDiv.offsetLeft+speed+'px';
    						  }
    					},1);
    				}
    				oDiv.οnmοuseοver=function(){//这里给整个div加鼠标移入的事件
    					move(0);
    				}
    				oDiv.οnmοuseοut=function(){//这里给整个div加鼠标移出事件
    					move(-320);
    				}
    			}
    		</script>
    	</head>
    	<body>
    		<div id="div1">
    			<span>分享到</span>
    		</div>
    	</body>
    </html>

#     #