JavaScript Timer实现动画效果
<style type="text/css">
div {
width: 100px;
height: 50px;
background: red;
margin: 10px;
}
</style>
<body>
<div></div>
<div></div>
<div></div>
</body>
<script type="text/javascript">
window.onload = function () {
var aDiv = document.getElementsByTagName('div');
for (var i = ; i < aDiv.length; i++) {
aDiv[i].timer=null;
aDiv[i].onmouseover = function () {
startMove(this, );
};
aDiv[i].onmouseout = function () {
startMove(this, );
};
}
} function startMove(obj, iTarget) {
clearInterval(obj.timer);
obj.timer = setInterval(function () {
var speed = (iTarget - obj.offsetWidth) / ;
speed = speed > ? Math.ceil(speed) : Math.floor(speed);
if (obj.offsetWidth == iTarget) {
clearInterval(obj.timer);
} else {
obj.style.width = obj.offsetWidth + speed + 'px';
}
}, );
}
</script>
JavaScript Timer实现动画效果的更多相关文章
- javascript 通用loading动画效果
由于项目中多处要给ajax提交的时候增加等待动画效果,所以就写了一个简单的通用js方法: 代码如下: /*ajax提交的延时等待效果*/ var AjaxLoding = new Object(); ...
- javascript 回到顶部 动画效果
上代码: <!DOCTYPE html> <html> <head> <meta content="测试demo" name=" ...
- 如何使用SVG生成超酷的页面预加载素描动画效果
在线演示 本地下载 1 SVG简介 可缩放矢量图形是基于可扩展标记语言(标准通用标记语言的子集),用于描述二维矢量图形的一种图形格式.它由万维网联盟制定,是一个开放标准. 2 SVG的特点 与其他图像 ...
- Javascript动画效果（三）
Javascript动画效果(三) 前面我们已经介绍了速度动画.透明度动画.多物体运动和任意值变化,并且我们在Javascript动画效果(二)中介绍到我们封装了一个简单的插件雏形,接下来我们对前面的 ...
- Javascript动画效果（一）
Javascript动画效果(一) 前面我们介绍了Javascript的回到顶部效果,今天呢,我们对Javascript动画做进一步的研究.在这篇博文中我们只介绍简单的匀速运动.简单的缓冲运动和简单的 ...
- Javascript动画效果（二）
Javascript动画效果(二) 在前面的博客中讲了简单的Javascript动画效果,这篇文章主要介绍我在改变之前代码时发现的一些问题及解决方法. 在前面的多物体宽度变化的例子中,我们给其增加代码 ...
- javascript动画效果之缓冲动画(修改版)
在编写多块同时触发运动的时候,发现一个BUG, timer = setInterval(show, 30);本来show是一个自定义函数,当设为timer = setInterval(show(one ...
- javascript动画效果之透明度(修改版)
在编写多块同时触发运动的时候,发现一个BUG, timer = setInterval(show, 30);本来show是一个自定义函数,当设为timer = setInterval(show(one ...
- javascript动画效果之匀速运动(修订版)
在编写多块同时触发运动的时候,发现一个BUG, timer = setInterval(show, 30);本来show是一个自定义函数,当设为timer = setInterval(show(one ...
随机推荐
- Codeforces 486E LIS of Sequence 题解
题目大意: 一个序列,问其中每一个元素是否为所有最长上升子序列中的元素或是几个但不是所有最长上升子序列中的元素或一个最长上升子序列都不是. 思路: 求以每一个元素为开头和结尾的最长上升子序列长度,若两 ...
- iframe框架用法
1.iframe标签: <iframe src="demo1.html" name="qiuqiu_Page" frameborder="0&q ...
- web应用和虚拟目录映射
Tip:WEB应用程序 WEB应用程序指供浏览器访问的程序,通常简称为web应用. 一个web应用由多个静态web资源和动态web资源组成,如: HTML.css.js文件 JSP文件.java程序. ...
- CentOS 7 学习笔记（一）时间管理
1 获取当前时间 [root@limt01 ~]# date 2015年 05月 22日 星期五 01:30:50 CST 2 获取当前日期 [root@limt01 ~]# date "+ ...
- jQuery的加法运算.
jQuery的加法运算. 加法运算 ?想必大家听到这都会不屑了,加法运算这是多么简单的运算.然而有的时候在jQuery也让人挺头疼的. 常规的是: var num1 = 123; var num2=1 ...
- Windows下使用doxygen阅读和分析C/C++代码
Windows下使用doxygen阅读和分析C/C++代码 转自:http://blog.sina.com.cn/s/blog_63d902570100gwk6.html 虽然使用各种IDE或者Sou ...
- 关于react native
刚开始学习react native,有很多的不懂,记录一些小知识,也许下一个项目可能用到,活到老学到老........ http://www.lcode.org/react-native-viewpa ...
- tabhost 下 setOnItemClickListener失效的问题
分析了一下代码,应该是tabhost 的ontabchangedListener接管了下面应该由setOnItemClickListener接管的部分,导致不能相应setOnItemClickList ...
- Python之路Day14--html
本节内容: 一.HTML 二.CSS 三.JS HTML 1.一套规则,浏览器认识的规则. 2.开发者: 学习Html规则 开发后台程序: - 写Html文件(充当模板的作用) ****** - 数据 ...
- android之volley学习
Volley是android的平台通信库,一个新的网络通信框架.Volley 的特点:适合数据量小,通信频繁的网络操作. 获取Volley git 工具使用:git clone https://and ...