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

编程学习 2021-07-04 21:47www.dzhlxh.cn编程入门
这篇文章主要介绍了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>

希望本文所述对大家的javascript程序设计有所帮助。

Copyright © 2016-2025 www.dzhlxh.cn 金源码 版权所有 Power by

网站模板下载|网络推广|微博营销|seo优化|视频营销|网络营销|微信营销|网站建设|织梦模板|小程序模板