JS动画效果_技术笔记

阿君 2018-10-30

2、只要是多物体运动所有的东西都不能共用。记住！！！

截图
0赞 · 0采集
阿君 2018-10-30

1、对这节课取个好理解的名字，多个物体设置相同动画，如何实现。

截图
0赞 · 0采集
ParseDark 2018-08-26

对于多物体运动，在目前的基础上，可以对多物体的方法进行一个抽离。也就是each（）函数。
其余部分和单物体动画没啥区别。

0赞 · 0采集
ParseDark 2018-08-26
1. 对于使用定时器来模拟动画效果的情况下，一定要记得在每次模拟之前清除旧的定时器。
0赞 · 0采集
慕粉2308425049 2018-07-17

多物体动画的时候，为了防止鼠标移动过快导致的定时器争抢，我们定义
obj.timer
每个obj用一个定时器就不会出现争抢了
多物体运动的时候，避免公用变量，

0赞 · 0采集
Fishzz 2018-06-15

css透明度{
opacity：0-1；
filter：Alpha（opacity = 0-100）；
}

0赞 · 0采集
这就尴尬了 2018-05-02

主要是多物体运动，所有元素值都不能共用。

0赞 · 0采集
刀不磨要生锈 2018-04-10

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>多物体改变透明度</title>
<style type="text/css">
div{
width:160px;
height:160px;
background-color:red;
float:left;
margin:10px;
filter: alpha(opacity:30);
opacity:0.3;
}
</style>
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementsByTagName("div");

for(var i=0;i<oDiv.length;i++){
oDiv[i].alpha = null;
oDiv[i].onmouseover = function(){
startMove(this,100);
}
oDiv[i].onmouseout = function(){
startMove(this,30);
}
}

// var timer = null;
// var alpha = 30;

function startMove(obj,target){
// var oDiv = document.getElementById("div");
clearInterval(obj.timer);
obj.timer = setInterval(function(){

var speed = 0;
if(obj.alpha > target){
speed = -10;
}else{
speed = 10;
}

if(obj.alpha == target){
claerInterval(obj.timer);
}else{
obj.alpha+=speed;
obj.style.filter = 'alpha(opacity:'+obj.alpha+')';
obj.style.opacity = obj.alpha/100;
}
},30);
}
}
</script>
</head>

<body>
<div id=div1></div>
<div id=div2></div>
<div id=div3></div>
<div id=div4></div>
</body>
</html>

1赞 · 0采集
刀不磨要生锈 2018-04-10

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>多物体运动</title>
<style type="text/css">
*{
padding:0;
margin:0;
}
ul,li{
list-style: none;
}
ul li{
width:200px;
height:100px;
background-color: chartreuse;
margin-bottom:20px;
}
</style>
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementsByTagName('li');

for(var i = 0;i < oDiv.length;i++){
oDiv[i].timer = null;//在对象上定义一个单独的属性值
oDiv[i].onmouseover = function(){
startMove(this,400);//this来指定所选择的当前元素
}
oDiv[i].onmouseout = function(){
startMove(this,200);
}
}

//var timer = null;
function startMove(obj,target){
clearInterval(obj.timer);

obj.timer = setInterval(function(){
var speed = (target - obj.offsetWidth)/8;
speed = speed >0?Math.ceil(speed):Math.floor(speed);

if(obj.offsetWidth == target){
clearInterval(obj.timer);
}else{
obj.style.width = obj.offsetWidth+speed+'px';
}
},30);
}

}
</script>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>

1赞 · 0采集
GYNexus 2018-03-23

