JS运动基础框架实例分析

本文实例讲述了JS运动基础框架。分享给大家供大家参考。具体分析如下：

这里需要注意：

1. 在开始运动时关闭已有的定时器
2. 把运动和停止隔开

代码如下:

<!DOCTYPE html> 
<html> 
    <head> 
        <meta charset="utf-8"> 
        <title></title> 
        <style type="text/css"> 
            #div1{ 
                width: 200px; 
                height: 200px; 
                background: red; 
                position: absolute; 
                left:0; 
                top:60px; 
            } 
        </style> 
        <script type="text/javascript"> 
            window.onload=function(){ 
                var oDiv=document.getElementById("div1"); 
                var oBt=document.getElementsByTagName('input')[0]; 
                var time=null; 
                oBt.onclick=function(){ 
                    clearInterval(time);//这里首先要关闭一个定时器，这是因为解决在运动过程中多次点击按钮从而产生多个定时器叠加的bug 
                    time=setInterval(function(){ 
                        var speed=7; 
                        if(oDiv.offsetLeft<=600) 
                        oDiv.style.left=oDiv.offsetLeft+speed+'px'; 
                        else{ 
                            clearInterval(time); 
                        } 
                    },30); 
                } 
            } 
        </script> 
    </head> 
    <body> 
        <input type="button" value="开始运动" /> 
        <div id="div1"></div> 
    </body> 
</html>

希望本文所述对大家的javascript程序设计有所帮助。

赞 (0)

