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>