浅谈Javascript如何实现匀速运动


Posted in Javascript onDecember 19, 2014

网站上会经常用到Javascript 中的运动,这次与大家分享一下一些运动的基本应用 。 方便大家在开发中能够直接使用。

代码简单易懂,适用于初学者。最后会一步一步整理出一套自己的运动框架。

应用案例效果图:

浅谈Javascript如何实现匀速运动

鼠标移动到分享上 ,左边的div就会显示出来。移开会自己恢复。相信这个大家都会用到 很实用,下面看看代码是如何实现的。

<style type="text/css">

            #div1 {

                width: 150px;

                height: 200px;

                background: green;

                position: absolute;

                left: -150px;

            }

            #div1 span {

                position: absolute;

                width: 20px;

                height: 60px;

                line-height: 20px;

                background: blue;

                right: -20px;

                top: 70px;

            }

        </style>
<body>

        <div id="div1">

            <span>

                分享到

            </span>

        </div>

    </body>

以下是Javascript 代码

<script type="text/javascript">

            window.onload=function(){

                var oDiv=document.getElementById("div1");

                oDiv.onmouseover=function(){

                    startMove(0);

                };

                oDiv.onmouseout=function(){

                    startMove(-150);

                };

            }

            var time=null;

            function startMove(iTraget){

                var oDiv=document.getElementById("div1");

                clearInterval(time);

                time=setInterval(function(){

                    var speed=0;

                    if(oDiv.offsetLeft>iTraget){

                        speed=-10;

                    }else{

                        speed=10;

                    }

                    if(oDiv.offsetLeft==iTraget){

                        clearInterval(time);

                    }else{

                        oDiv.style.left=oDiv.offsetLeft+speed+'px';

                    }

                },30);

            }

        </script>

思路:

样式中初始的left是-150 这样div就是缩在里面,给0 就会显示出来。 那么我们只要变动这个值就可以了

startMove 中的参数 iTarget 是目标点 ,表示到哪个目标点会停下来。

控制speed 的大小 就能控制运动的快慢。如果达到目标点 就停止定时器 。

规律:

*  假设

*         left:30           iTarget:300     得出    往右  为正
*         left:600         iTarget:50       得出    往左  为负

* 通过当前位置left 与目标点的 关系 iTarget 推断出 速度的正负

注意: 一上来就要关了定时器,因为是每次移动到分享到,都会开个定时器,开的越多相对来说速度就越快,因为同时会有多个定时器执行。

所以每次要保证一个定时器工作。

遵循:函数功能一样,参数越少越好的原则 ,所以根据上面的规律把speed 并不是作为参数传入。

举个生活中的例子:你打车,告诉出租车司机已100码的速度到哪哪哪,一般是不可能的吧。打车你不可能告诉师傅你要跑多快

所以程序也是一样的,这里就把速度这个传参去掉了。

当然现在的这个运动框架还会有许多问题,在之后会陆续解决。下篇文章,我们来探讨下匀速运动如何停止。

Javascript 相关文章推荐
Web前端设计模式  制作漂亮的弹出层
Oct 29 Javascript
javascript 常用功能总结
Mar 18 Javascript
24款热门实用的jQuery插件推荐
Dec 24 Javascript
jQuery EasyUI中DataGird动态生成列的方法
Apr 05 Javascript
javascript之Array 数组对象详解
Jun 07 Javascript
vue实现可增删查改的成绩单
Oct 27 Javascript
JS实现前端缓存的方法
Sep 21 Javascript
Angularjs过滤器实现动态搜索与排序功能示例
Dec 13 Javascript
vue自定义filters过滤器
Apr 26 Javascript
layui 优化button按钮和弹出框的方法
Aug 15 Javascript
webpack4实现不同的导出类型
Apr 09 Javascript
vue element-ui读取pdf文件的方法
Nov 26 Javascript
Javascript添加监听与删除监听用法详解
Dec 19 #Javascript
Javascript 实现图片无缝滚动
Dec 19 #Javascript
使用JavaScript获取地址栏参数的方法
Dec 19 #Javascript
JS获取各种宽度、高度的简单介绍
Dec 19 #Javascript
JQuery右键菜单插件ContextMenu使用指南
Dec 19 #Javascript
简单谈谈jQuery(function(){})与(function(){})(jQuery)
Dec 19 #Javascript
jQuery多级弹出菜单插件ZoneMenu
Dec 18 #Javascript
You might like
php模块memcache和memcached区别分析
2011/06/14 PHP
使用php实现下载生成某链接快捷方式的解决方法
2013/05/07 PHP
php数组去重实例及分析
2013/11/26 PHP
PHP用户验证和标签推荐的简单使用
2016/10/31 PHP
php 广告点击统计代码(php+mysql)
2018/02/21 PHP
PHP类的自动加载机制实现方法分析
2019/01/10 PHP
收藏一些不常用,但是有用的代码
2007/03/12 Javascript
Javascript 二维数组
2009/11/26 Javascript
js转义字符介绍
2013/11/05 Javascript
javascript使用百度地图api和html5特性获取浏览器位置
2014/01/10 Javascript
jQuery中get和post方法传值测试及注意事项
2014/08/08 Javascript
使用javascript实现json数据以csv格式下载
2015/01/09 Javascript
Node.js实现Excel转JSON
2015/04/24 Javascript
ajax实现加载页面、删除、查看详细信息 bootstrap美化页面!
2017/03/14 Javascript
Vue 全家桶实现移动端酷狗音乐功能
2018/11/16 Javascript
js实现一个简易计算器
2020/03/30 Javascript
vue 实现setInterval 创建和销毁实例
2020/07/21 Javascript
JS实现密码框效果
2020/09/10 Javascript
[01:03:56]Mineski vs TNC 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
Cpy和Python的效率对比
2015/03/20 Python
使用python实现knn算法
2017/12/20 Python
Python IDE Pycharm中的快捷键列表用法
2019/08/08 Python
Python环境Pillow( PIL )图像处理工具使用解析
2019/09/12 Python
PySide2出现“ImportError: DLL load failed: 找不到指定的模块”的问题及解决方法
2020/06/10 Python
Python 的 __str__ 和 __repr__ 方法对比
2020/09/02 Python
实现CSS3中的border-radius(边框圆角)示例代码
2013/07/19 HTML / CSS
马克华菲官方商城:Mark Fairwhale
2016/09/04 全球购物
Lenox官网:精美的瓷器&独特的礼品
2017/02/12 全球购物
奥地利手表、香水、化妆品和珠宝购物网站:Brasty.at
2021/01/17 全球购物
求职面试个人自我评价
2014/02/28 职场文书
入党政审材料范文
2014/12/24 职场文书
升职感谢信
2015/01/22 职场文书
考试作弊检讨书范文
2015/01/27 职场文书
工作时间调整通知
2015/04/24 职场文书
五星级酒店宣传口号
2015/12/25 职场文书
创业计划书之零食店(进口)
2019/09/24 职场文书