<script>
//窗体载入,为div控件绑定事件
window.onload = function () { var div1 = document.getElementById('div1');
//mouseover
div1.onmouseover = function () {
startMove(0);
}
//mouseout
div1.onmouseout = function () { startMove(-100);
}
}
//定义定时器
var timer = null;
//淡入和淡出
function startMove(targetPoint) { clearInterval(timer);
var div1 = document.getElementById('div1'); timer = setInterval(function () { var ispeed = 0;
if (div1.offsetLeft < targetPoint) { ispeed = 10;
}
else { ispeed = -10;
}
//控件位置
if (div1.offsetLeft == targetPoint) {
clearInterval(timer);
}
else { div1.style.left = div1.offsetLeft + ispeed + "px";
}
},30); }
</script>

javascript运动功能-分享到的更多相关文章

  1. 原生JavaScript运动功能系列(五):定时定点运动

    原生JavaScript运动功能系列(一):运动功能剖析与匀速运动实现 原生JavaScript运动功能系列(二):缓冲运动 原生JavaScript运动功能系列(三):多物体多值运动 原生JavaS ...

  2. 原生JavaScript运动功能系列(四):多物体多值链式运动

    原生JavaScript运动功能系列(一):运动功能剖析与匀速运动实现 原生JavaScript运动功能系列(二):缓冲运动 原生JavaScript运动功能系列(三):多物体多值运动 多物体多值链式 ...

  3. 原生JavaScript运动功能系列(二):缓冲运动

    匀速运动实现回顾 缓冲运动剖析 示例实现 方法提取 匀速运动实现回顾及缓冲运动剖析: 在这个系列的上一篇博客中原生JavaScript运动功能系列(一):运动功能剖析与匀速运动实现就运动的核心功能组成 ...

  4. 原生JavaScript运动功能系列(一):运动功能剖析与匀速运动实现

    在我们日常生活中运动就是必不可少的部分,走路.跑步.打篮球等.在网页交互设计上运动也是必不可少的部分,创建的网站交互设计运动模块有轮播图,下拉菜单,还有各种炫酷的游戏效果都跟运动密切相关.所以很重要, ...

  5. 原生JavaScript运动功能系列(三):多物体多值运动

    多物体同时出发运动函数实现 多属性同步运动变化实现 一.多物同时触发运动函数实现 前面两个动画示例基本理解了动画的核心:位置变化和速度变化,操作的核心就是定时器分段叠加属性值.但是动画还是基于单个元素 ...

  6. 好程序员技术教程分享JavaScript运动框架

    好程序员技术教程分享JavaScript运动框架,有需要的朋友可以参考下. JavaScript的运动,即让某元素的某些属性由一个值变到另一个值的过程.如让div的width属性由200px变到400 ...

  7. javascript运动系列第一篇——匀速运动

    × 目录 [1]简单运动 [2]定时器管理 [3]分享到效果[4]移入移出[5]运动函数[6]透明度[7]多值[8]多物体[9]回调[10]函数完善[11]最终函数 前面的话 除了拖拽以外,运动也是j ...

  8. Popmotion – 小巧,灵活的 JavaScript 运动引擎

    Popmotion 是一个只有12KB的 JavaScript 运动引擎,可以用来实现动画,物理效果和输入跟踪.原生的DOM支持:CSS,SVG,SVG路径和DOM属性的支持,开箱即用.Popmoti ...

  9. 20个免费的 JavaScript 游戏引擎分享给开发者

    这篇文章收集了20个免费的 JavaScript 游戏引擎分享给开发者.这些游戏引擎能够帮助游戏开发人员更快速高效的开发出各种好玩的游戏. 使用 HTML5.CSS3 和 Javascript 可以帮 ...

随机推荐

  1. (转)window.location.search的用法

    location.search是从当前URL的?号开始的字符串如:http://www.51js.com/viewthread.php?tid=22720它的search就是?tid=22720 通过 ...

  2. Asp.net中实现同一用户名同时登陆,注销先前用户(转)

    Web 项目中经常遇到的问题就是同一用户名多次登陆的问题,相应的解决办法也很多,总结起来不外乎这几种解决办法:将登陆后的用户名放到数据库表中:登陆后的用 户名放到Session中:登陆后的用户名放到A ...

  3. [转载]移动终端浏览器初始设置apple-mobile-web-app-capable

    这两句话的确很有用,有了它,手机访问的时候像样了. 原文地址:移动终端浏览器初始设置apple-mobile-web-app-capable作者:素水凌心 移动终端浏览器默认设置视口的宽度和初始规模. ...

  4. 在Win8.1(64位)系统上安装Scrapy(python 2.7.7)

    为了在win8.1上安装scrapy折腾了好久,最终安装成功,总结步骤如下: 下载安装Visual C++ 2008 redistributables 安装lxml-3.2.4.win-amd64-p ...

  5. python学习视频整理

    python3英文视频教程(全87集) http://pan.baidu.com/s/1dDnGBvV python从入门到精通视频(全60集)链接:http://pan.baidu.com/s/1e ...

  6. 算法导论--python--插入排序

    #!/usr/local/python35/bin/python3.5 #### insert sort if __name__=="__main__": var_list=[3, ...

  7. C语言中的系统时间结构体类型

    在C语言涉及中经常需要定时触发事件,涉及到获取系统时间,其结构体类型有多种.Unix/Linux系统下有以下几种时间结构: 1.time_t 类型:长整型,一般用来表示从1970-01-01 00:0 ...

  8. LeetCode_Triangle

    Given a triangle, find the minimum path sum from top to bottom. Each step you may move to adjacent n ...

  9. Could not find qmake configuration file win32-g++

    D:\Source>c:\Qt\Qt5.3.2_static\bin\qmake -makefile -o Makefile my.proCould not find qmake configu ...

  10. 《Programming WPF》翻译 第7章 3.笔刷和钢笔

    原文:<Programming WPF>翻译 第7章 3.笔刷和钢笔 为了在屏幕上绘制一个图形,WPF需要知道你想要为图形填充什么颜色以及如何绘制它的边框.WPF提供了一些Brush类型支 ...