伏龙阁资源网

浅谈Javascript如何实现匀速运动
站长资源 2024/11/25 佚名
2 0

网站上会经常用到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码的速度到哪哪哪，一般是不可能的吧。打车你不可能告诉师傅你要跑多快

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

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

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
www.wwsws.com 伏龙阁资源网
39,976影音资源
44,792技术资源
21,817软件资源
651,128站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接