关于javascript缓冲运动的笔记

Js里面有关运动的框架比较多,先从基本开始,我感觉缓冲运动是比教基础而且比较重要的,先提供一个小例子。

<script type="text/javascript">
        window.onload = function()
        {
            var oBtn = document.getElementById("btn1");
            var oDiv = document.getElementById("div1");      //通过Id获取div
            oBtn.onclick = function()
            {    
                startMove(310);                   //设置目标值,既要到达的位置
            }
                function startMove(iTarget)                       //传入目标值,运动到什么地方
            {    
                clearInterval(timer);                            //再开启一个定时器之前,先初始化,清除已经开启的,避免造成影响
                    var timer = null;
                timer = setInterval(function(){
                    var iSpeed = (iTarget - oDiv.offsetLeft)/10 ;                //再用offsetLeft之前,要给操作对象定位,拥有一个 letf 值
                    iSpeed = iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
                    //一般的if,else语句都能写成三目运算符
                    // if(iSpeed>0){
                    //         iSpeed = Math.ceil(iSpeed);                //向上取整,使运动速度取整,这样可以避免操作对象在到达目标之前停下来
                    // }else{
                    //     iSpeed = Math.floor(iSpeed);                //向下取整
                    // }
                    
                    if(oDiv.offsetLeft==iTarget)
                    {
                        clearInterval(timer);
                    }else
                    {
                        oDiv.style.left = oDiv.offsetLeft + iSpeed + ‘px‘;
                    }
                    document.title = oDiv.style.left;
                },30);

};
        };
        
    </script>

这是有关缓冲运动比较实用的一些思路,以后应该也会该进一些,最主要的还是要了解目标值与速度的关系

时间: 2024-10-02 07:33:31

关于javascript缓冲运动的笔记的相关文章

缓冲运动 学习笔记

http://bbs.zhinengshe.com/thread-1195-1-1.html 要求:速度逐渐变慢,直到停止. 运行效果:[http://runjs.cn/code/wju7kucq] 问题:物体无法运动到准确的位置[http://runjs.cn/code/i5cbxnxn] 原因:像素不能为小数,因此会被不断的取整,从而达不到准确位置: 解决方案:使用ceil()或floor()对速度进行取整: 运行效果:[http://runjs.cn/detail/r4wofiz8]

Javascript 学习笔记 缓冲运动——逐行分析代码,让你轻松了解缓冲运动的原理

看过上一篇关于Javascript 匀速运动文章的朋友相信对于运动已经有了初步的了解 接下来 讲一下关于缓冲运动的原理 ,我会逐行分析代码,代码简单易懂,能马上理解其中的原理,适用于初学者. #div1 { width: 100px; height: 100px; position: absolute; background: red; top: 50px; left: 0; /*600 初始值*/ } #div2 { width: 1px; height: 300px; position: a

关于javascript的运动教程

一.javascript的匀速运动 关于物体的javascript匀速运动要点分析: 1.物体关于运动的时候,我们要打开定时器 2.打开定时器的时候我们记得要在停止的时候关闭定时器,同时应该注意的是一开始加载的时候,我们也应该关闭定时器,避免多次重复的加载,导致的加速运动. 3.并且速度初始化为0 实施方法: 判断物体的偏移是否小于目标值(判断运动的速度) 小于 可以继续运动 大于向右运动 2.先判断什么地方停下来? 判断条件:物理的偏移量小于7就是不能超过速度的值时 直接让它对齐 <!doct

js缓冲运动代码实例

js缓冲运动代码实例:元素的缓冲运动效果要比匀速运动更为美观一些,因为显得更为有张力和弹性,当然对于浏览者来说可能会有更好的效果,那么留住用户的可能性也就更大,下面就通过代码实例简单介绍一下如何实现此效果.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www

缓冲运动之框架開始一级简单框架实例

***********************缓冲运动[框架開始]-1.html********************************************* <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"

JS实现多物体width缓冲运动实例

多物体运动,运动参数不能公用. 这篇文章主要介绍了JS实现多物体缓冲运动实例代码,有需要的朋友可以参考一下 效果: 思路: 利用setInterval计时器进行运动,offsetWidth实现宽度的变动,在用onmouseover将终点和所选中的DIV放入参数再进行缓冲运动. 代码: 代码如下: <head runat="server"> <title></title> <style type="text/css">

缓冲运动之框架开始一级简单框架实例

***********************缓冲运动[框架开始]-1.html********************************************* <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"

层的缓冲运动

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content=

JavaScript高级程序设计学习笔记--高级技巧

惰性载入函数 因为浏览器之间行为的差异,多数JavaScript代码包含了大量的if语句,将执行引导到正确的代码中,看看下面来自上一章的createXHR()函数. function createXHR(){ if (typeof XMLHttpRequest != "undefined"){ return new XMLHttpRequest(); } else if (typeof ActiveXObject != "undefined"){ if (typeo