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 可以帮 ...
随机推荐
- 网页title标题的闪动效果
通过网页title来提示用户有新消息这个功能很常见,比如现在的微博,还有一些邮箱,这个功能都很常见. 显示信息数: <input type="text" id="t ...
- winform textbox 的自动实现功能
好久没写博客了,主要是太懒了,之前因为做bs的比较多现在想转cs端了,虽然现在做cs也一年了,可接触的东西太过零碎了,以至于感觉这一年好像什么都没有学到.估计是因为学了之后没有记录,不扎实,然后又忘记 ...
- Lonely Integer
https://www.hackerrank.com/challenges/lonely-integer def main(): n = int(raw_input()) s = dict() a = ...
- CSU 1120 病毒
最长公共上升子序列(LCIS) 裸的算法题. 动态规划: 两组数组a[n].b[m]. f[i][i]表示以a[i].b[j]结尾的两个数组的LCIS. 转移方程: a[i]!=b[j] : f[i] ...
- [Codeforces Round #186 (Div. 2)] A. Ilya and Bank Account
A. Ilya and Bank Account time limit per test 2 seconds memory limit per test 256 megabytes input sta ...
- hdu 4419 Colourful Rectangle
http://acm.hdu.edu.cn/showproblem.php?pid=4419 题意:给出3种颜色,重叠会生成新的颜色,然后有一些矩形,求出每种颜色的面积. 转化为二进制表示颜色:001 ...
- WPF InkCanvas MouseDown及MouseLeftButtonDown事件不触发的代替事件
PreviewMouseDown事件可以触发 再通过e.LeftButton 的状态判断是否按钮被按下 特此备忘
- 无人参与安装IIS 6.0
使用脚本安装 IIS 从“开始”菜单,单击“运行”. 在“打开”框中,键入 cmd,然后单击“确定”. 在命令提示符下,键入 Sysocmgr.exe /i:sysoc.inf /u:%path_to ...
- 深入浅出Node.js (5) - 内存控制
5.1 V8的垃圾回收机制与内存限制 5.1.1 Node与V8 5.1.2 V8的内存限制 5.1.3 V8的对象分配 5.1.4 V8的垃圾回收机制 5.1.5 查看垃圾回收日志 5.2 高效使用 ...
- bzoj1060 [ZJOI2007]时态同步
Description 小Q在电子工艺实习课上学习焊接电路板.一块电路板由若干个元件组成,我们不妨称之为节点,并将其用数字1,2,3….进行标号.电路板的各个节点由若干不相交的导线相连接,且对于电路板 ...