JS運動框架之分享側邊欄動畫實例_javascript技巧

 
 
     
         
        標題> 
         
        *{ 
            邊距：0px； 
            內邊距：0px； 
        } 
            #div1{ 
                寬度：319px； 
                高度：340像素； 
                邊框：1px實線#FFF； 
                位置：絕對； 
                上方：100px； 
                左：-320px； 
                背景影像：url(images/1.png); 
                背景重複：不重複； 
            } 
            #div1 跨距{ 
                寬度：30px； 
                高度：130像素； 
                邊框：1px 純藍色； 
                位置：絕對； 
                右：-23px； 
                上方：95px； 
                背景：紅色； 
                font-family: "微軟雅黑"; 
                顏色：#FFFFFF； 
                為對齊和對齊中； 
                高上：40px； 
                邊框半徑：0px 200px 200px 0px； 
            } 
        款式> 
         
            window.onload=function(){ 
                var oDiv=document.getElementById("div1"); 
                var oSpan=oDiv.getElementsByTagName('span')[0]; 
                var 時間=空； 
                無功速率=8； 
                oDiv.onmouseover=function(){//這裡移入整個div加滑鼠的事件
                    清除間隔（時間)； 
                    時間=setInterval(function(){ 
                        if(oDiv.offsetLeft>=0){clearInterval(time);} 
                        else{ 
                            oDiv.style.left=oDiv.offsetLeft speed 'px';  oDiv.style.left=oDiv.offsetLeft speed 'px';  oDiv.style.left=oDiv.offsetLeft speed 'px'; 

                        } 
                    },1); 
                } 
                oDiv.onmouseout=function(){//這裡將整個div加滑鼠移出事件
                    clearInterval(time); 
                    time=setInterval(function(){ 
                        if(oDiv.offsetLeftLeft                         else{ 
                            oDiv.style.left=oDiv.offsetLeft-speed 'px';  oDiv.style.left=oDiv.offsetLeft-speed 'px'; 

                        } 
                    },1); 
                } 
            }