JS实现匀速运动的代码实例_javascript技巧

效果:


 

思路:

利用setInerval()计时器,进行运动。然后关键的一点是在最后停止的时候给它一个填充缝隙的判断。

代码:

复制代码 代码如下:

<head runat="server">
    <title></title>
    <style type="text/css">
        #div1
        {
            width: 100px;
            height: 100px;
            background: #0000FF;
            position: absolute;
            left: 800px;
            top: 100px;
        }
        #div200
        {
            width: 1px;
            height: 400px;
            background: #FF0000;
            position: absolute;
            left: 200px;
        }
        #div500
        {
            width: 1px;
            height: 400px;
            background: #FF0000;
            position: absolute;
            left: 500px;
        }
    </style>
    <script type="text/javascript">
        function move(end) {
            var oDiv = document.getElementById('div1');
            var timer = null;
            timer = setInterval(function () {
                var speed = (end - oDiv.offsetLeft) / 5;        //根据终点和offsetLeft取出运动的速度
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);       //进位取整,小数位变为整位,
                //                if (oDiv.offsetLeft <= end) {
                //                    clearInterval(timer);
                //                }
                //                else {
                //                    oDiv.style.left = oDiv.offsetLeft + speed + 'px';
                //                }
                if (Math.abs(end - oDiv.offsetLeft) <= speed) { //由于在停止的时候最后会出现小的缝隙,或者说没有完全的到达指定地点,所以要小于它的速度
                    clearInterval(timer);                       //当距离小于速度时,让计时器停止
                    oDiv.style.left = end + 'px';           //在停止后填充缝隙。
                }
                else {
                    oDiv.style.left = oDiv.offsetLeft + speed + 'px';       //移动DIV
                }
            }, 30)
        }
    </script>
</head>
<body>
    <input type="button" id="btn1" value="到500的位置" onclick="move(500);" />
    <input type="button" id="btn2" value="到200的位置" onclick="move(200);" />
    <div id="div1">
    </div>
    <div id="div200">200
    </div>
    <div id="div500">500
    </div>
</body>

时间: 2024-11-05 19:34:26

JS实现匀速运动的代码实例_javascript技巧的相关文章

Vue.js实现拖放效果的实例_javascript技巧

页面效果如下所示: 代码请看这里,当当当当: html: <template> <div class='drag-content'> <div class='project-content'> <div class='select-item' draggable='true' @dragstart='drag($event)' v-for='pjdt in projectdatas'>{{pjdt.name}}</div> </div>

js调出上下文菜单的实例_javascript技巧

本文实例讲述了js调出上下文菜单的实例代码,分享给大家供大家参考,具体如下: 原理 当用户点击右键时会触发一个contextmenu事件,默认会触发浏览器的默认的上下文菜单,通过手动阻止这个默认行为,然后再显示自定义的上下文菜单,当用户单击时隐藏这个菜单即可.代码 1.html <div id="box" style="color:red;width: 100%;height:1000px;" > <div id="left"

js简单工厂模式用法实例_javascript技巧

本文实例讲述了js简单工厂模式用法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html> <html> <head> <title>简单工厂模式</title> </head> <body> <script> //简单工厂模式 var BicycleShop = function(){}; BicycleShop.prototype ={ sellBicycle : function(mod

js格式化时间的简单实例_javascript技巧

Date.prototype.format = function(format) { //author: meizz let o = { "M+": this.getMonth() + 1, //月份 "d+": this.getDate(), //日 "H+": this.getHours(), //小时 "m+": this.getMinutes(), //分 "s+": this.getSeconds

用JS生成UUID的方法实例_javascript技巧

用JS生成UUID的方法实例 <!DOCTYPE html> <html> <head> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"> </script> <script> var id=getUuid(); $(document).ready(function(){ $("p").click(function(

js变形金刚文字特效代码分享_javascript技巧

为大家分享的js变形金刚文字特效代码如下 -----------------------------------------------效果演示----------------------------------------------- <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>js变形金刚文字特效&l

JS 拼凑字符串的简单实例_javascript技巧

和Java一样,JS中直接用"+"号拼凑字符串是很耗费资源的,所以在大量拼凑字符串的情景中,我们也需要一个类似于StringBuffer的工具, 下面利用Array.join()方法实现StringBuffer function StringBuffer() { this._strs = new Array; } StringBuffer.prototype.append = function (str) { this._strs.push(str); }; StringBuffer.

js实现StringBuffer的简单实例_javascript技巧

实现: function StringBuffer() { this.__strings__ = []; }; StringBuffer.prototype.Append = function (str) { this.__strings__.push(str); return this; }; //格式化字符串 StringBuffer.prototype.AppendFormat = function (str) { for (var i = 1; i < arguments.length;

JavaScript删除指定子元素代码实例_javascript技巧

原生javascript删除指定子元素代码实例: 本章节介绍一下如何利用原生javascript实现删除指定子元素. 大家都知道使用jquery实现此功能更为方便,不过使用原生的javascript也不麻烦,下面做一下介绍. 关于jquery如何实现此功能可以参阅jquery删除指定子元素代码实例一章节. 代码实例: 复制代码 代码如下: <!DOCTYPE HTML> <html> <meta charset="utf-8"> <title&