javascript动画效果之多物体缓冲运动
这个是通过一个for循环控制的三个li标签，被鼠标触发则会有一个宽度增加和减少的事件
html和css同样写在一起方便察看，这里就是简单的布局，重点在js
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
font-size: 12px;
} div {
margin: 10px;
height: 360px;
width: 200px;
} ul {
list-style: none;
} ul li {
width: 200px;
height: 100px;
background: blue;
margin-bottom: 20px;
cursor: pointer;
}
</style>
</head> <body>
<div>
<ul id="ali">
<li></li>
<li></li>
<li></li>
</ul>
</div> </body> </html>
js部分就是通过for循环给每个li都绑定事件，同时为了避免冲突，每个li都需要一个单独的定时器
<script type="text/javascript">
function $(id) {
return typeof id === "string" ? document.getElementById(id) : id;
} window.onload = function() {
//自定义变量aLi为li标签的集合
var aLi = $("ali").getElementsByTagName("li");
//自定义变量
var speed = 0; //通过for循环触发三个鼠标移动事件
for (var i = 0; i < aLi.length; i++) {
//为每个li都设置一个定时器，防止冲突
aLi[i].timer = null;
//鼠标移动进入，绑定事件
aLi[i].onmouseenter = function() {
//调用自定义函数，并传参
start(this, 400);
}
//鼠标移动离开，绑定事件
aLi[i].onmouseleave = function() {
//调用同一个自定义函数，并传参
start(this, 200);
}
} //自定义函数，自定义参数
function start(one, two) {
//清楚定时器，因为一个li只有一个定时器能执行
clearInterval(one.timer);
//one对应上面aLi[i]，所以one.timer就是aLi[i].timer
one.timer = setInterval(function() {
//speed通过(two-one.offsetWidth)也就是(400-200)
//console.log(speed);
speed = (two - one.offsetWidth) / 10;
//判断是增加width还是减少
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if (one.offsetWidth == two) {
//当为400或者200时候，清除定时器
clearInterval(one.timer);
} else {
//通过speed自增减
one.style.width = one.offsetWidth + speed + 'px';
}
}, 30);
} }
</script>
javascript动画效果之多物体缓冲运动的更多相关文章
- javascript动画效果之多物体透明度
html和css 仅为布局,需要注意的是filter对应的是老版本的ie浏览器透明度,而opacity对应的其他浏览器的透明度 filter: alpha(opacity: 50); opacity: ...
- javascript动画效果之缓冲动画(修改版)
在编写多块同时触发运动的时候,发现一个BUG, timer = setInterval(show, 30);本来show是一个自定义函数,当设为timer = setInterval(show(one ...
- Javascript动画效果（一）
Javascript动画效果(一) 前面我们介绍了Javascript的回到顶部效果,今天呢,我们对Javascript动画做进一步的研究.在这篇博文中我们只介绍简单的匀速运动.简单的缓冲运动和简单的 ...
- Javascript动画效果（三）
Javascript动画效果(三) 前面我们已经介绍了速度动画.透明度动画.多物体运动和任意值变化,并且我们在Javascript动画效果(二)中介绍到我们封装了一个简单的插件雏形,接下来我们对前面的 ...
- Javascript动画效果（二）
Javascript动画效果(二) 在前面的博客中讲了简单的Javascript动画效果,这篇文章主要介绍我在改变之前代码时发现的一些问题及解决方法. 在前面的多物体宽度变化的例子中,我们给其增加代码 ...
- Javascript动画效果（四）
Javascript动画效果(四) 前面我们自己写了一个小小的关于js动画的插件,下面我们来使用之前的框架来完成我们想要的动画效果.我们经常在淘宝网中看到,鼠标经过某一图片时,该图片有从上滚出而又从下 ...
- javascript动画效果之透明度(修改版)
在编写多块同时触发运动的时候,发现一个BUG, timer = setInterval(show, 30);本来show是一个自定义函数,当设为timer = setInterval(show(one ...
- javascript动画效果之匀速运动(修订版)
在编写多块同时触发运动的时候,发现一个BUG, timer = setInterval(show, 30);本来show是一个自定义函数,当设为timer = setInterval(show(one ...
- 【BOOM】一款有趣的Javascript动画效果
实践出真知,有的时候看到一些有趣的现象就想着用自己所学的知识复现一下. boomJS 缘起 前几天在 github 上看到同事的一个这样的小项目,在 IOS 上实现了这样一个小动画效果,看上去蛮 ...
随机推荐
- String与StringBuild、StringBuffer的区别
String与StringBuild.StringBuffer的区别相信困扰了好多新入门的JAVA程序员,而这也是笔试和面试的一道常见题型,如何全面的回答该问题,变得尤为重要. 首先我们需要清楚一点, ...
- Chrome开发者控制台的这些功能你都知道吗？
Chrome内置了一些开发者工具,这些工具提供了很多的功能.今天,我们将会专注于JavaScript控制台. 在我编程的过程中,这个控制台为我提供了大量的帮助. 如果你正在电脑端阅读这篇文章,你可以在 ...
- C# 语言规范_版本5.0 (第12章 数组)
1. 数组 数组是一种包含若干变量的数据结构,这些变量都可以通过计算索引进行访问.数组中包含的变量(又称数组的元素)具有相同的类型,该类型称为数组的元素类型. 数组有一个“秩”,它确定和每个数组元素关 ...
- wcf测试工具
WCF测试工具-WcfStorm WCF测试工具-WcfStorm http://www.wcfstorm.com/wcf/home.aspx WcfStorm is a dead-simple, ...
- Shell学习笔记 ——第二天
1.显示日期 date | cal cal 2010 cal 2 2010 2.改变文件拥有者 chown 3.改变文件权限 chmod 4.显示当前目录 pwd 5.查看文件尾部内容,并 ...
- drupal7 开发自定义上传、下载模块的上传功能
关键点有两个:1.在页面上显示出上传的控件,2.代码实现文件上传到服务器的功能 一.显示控件: 先来看关键点1: 实现页面显示出上传控件, 关键代码: $form['my_file_field'] = ...
- 【cocos2d-js 3.0】制作2048
2048:在一个4X4的方阵中,玩家需要滑动上面的数字,如果俩个数字相邻并且相等,则相加,需要达到2048,方可胜利. 因为在浏览器操作,所以此例的操作方法为:键盘上的w,s,a,d代表上下左右,也可 ...
- @property (nonatomic, getter = isExpanded) BOOL expanded;
如果这个property是 BOOL on, 那么Objc默认创建的 setter 为: - (void)on:(BOOL)setOn { } getter 为: - (BOOL)on { retur ...
- python 基础学习3-函数
1. 函数参数-默认参数 python函数也可以跟C语言一样,在函数的形参中设定默认值. >>> def test(flag, port = 8080) ... print port ...
- input 和raw_input
---恢复内容开始--- 因为看python2 和 3 混了,所以两者里面的东西有点乱input 和raw_input 今天终于搞明白了,在这里记录一下: 1.python 2 中raw_input ...