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 可以帮 ...
随机推荐
- 如何禁用不需要的HTTP方法
IIS7.0默认开启了不安全的OPTIONS和TRACE方法,建议关闭这两个方法. 以下环境为windows server 2008.IIS7.0 方法(1):web.config 在<conf ...
- C# 如何获取错误所在行数
两种方法,一种是利用error.StackTrace,另外一种是try-catch找到错误行数,具体如下: 一.error.StackTrace代码 int i = ex.StackTrace.Ind ...
- DoctrineMigrationsBundle
数据库迁移特征是数据库抽象层的扩展,允许你用编程的方式,安全.方便.标准化实现数据库结构的更新. 安装 首先使用composer安装 $ composer require doctrine/doctr ...
- Block(二)内存管理与其他特性
一.block放在哪里 我们针对不同情况来讨论block的存放位置: 1.栈和堆 以下情况中的block位于堆中: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 ...
- final关键字的作用
final 可以修饰类.方法.变量. (1):final修饰的变量是一个常量,只能被赋值一次. 常量一般使用final声明,如: public static final String CHINA = ...
- C++11 new feature
C++11 在类中引入了Move Constructor and the Move Assignmnt Operaetor,所谓‘move’指的是在复制对象时,left object 不用再创建资源, ...
- LeetCode_Permutations
Given a collection of numbers, return all possible permutations. For example, [1,2,3] have the follo ...
- 模拟IIC总线汇编程序软件包
一.概述 为了非常方便地对 I2C 从器件进行快速的.正确的读写操作,我们为此而设计出虚拟 I2C 总线操作平台软件包.本软件包是主方式下的虚拟 I2C 总线软件包,只要用户给子程序提供几个主要的参数 ...
- UESTC_排名表 2015 UESTC Training for Graph Theory<Problem I>
I - 排名表 Time Limit: 3000/1000MS (Java/Others) Memory Limit: 65535/65535KB (Java/Others) Submit S ...
- POJ3669(Meteor Shower)(bfs求最短路)
Meteor Shower Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 12642 Accepted: 3414 De ...