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


Posted in Javascript onMarch 03, 2015

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
javascript最常用与实用的创建类的代码
Aug 12 Javascript
javascript检查表单数据是否改变的方法
Jul 30 Javascript
js实现Select头像选择实时预览代码
Aug 17 Javascript
jQuery Password Validation密码验证
Dec 30 Javascript
node.js程序作为服务并在windows下开机自启动(用forever)
Mar 29 Javascript
Vue2.0 UI框架ElementUI使用方法详解
Apr 14 Javascript
用node开发并发布一个cli工具的方法步骤
Jan 03 Javascript
echarts多条折线图动态分层的实现方法
May 24 Javascript
express框架中使用jwt实现验证的方法
Aug 25 Javascript
详解BootStrap表单验证中重置BootStrap-select验证提示不清除的坑
Sep 17 Javascript
JavaScript实现多个物体同时运动
Mar 12 Javascript
利用Vue实现简易播放器的完整代码
Dec 30 Vue.js
jQuery DOM删除节点操作指南
Mar 03 #Javascript
JS实现表格数据各种搜索功能的方法
Mar 03 #Javascript
深入理解JavaScript系列(27):设计模式之建造者模式详解
Mar 03 #Javascript
javascript验证身份证号
Mar 03 #Javascript
JS烟花背景效果实现方法
Mar 03 #Javascript
深入理解JavaScript系列(26):设计模式之构造函数模式详解
Mar 03 #Javascript
深入理解JavaScript系列(25):设计模式之单例模式详解
Mar 03 #Javascript
You might like
获得Google PR值的PHP代码
2007/01/28 PHP
PHP 反射机制实现动态代理的代码
2008/10/22 PHP
php 遍历显示文件夹下所有目录、所有文件的函数,没有分页的代码
2008/11/14 PHP
laravel 4安装及入门图文教程
2014/10/29 PHP
js计数器代码
2006/11/04 Javascript
动态添加js事件实现代码
2009/03/12 Javascript
javaScript如何生成xmlhttp
2013/12/16 Javascript
AngularJS向后端ASP.NET API控制器上传文件
2016/02/03 Javascript
JavaScript 浏览器兼容性总结及常用浏览器兼容性分析
2016/03/30 Javascript
vue数据双向绑定的注意点
2017/06/23 Javascript
JS Input里添加小图标的两种方法
2017/11/11 Javascript
vue脚手架中配置Sass的方法
2018/01/04 Javascript
JavaScript使用Math.random()生成简单的验证码
2019/01/21 Javascript
layui type2 通过url给iframe子页面传值的例子
2019/09/06 Javascript
微信小程序事件流原理解析
2019/11/27 Javascript
JS控制下拉列表左右选择实例代码
2020/05/08 Javascript
vue使用exif获取图片经纬度的示例代码
2020/12/11 Vue.js
Python中使用HTMLParser解析html实例
2015/02/08 Python
详解Python程序与服务器连接的WSGI接口
2015/04/29 Python
Python的包管理器pip更换软件源的方法详解
2016/06/20 Python
深入理解Python中的*重复运算符
2017/10/28 Python
Python socket实现的简单通信功能示例
2018/08/21 Python
python os.path模块常用方法实例详解
2018/09/16 Python
Python 最大概率法进行汉语切分的方法
2018/12/14 Python
Python正则表达式匹配和提取IP地址
2019/06/06 Python
python爬虫看看虎牙女主播中谁最“顶”步骤详解
2020/12/01 Python
澳洲女装时尚在线:Blue Bungalow
2018/05/05 全球购物
任课老师推荐信范文
2013/11/24 职场文书
运动会入场词60字
2014/02/15 职场文书
行政助理工作职责范本
2014/03/04 职场文书
干部下基层实施方案
2014/03/14 职场文书
留守儿童工作方案
2014/06/02 职场文书
国际贸易专业自荐信
2014/06/10 职场文书
2014年部门工作总结
2014/11/12 职场文书
大学生社会实践活动总结报告
2015/05/06 职场文书
教师考核鉴定意见
2015/06/05 职场文书