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 ...
随机推荐
- 深入浅出HTTP协议(WEB开发和面试必备)
1. 基础概念篇 a.简介 HTTP是Hyper Text Transfer Protocol(超文本传输协议)的缩写.它的发展是万维网协会(World Wide Web Consortium)和 ...
- webpack配置ES6 + react套装开发
配置ES6 1.安装插件: babel-loader,babel-preset-es2015,babel-preset-react. 2.添加配置文件中部分内容: { test: /\.js$/, l ...
- jquery mobile 问问多多
jquery mobile 问题多多,兼容性太差.android4.1下完全崩溃.以后再也不用jquery mobile了
- java学习中一些疑惑解答（2）
(一)继承条件下构造方法的调用 以下面的源代码为例: package ktdemo; class Grandparent { public Grandparent() { System.out.pri ...
- C++文本处理_文件读写
QT在进行文本读写时和C++一样,是基于文本流操作的. QT在读取全部文本时,相对比较便捷.使用readAll()函数,配合split()进行分隔符的拆分(例如行结束符"\n"), ...
- WPF整理-使用ResourceDictionary管理Logical Resources
“Logical resources may be of various types, such as brushes, geometries, styles, and templates.Placi ...
- USACO翻译：USACO 2012 JAN三题（1）
USACO 2012 JAN(题目一) 一.题目概览 中文题目名称 礼物 配送路线 游戏组合技 英文题目名称 gifts delivery combos 可执行文件名 gifts delivery c ...
- iOS开发中手机号码和价格金额有效性判断及特殊字符的限制
在实际开发过程中,经常会遇到些不能让用户随便地输入手机号码,对输入的手机号码的正确判断:有些输入框只能输入数字,不能输入字母或特殊字符:还有些如价格金额之类的就只能输入数字和小数点且小数点后面保留两位 ...
- ios 定位
ios 定位新功能----在程序中实现定位功能 Core Location是iOS SDK中一个提供设备位置的框架.可以使用三种技术来获取位置:GPS.蜂窝或WiFi.在这些技术中,GPS最为精准,如 ...
- Tomcat启动失败Unrecognized Windows Sockets error: 0: JVM_Bind
问题:Tomcat一直无法运行,或者是运行了报上面图片的哪些错误. 解决:关闭myeclipse,打开任务管理器(Ctrl+Alt+Delete)关闭javaw.exe这个进程,另外说一下,Tomca ...