多物体运动 for循环来为每一个TagNameList[i]添加事件并添加属性来区分各自的定时器(用于取消) 利用参数中的this来指定所选择的当前元素多物体不要共用一个值,在对象上定义一个单独的属性保持值存在多项共用一个值，并且这个值会发生改变时，最好单独给赋值，避免出现争用的情况。 <script> window.onload=function(){ var aLi=document.getElementsByTagName('li'); for(var i=0;i<aLi.length;i++){ // 给每一个li设置一个timer，才不会致使他们去抢timer aLi[i].timer=null; aLi[i].onmouseover=function(){ startMove(this,400); }; aLi[i].onmouseout=function(){ startMove(this,200) } } var oDivLi=document.getElementsByTagName('div'); for(var j=0;j<oDivLi.length;j++){ oDivLi[j].timer=null; oDivLi[j].alpha=30; oDivLi[j].onmouseover=function(){ startMove1(this,100); }; oDivLi[j].onmouseout=function(){ startMove1(this,30); } } };

0赞 · 0采集
前端沙雕 2018-01-05

多物体运动时，变量不能共用，必须编号。

截图
0赞 · 0采集
前端薇薇 2017-12-17

多物体动画不能用公用计时器、公用元素，需定义在每个obj中，div.timer div.alpha

0赞 · 0采集
取经者 2017-12-06

Math.ceil(speed )向上取整 Math. floor(speed )向下取整

截图
0赞 · 0采集
T002967 2017-11-10

多物体动画不能用公用计时器、公用元素，需定义在每个obj中，div.timer div.alpha

0赞 · 0采集
KD_35 2017-11-01

多物体运动，所有东西都不能公用

0赞 · 0采集
慕仙5237505 2017-11-01

最终版body{margin:0; padding:0;} div{width:150px; height:150px; background:#f00; opacity:0.3; filter:alpha(opacity:30); float:left; margin-right:20px; } <div id="div1"></div> <div id="div2"></div> <div id="div3"> </div> window.onload=function(){ var adiv=document.getElementsByTagName('div'); for(var j=0; j<adiv.length; j++){ adiv[j].alpha=30; //解决透明度忽亮忽闪的冲突问题，给每个div自定义透明度 adiv[j].onmousemove=function(){ omove(this,100); } adiv[j].onmouseout=function(){ omove(this,30); } } } function omove(obj,target){ clearInterval(obj.timer); obj.timer =setInterval(function(){ var speed=0; if(obj.alpha>target){ speed =-10; }else{ speed=10; } if(obj.alpha==target){ clearInterval(obj.timer); }else{ obj.alpha+=speed; obj.style.filter="alpha(opacity:"+obj.alpha+")"; obj.style.opacity=obj.alpha/100; } },30); }

截图
0赞 · 0采集
慕仙5237505 2017-11-01

多物体透明度

截图
0赞 · 1采集
慕仙5237505 2017-11-01

2：window.onload=function(){ li=document.getElementsByTagName("li"); for(var i=0; i<li.length; i++){ li[i].timer=null //自定义定时器 li[i].onmousemove=function(){ move(this,200); } li[i].onmouseout=function(){ move(this,100); } } } //var timer=null; function move(obj,target){ clearInterval(obj.timer); obj.timer=setInterval(function(){ var speed=(target-obj.offsetWidth)/8; speed=speed>0?Math.ceil(speed):Math.floor(speed); if(obj.offsetWidth==target){ clearInterval(obj.timer); }else{ obj.style.width=obj.offsetWidth+speed+"px"; } },30) }

截图
0赞 · 0采集
慕仙5237505 2017-11-01

多物体改良版

截图
0赞 · 0采集
慕仙5237505 2017-11-01

多物体： ul li{list-style:none;} li{width:200px; height:100px; background-color:yellow; margin-bottom:20px;} </style> <script type="text/javascript"> window.onload=function(){ li=document.getElementsByTagName("li"); for(var i=0; i<li.length; i++){ li[i].onmousemove=function(){ move(this,200); } li[i].onmouseout=function(){ move(this,100); } } } var timer=null; function move(obj,target){ clearInterval(timer); timer=setInterval(function(){ var speed=(target-obj.offsetWidth)/8; speed=speed>0?Math.ceil(speed):Math.floor(speed); if(obj.offsetWidth==target){ clearInterval(timer); }else{ obj.style.width=obj.offsetWidth+speed+"px"; } },30) } </script> <ul> <li>1</li> <li>2</li> <li>3</li> </ul>

截图
0赞 · 0采集
慕仙5237505 2017-11-01

多物体运动

截图
0赞 · 1采集
慕仙5237505 2017-10-31

多物体运动不能共用，odiv[i].alpha=30定义

截图
0赞 · 0采集
慕仙5237505 2017-10-31

改后效果

截图
0赞 · 0采集
慕仙5237505 2017-10-31

li[i].timer=null自定义一个定时器

截图
0赞 · 0采集
慕仙5237505 2017-10-31

var timer=null; function startmove(obj,targe){clearinterval(timer); timer=setinterval(function(){var speed=target-obj.offsetWidth)/8 speed=speed>0?math.ceil(speed):math.floor(speed); if(obj.offsetwidth==target){clearinterval(timer);}else{obj.style.left=obj.offsetwidth+speed+"px;}},30)}

截图
0赞 · 0采集
慕仙5237505 2017-10-31

多物体运动 window.onload=function(){var li=document.getELEMTNbytagName('li; for(var i=0; i<li.length; i++){li[i}.onmouseover=function(){startmove(this,400);} li[i].onmuseont=function(){startMpve(this,200)}}

截图
0赞 · 0采集
貌似祸害 2017-09-10

offsetLeft和style.left的区别： offsetLeft返回的是数字，style.left返回的是字符串，除了数字还有‘px’; offsetLeft只读，style.left可写。这里style.left是随定时器而变动的。

1赞 · 1采集
王王王博 2017-09-09

多物体运动所有的东西都不能共用

0赞 · 0采集
qq_与陌Dance_0 2017-08-17

<script type="text/javascript"> window.onload = function() { var aLi = document.getElementsByTagName('li'); var aDiv = document.getElementsByTagName('div'); for (var i = 0; i < aLi.length; i++) { aLi[i].timer = null; aLi[i].onmouseover = function() { startMove1(this, 400); } aLi[i].onmouseout = function() { startMove1(this, 200); } } for (var i = 0; i < aDiv.length; i++) { aDiv[i].timer = null; aDiv[i].alpha = 30; aDiv[i].onmouseover = function() { startMove2(this, 100); } aDiv[i].onmouseout = function() { startMove2(this, 30); } } } </script>

0赞 · 0采集
qq_与陌Dance_0 2017-08-17

function startMove1(obj, target) { clearInterval(obj.timer); obj.timer = setInterval(function() { var speed = (target - obj.offsetWidth) / 8; speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); if (target == obj.offsetWidth) clearInterval(obj.timer); else obj.style.width = obj.offsetWidth + speed + "px"; }, 30) } function startMove2(obj, target) { clearInterval(obj.timer); obj.timer = setInterval(function() { var speed = 0; if (obj.alpha > target) speed = -10; else if (obj.alpha < target) speed = 10; if (obj.alpha == target) clearInterval(obj.timer); else { obj.alpha += speed; obj.style.filter = 'alpha(opacity:' + obj.alpha + ')'; obj.style.opacity = obj.alpha / 100; } }, 30) }

0赞 · 0采集

数据加载中...