javascript运动功能-分享到
- <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运动功能-分享到的更多相关文章
- 原生JavaScript运动功能系列(五):定时定点运动
原生JavaScript运动功能系列(一):运动功能剖析与匀速运动实现 原生JavaScript运动功能系列(二):缓冲运动 原生JavaScript运动功能系列(三):多物体多值运动 原生JavaS ...
- 原生JavaScript运动功能系列(四):多物体多值链式运动
原生JavaScript运动功能系列(一):运动功能剖析与匀速运动实现 原生JavaScript运动功能系列(二):缓冲运动 原生JavaScript运动功能系列(三):多物体多值运动 多物体多值链式 ...
- 原生JavaScript运动功能系列(二):缓冲运动
匀速运动实现回顾 缓冲运动剖析 示例实现 方法提取 匀速运动实现回顾及缓冲运动剖析: 在这个系列的上一篇博客中原生JavaScript运动功能系列(一):运动功能剖析与匀速运动实现就运动的核心功能组成 ...
- 原生JavaScript运动功能系列(一):运动功能剖析与匀速运动实现
在我们日常生活中运动就是必不可少的部分,走路.跑步.打篮球等.在网页交互设计上运动也是必不可少的部分,创建的网站交互设计运动模块有轮播图,下拉菜单,还有各种炫酷的游戏效果都跟运动密切相关.所以很重要, ...
- 原生JavaScript运动功能系列(三):多物体多值运动
多物体同时出发运动函数实现 多属性同步运动变化实现 一.多物同时触发运动函数实现 前面两个动画示例基本理解了动画的核心:位置变化和速度变化,操作的核心就是定时器分段叠加属性值.但是动画还是基于单个元素 ...
- 好程序员技术教程分享JavaScript运动框架
好程序员技术教程分享JavaScript运动框架,有需要的朋友可以参考下. JavaScript的运动,即让某元素的某些属性由一个值变到另一个值的过程.如让div的width属性由200px变到400 ...
- javascript运动系列第一篇——匀速运动
× 目录 [1]简单运动 [2]定时器管理 [3]分享到效果[4]移入移出[5]运动函数[6]透明度[7]多值[8]多物体[9]回调[10]函数完善[11]最终函数 前面的话 除了拖拽以外,运动也是j ...
- Popmotion – 小巧,灵活的 JavaScript 运动引擎
Popmotion 是一个只有12KB的 JavaScript 运动引擎,可以用来实现动画,物理效果和输入跟踪.原生的DOM支持:CSS,SVG,SVG路径和DOM属性的支持,开箱即用.Popmoti ...
- 20个免费的 JavaScript 游戏引擎分享给开发者
这篇文章收集了20个免费的 JavaScript 游戏引擎分享给开发者.这些游戏引擎能够帮助游戏开发人员更快速高效的开发出各种好玩的游戏. 使用 HTML5.CSS3 和 Javascript 可以帮 ...
随机推荐
- hadoop 2.6.0上安装sqoop-1.99.6-bin-hadoop200
第一步:下载sqoop-1.99.6-bin-hadoop200.tar.gz 地址:http://www.eu.apache.org/dist/sqoop/1.99.6/ 第二步:将下载好的sqo ...
- Geodatabase - 删除要素
//删除要素类. //例如:workspacePath=@"G:\doc\gis\1.400\data\pdb.mdb", featureClassPath="res2_ ...
- C#总结(一)
学C#也有两年多了,发现如果不总结一下,很多C#的知识都会忘掉,所以希望写这系列的文章来总结一下C#的基础知识.如果有写错或者不足的地方,希望可以提出纠正. C#可以说是依附在.NET Framewo ...
- (一)backbone - API入门
初探 backbone采用MVC模式,本身提供了模型.控制器和视图从而我们应用程序的骨架便形成. Backbone.js 唯一重度依赖 Underscore.js. 对于 RESTful , hist ...
- hdu5355 Cake(构造)
转载请注明出处: http://www.cnblogs.com/fraud/ ——by fraud Cake Time Limit: 2000/1000 MS (Java/Other ...
- shell中的双括号表达式
语法格式 (( expression )) expression可以是任何数学表达式,可以包含的操作符有: + 加 - 减 * 乘(无需转义) / 除 % 取余 ** 指数 == 等于 != 不等 ...
- MAC中通过gem命令安装compass
在MAC中通过gem命令安装compass时会出异常,原因是compass版本更新了,一些运行时所用到的依赖软件的版本没能得到更新,故而出现错误.例如,用以下命令安装compass: $ gem in ...
- jQuery代码片段
禁用页面右键菜单 $(document).bind('contextmenu', function(){ return false; }); 浏览器判断 $.browser.version $.bro ...
- meta property=og标签含义及作用
不理解Meta Property=og标签是什么意思,以及对SEO的影响,看一下下面的介绍.Meta Property=og标签是什么呢?og是一种新的HTTP头部标记,即Open Graph Pro ...
- Python-----格式化字符
摘要: Python中 %s . %r Python中也有类似于C中的 printf()格式输出,使用 % 运算符,格式: 格式标记字符串 % 要输出的值组 右边的”值组“若有两个及以上的值则需要用小 ...