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

2024-05-06 16:15:50

字体：大中小

来源：转载

供稿：网友

这篇文章主要介绍了JS运动框架之分享侧边栏动画,实例分析了javascript操作div及css的技巧,需要的朋友可以参考下

本文实例讲述了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.onload=function(){  
		                var oDiv=document.getElementById("div1");  
		                var oSpan=oDiv.getElementsByTagName('span')[0];  
		                var time=null;  
		                var speed=8;  
		                oDiv.onmouseover=function(){//这里给整个div加鼠标移入的事件  
		                    clearInterval(time);  
		                    time=setInterval(function(){  
		                        if(oDiv.offsetLeft>=0){clearInterval(time);}  
		                        else{  
		                            oDiv.style.left=oDiv.offsetLeft+speed+'px';  
		                        }  
		                    },1);  
		                }  
		                oDiv.onmouseout=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.onload=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.onmouseover=function(){//这里给整个div加鼠标移入的事件
		                    move(0);  
		                }  
		                oDiv.onmouseout=function(){//这里给整个div加鼠标移出事件
		                    move(-320);  
		                }  
		            }  
		        </script>  
		    </head>  
		    <body>  
		        <div id="div1">  
		            <span>分享到</span>  
		        </div>  
		    </body>  
		</html>