《js动画效果》之多物体动画

最新推荐文章于 2023-06-20 16:04:41 发布

ruby小酱

最新推荐文章于 2023-06-20 16:04:41 发布

阅读量238

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/raosheng1993/article/details/45419667

版权

javascript 专栏收录该内容

96 篇文章 0 订阅

订阅专栏

学习资源来自慕课网《js动画效果》：http://www.imooc.com/learn/167。

多物体运动——给多个元素加上同一动画效果，比如下面两个例子：

1. 网页上有一ul, ul中有三个li元素，要求鼠标移到（onmouseover） li 元素上产生动画效果——宽度值增加到300px，鼠标移出（onmouseout) li 元素产生动画效果——宽度值复原到200px. 如下图-1示：

2. 同题 1 类似，只是要求改变li 的透明度值。如图-2时：

练习题1 代码实现：

[html] view plain copy print ?

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
*{
padding:0;
margin:0;
}
ul li{
list-style:none;
width:200px;
height:100px;
background:green;
margin:20px;
}
</style>
<script type="text/javascript">
/***
实现多物体运动的关键点：
1）获取到每个元素；
2）给每个元素绑定上事件；
3）注意使用this区分当前操作的元素；
4）定时器不能只设一个了，应该给每个元素分配一个定时器，避免多个元素抢同一个定时器造成bug
记住：多物体运动不能共用同一个东西（某一参数，比如定时器）
***/
window.onload = function(){
var liEles = document.getElementsByTagName("li");
for(var i=0; i<liEles.length; i++){
//给每一个li元素定义一个定时器，避免多个元素抢同一个定时器造成bug
liEles[i].timer = null;
liEles[i].onmouseover = function(){
//传入this值，指定当前操作的是哪个li
playFun(this, 300);
};
liEles[i].onmouseout = function(){
playFun(this, 200);
};
}
}
//var timer = null;
function playFun(obj,itarget){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var speed = (itarget - obj.offsetWidth)/10;
speed = speed>0?Math.ceil(speed):Math.floor(speed);
if(obj.offsetWidth == itarget){
clearInterval(obj.timer);
}else{
obj.style.width = obj.offsetWidth + speed + "px";
}
},50);
}
</script>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>

练习题2代码实习：

[html] view plain copy print ?

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
*{
padding:0;
margin:0;
}
ul li{
list-style:none;
width:200px;
height:100px;
background:green;
margin:20px;
filter:alpha(opacity:30);
opacity:0.3;
}
</style>
<script type="text/javascript">
/***
实现多物体运动的关键点：
1）获取到每个元素；
2）给每个元素绑定上事件；
3）注意使用this区分当前操作的元素；
4）定时器不能只设一个了，应该给每个元素分配一个定时器，避免多个元素抢同一个定时器造成bug
5)//给每一个li元素定义参数透明值alpha，避免多个元素抢同一个alpha造成bug
记住：多物体运动不能共用同一个东西（某一参数，比如定时器）
***/
window.onload = function(){
var liEles = document.getElementsByTagName("li");
for(var i=0; i<liEles.length; i++){
//给每一个li元素定义一个定时器，避免多个元素抢同一个定时器造成bug
liEles[i].timer = null;
//给每一个li元素定义参数透明值alpha，避免多个元素抢同一个alpha造成bug
liEles[i].alpha = 30;
liEles[i].onmouseover = function(){
//传入this值，指定当前操作的是哪个li
playOpacity(this, 100);
};
liEles[i].onmouseout = function(){
playOpacity(this, 30);
};
}
}
function playOpacity(obj,itarget){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var speed = 0;
if(obj.alpha > itarget){
speed = -10;
}else{
speed = 10;
}
if(obj.alpha == itarget){
clearInterval(obj.timer);
}else{
obj.alpha += speed;
obj.style.filter = "alpha(opacity:"+ obj.alpha +")";
//注意除以100
obj.style.opacity = obj.alpha/100;
}
},50);
}
</script>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>

小结：

实现多物体运动的关键点：

1）获取到每个元素；

2）给每个元素绑定上事件；

3）注意使用this区分当前操作的元素；

4）定时器不能只设一个了，应该给每个元素分配一个定时器，避免多个元素抢同一个定时器造成bug

5) 给每一个li元素定义参数透明值alpha，避免多个元素抢同一个alpha造成bug

记住：多物体运动不能共用同一个东西（某一参数，比如定时器）

ruby小酱

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
《js动画效果》之多物体动画

js学习资源来自慕课网《js动画效果》：http://www.imooc.com/learn/167。多物体运动——给多个元素加上同一动画效果，比如下面两个例子：1. 网页上有一ul, ul中有三个li元素，要求鼠标移到（onmouseover） li 元素上产生动画效果——宽度值增加到300px，鼠标移出（onmouseout) li 元素产生动画效果——宽度值复原到200px. 如
复制链接

扫一扫