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 ...
随机推荐
- C# uploadify 上传 -220 IO Error 问题
1. 前端: uploadify 上文件大小限制配置. 2. 后端: web.config 配置 <?xml version="1.0"?> <configura ...
- Artifact Project3:war exploded: Error during artifact deployment. See server log for details.
第一次建Struts2 idea遇到了这个问题,很莫名其妙,搞了几天没解决,几乎要放弃idea了.最后解决的时候也很突然.回想解决的过程,大致如下. 第一种情况:File->Project St ...
- 用Eclipse搭建ssh框架
问:ssh是哪三大框架,以及他们的作用是什么? 答:分别是struts,spring,hibernate. struts的作用是:是web层,其核心是mvc模式,他可以自动获取参数,自动类型转换,自动 ...
- codeforces 360 C
C - NP-Hard Problem Description Recently, Pari and Arya did some research about NP-Hard problems and ...
- Map的keySet和entrySet
/*Map集合的两种 取出方式 * 1.keySet() * 2.entrySet() * */ //定义一个学生类 重写了equals.hashcode三个方法,实现了comparable接口并覆盖 ...
- perl学习之路3
Perl编程之路3 标签: perl 列表与数组 Perl里面代表复数的就是列表和数组 列表(list)指的是标量的有序集合, 而数组(array)则是存储列表的变量. 在Perl这两个属于尝尝混 ...
- jquery 购物车飞入效果
github https://github.com/amibug/fly demo https://github.com/amibug/fly
- XPath注入跟SQL注入差不多，只不过这里的数据库走的xml格式
SQL注入这块不想细聊了,相信很多朋友都听到耳朵长茧,不外乎是提交含有SQL操作语句的信息给后端,后端如果没有做好过滤就执行该语句,攻击者自然可以随意操纵该站点的数据库. 比如有一个图书馆站点book ...
- python奇偶数求和
#求100内奇数和while\for..in循环 sum = 0 i = 1 while i <= 100: sum += i i += 2 print(sum) sum = 0 for i i ...
- Git 常用命令大全
Git常用操作命令: 1) 远程仓库相关命令 检出仓库:$ git clone git://github.com/jquery/jquery.git 查看远程仓库:$ git remote -v 添加 ...