js-Animationslernen (3)

5. Mehrere Objekte werden breiter



Da es mehr Objekte gibt, muss jedes Objekt mit einem Timer ausgestattet werden. Andernfalls, wenn nur ein Timer vorhanden ist , Wenn die Maus schnell zwischen verschiedenen Objekten gleitet, konkurrieren verschiedene Objekte umeinander. Daher muss obj vor dem Timer hinzugefügt werden.

function changeWidth(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)
 }

Beispiel: Verwenden Sie 3 li als Beispiel:

<style type="text/css">
     *{
         margin: 0;
         padding: 0;
     }
     ul li{
         width: 200px;
         height: 100px;
         background: yellow;
         margin-bottom: 20px;
     }
 </style>

<script type="text/javascript">
     window.onload=function(){
         var ob=document.getElementsByTagName(&#39;li&#39;);//一共3个li
         for (var i = 0; i < ob.length; i++) {
             ob[i].timer=null;//避免鼠标在他们仨快速移动时他们竞争定时器
             ob[i].onmouseover=function(){
                 changeWidth(this,400);
             }
             ob[i].onmouseout=function(){
                 changeWidth(this,200);
             }
         }
     }
 </script>

Dieser Parameter bezieht sich auf das Objekt selbst. Der Unterschied zu den vorherigen Zeiten besteht darin, dass der Timer, der dieses Mal gelöscht wird, für jedes Mal separat gelöscht werden muss.



6. Multi-Objekt-Transparenz

Wenn es um Transparenz geht, müssen Sie auf Probleme mit der Browserkompatibilität achten. Außerdem kann der Anfangswert der Transparenz nicht wie der vorherige Anfangswert der Transparenz für ein einzelnes Objekt festgelegt werden. Der Anfangswert der Transparenz muss für mehrere Objekte separat festgelegt werden, und jedes Objekt hat einen Anfangswert.

function changeOpacity(obj,speed,target) {
     clearInterval(obj.timer);//清除定时器，避免嵌套调用
     obj.timer=setInterval(function () {
         if (obj.alpha==target) {//如果透明度达到目标值，清除定时器
             clearInterval(obj.timer);
         } else {//当前透明度加上透明度变化的速度
             obj.alpha=obj.alpha+speed;
             obj.style.filter='alpha(opacity:'+obj.alpha+')';//IE浏览器
             obj.style.opacity=obj.alpha/100;//火狐和谷歌
         }
     }, 30)
 }

Im Folgenden werden mehrere Divs als Beispiele verwendet:

<style type="text/css">
     *{
         margin: 0;
         padding: 0;
     }
     div{
         width: 200px;
         height: 200px;
         background: red;
         margin: 10px;
         float: left;
         filter: alpha(opacity:30);/*filter滤镜：不透明度,IE浏览器*/ 
         opacity: 0.3;/*火狐和谷歌*/
     }
 </style>

<div></div>
 <div></div>
 <div></div>
 <script type="text/javascript">
     window.onload=function(){
         var ob=document.getElementsByTagName(&#39;div&#39;);
         for (var i = 0; i < ob.length; i++) {
             ob[i].timer=null;
             ob[i].alpha=30;//每一个的透明度初值要分开设置
             ob[i].onmouseover=function(){
                 changeOpacity(this,10,100);//从30变到100
             }
             ob[i].onmouseout=function(){
                 changeOpacity(this,-10,30);//从100变回30
             }
         }
     }
 </script>

Das Obige ist der Inhalt von js Animation Learning (3) Weitere verwandte Inhalte finden Sie hier. Bitte achten Sie auf die chinesische PHP-Website (www.php.cn)!