相关推荐

  • JS实现匀速运动的代码实例

    JS实现匀速运动的代码实例

    效果: 思路: 利用setInerval()计时器,进行运动.然后关键的一点是在最后停止的时候给它一个填充缝隙的判断. 代码: 复制代码 代码如下: <head runat="server">    <title></title>    <style type="text/css">        #div1        {            width: 100px;            height: 10

  • js实现同一页面多个不同运动效果的方法

    本文实例讲述了js实现同一页面多个不同运动效果的方法.分享给大家供大家参考.具体分析如下: 要点一: function getstyle(obj,name){ if(obj.currentStyle){ return obj.currentStyle[name]; }else{ return getComputedStyle(obj,false)[name]; } } 从样式表中根据id和属性名取值. 要点二: if(attr == "opacity"){ cur = Math.rou

  • js实现同一页面多个运动效果的方法

    本文实例讲述了js实现同一页面多个运动效果的方法.分享给大家供大家参考.具体分析如下: 实现原理,就是在调用的时候,给这五个元素,循环加上事件.需要注意的是,每个元素的定时器需要分开. 要点一: var speed = (target - obj.offsetWidth)/8; 缓冲运动效果,一开始速度很快,然后越来越慢,直到停止 speed = speed>0?Math.ceil(speed):Math.floor(speed); 如果速度大于0,则向上取整,如果速度小于0,则向下取整. 要点

  • JS运动框架之分享侧边栏动画实例

    本文实例讲述了JS运动框架之分享侧边栏动画实现方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html>  <html>      <head>          <meta charset="utf-8">          <title></title>          <style type="text/css">         

  • JS多物体 任意值 链式 缓冲运动

    复制代码 代码如下: <!DOCTYPE HTML> <html> <head> <meta http-equiv="content-type" charset="utf-8" /> <meta http-equiv="content-type" content="text/html" /> <title>demo</title> </h

  • JS匀速运动演示示例代码

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

  • js实现缓冲运动效果的方法

    本文实例讲述了js实现缓冲运动效果的方法.分享给大家供大家参考.具体分析如下: 该实例可实现一开始速度很快,然后慢下来,直到停止的效果. 要点: var speed = (target-box.offsetLeft)/8; 目标点减去元素的当前位置的值除以8,因为offsetleft的值是一直在变大,所以速度的值也是一直的变小 speed = speed>0?Math.ceil(speed):Math.floor(speed); 正向速度的时候向上取整,反向速度的时候向下取整 代码: <!DO

  • JS实现多物体缓冲运动实例代码

    JS实现多物体缓冲运动实例代码

    效果: 思路: 利用setInterval计时器进行运动,offsetWidth实现宽度的变动,在用onmouseover将终点和所选中的DIV放入参数再进行缓冲运动. 代码: 复制代码 代码如下: <head runat="server">    <title></title>    <style type="text/css">        div        {            width: 100px

  • JS运动基础框架实例分析

    本文实例讲述了JS运动基础框架.分享给大家供大家参考.具体分析如下: 这里需要注意: 1. 在开始运动时关闭已有的定时器 2. 把运动和停止隔开 复制代码 代码如下: <!DOCTYPE html>  <html>      <head>          <meta charset="utf-8">          <title></title>          <style type="te

  • JS运动特效之完美运动框架实例分析

    JS运动特效之完美运动框架实例分析

    本文实例讲述了JS运动特效之运动框架.分享给大家供大家参考,具体如下: 在前面一篇的<js运动特效之同时运动>中说过,我们的运动框架还存在一个问题,那究竟是什么问题那?把上一篇的程序做一下调整 oDiv.onmouseover = function () { //startMove(oDiv,{width:300,height:300,opacity:30}); startMove(oDiv,{width:204,height:300,opacity:30}); } 在鼠标移入的时候,我们让w

  • tangram.js库实现js类的方式实例分析

    本文实例讲述了tangram.js库实现js类的方式.分享给大家供大家参考,具体如下: 前面一篇http://www.jb51.net/article/25781.htm对tangram.js库做了较为详细的介绍,这里结合实例分析一下tangram.js库实现js类的方式.代码如下: /* * Tangram * Copyright 2010 Baidu Inc. All rights reserved. * * @author: meizz * @namespace: baidu.lang.c

  • JS逻辑运算符短路操作实例分析

    JS逻辑运算符短路操作实例分析

    本文实例分析了JS逻辑运算符短路操作.分享给大家供大家参考,具体如下: js逻辑运算符有三个:逻辑非!.逻辑与&&.逻辑或||. 所谓短路操作就是,当&&的第一个操作数的值是false时,直接返回第一个操作数的值,不再对第二个操作数进行计算: <script> var bar1 = 0&&c; console.log('bar1====='+bar1); //bar1=====0 var foo1 = 5&&c; console.

  • Laravel5.1 框架控制器基础用法实例分析

    本文实例讲述了Laravel5.1 框架控制器基础用法.分享给大家供大家参考,具体如下: 为什么要使用控制器 像我们之前写一些逻辑呢都是在Route(路由)中,搞得Route文件特别庞大,其实我们应该把这些逻辑都抽到一个控制器里,路由分发后到控制器,控制器做相应的操作,比如关于后台的逻辑应该抽到AdminController中,Route文件只管分发. 1 如何创建一个控制器 1.1.1 创建RESTful控制器 至于什么是RESTful?自行百度- -,我先简单说下,它里面自动填充了一些增删改

  • JavaScript运动减速效果实例分析

    JavaScript运动减速效果实例分析

    本文实例讲述了JavaScript运动减速效果.分享给大家供大家参考.具体如下: 这段代码可帮助利用JS从事游戏编程的朋友,它主要实现一种运行减速缓冲的效果,代码精简,很不错. 运行效果如下图所示: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  • C#验证码识别基础方法实例分析

    C#验证码识别基础方法实例分析

    本文实例讲述了C#验证码识别基础方法,是非常实用的技巧.分享给大家供大家参考.具体方法分析如下: 背景 最近有朋友在搞一个东西,已经做的挺不错了,最后想再完美一点,于是乎就提议把这种验证码给K.O.了,于是乎就K.O.了这个验证码.达到单个图片识别时间小于200ms,500个样本人工统计正确率为95%.由于本人没有相关经验,是摸着石头过河.本着经验分享的精神,分享一下整个分析的思路.在各位大神面前献丑了. 再来看看部分识别结果如下图所示: 这里是不是看着很眼熟?下面再来具体分析一下. 处理第一步

  • JS对象深度克隆实例分析

    本文实例讲述了JS对象深度克隆.分享给大家供大家参考,具体如下: 首先看一个例子: var student = { name:"yxz", age:25 } var newStudent = student; newStudent.sex = "male"; console.log(student); //{name:"yxz",age:25,sex:"male"} 由此可见,将一个对象通过简单的传递赋值传递给一个新的变量时,

  • JS正则子匹配实例分析

    本文实例讲述了JS正则子匹配.分享给大家供大家参考,具体如下: Javascript中,拆分字符串时可以使用string的的split或者substring.但是使用正则会更灵活和准确,这里是一个子匹配的例子,在页面过滤数据时很有用. var reg = /^\[(\d+)-(\d+)\]$/; var str = "[234-45]"; // now, I want the tow data if (reg.exec(str)) { document.write(RegExp.$1

  • js事件触发操作实例分析

    js事件触发操作实例分析

    本文实例讲述了js事件触发操作.分享给大家供大家参考,具体如下: click包含了(mousedown,mouseup)叫做MouseEvents: keydown,keypress,keyup之流叫做UIEvents; focus,load,scroll,submit之流叫做HtmlEvents. MutationEvents,突变事件,往往用于对DOM对象的事件监听. DOMNodeRemoved:当Node被删除时 DOMAttrModified:元素的属性发生改变时 我们来学一学事件触发

随机推荐