浅谈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 相关文章推荐
javascript attachEvent绑定多个事件执行顺序问题
Oct 20 Javascript
jQuery技巧总结
Jan 01 Javascript
jQuery中prevUntil()方法用法实例
Jan 08 Javascript
AngularJS学习笔记之ng-options指令
Jun 16 Javascript
Node.js编程中客户端Session的使用详解
Jun 23 Javascript
javascript 使用for循环时该注意的问题-附问题总结
Aug 19 Javascript
JS鼠标拖拽实例分析
Nov 23 Javascript
轮播的简单实现方法
Jul 28 Javascript
详解Vue双向数据绑定原理解析
Sep 11 Javascript
理解Koa2中的async&amp;await的用法
Feb 05 Javascript
node中实现删除目录的几种方法
Jun 24 Javascript
JS数组push、unshift、pop、shift方法的实现与使用方法示例
Apr 29 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时间戳 strtotime()使用方法和技巧
2013/10/29 PHP
取得单条网站评论以数组形式进行输出
2014/07/28 PHP
大家都应该掌握的PHP关联数组使用技巧
2015/12/25 PHP
PHP常用日期加减计算方法实例小结
2018/07/31 PHP
php将从数据库中获得的数据转换成json格式并输出的方法
2018/08/21 PHP
php对微信支付回调处理的方法
2018/08/23 PHP
Linux基于php-fpm模式的lamp搭建phpmyadmin的方法
2018/10/25 PHP
jquery判断单个复选框是否被选中的代码
2009/09/03 Javascript
js event事件的传递与冒泡处理
2009/12/06 Javascript
js中单引号与双引号冲突问题解决方法
2013/10/04 Javascript
Javascript仿PHP $_GET获取URL中的参数
2014/05/12 Javascript
浅谈jQuery异步对象(XMLHttpRequest)
2014/11/17 Javascript
js验证真实姓名与身份证号是否匹配
2015/10/13 Javascript
基于node.js依赖express解析post请求四种数据格式
2017/02/13 Javascript
JS之if语句对接事件动作逻辑(详解)
2017/06/28 Javascript
微信小程序实现复选框效果
2018/12/28 Javascript
Vue快速实现通用表单验证的方法
2020/02/24 Javascript
Nodejs文件上传、监听上传进度的代码
2020/03/27 NodeJs
vue组件暴露和.js文件暴露接口操作
2020/08/11 Javascript
Vue使用v-viewer实现图片预览
2020/10/21 Javascript
[01:00:30]TFT vs VGJ.T Supermajor 败者组 BO3 第一场 6.5
2018/06/06 DOTA
python检测远程服务器tcp端口的方法
2015/03/14 Python
Java实现的执行python脚本工具类示例【使用jython.jar】
2018/03/29 Python
python分割一个文本为多个文本的方法
2019/07/22 Python
浅谈Python中的异常和JSON读写数据的实现
2020/02/27 Python
keras 自定义loss损失函数,sample在loss上的加权和metric详解
2020/05/23 Python
Python测试框架:pytest学习笔记
2020/10/20 Python
python3 googletrans超时报错问题及翻译工具优化方案 附源码
2020/12/23 Python
Mankind美国/加拿大:英国领先的男士美容护发用品公司
2018/12/05 全球购物
台湾7-ELEVEN线上购物中心:7-11
2021/01/21 全球购物
校园之星获奖感言
2014/01/29 职场文书
厨房管理计划书
2014/04/27 职场文书
党员年终个人总结
2015/02/14 职场文书
委托开发合同书(标准版)
2019/08/07 职场文书
AudioContext 实现音频可视化(web技术分享)
2022/02/24 Javascript
方法汇总:Python 安装第三方库常用
2022/04/26 Python