js animation apprentissage (3)

5. Plusieurs objets deviennent plus larges



Il est à noter que puisqu'il y a plus d'objets, chaque objet doit être équipé d'une minuterie. Sinon, s'il n'y a qu'une seule minuterie. , Lorsque la souris glisse rapidement entre différents objets, différents objets entreront en compétition les uns pour les autres. Par conséquent, obj doit être ajouté avant la minuterie.

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)
 }

Exemple : utilisez 3 li comme exemple :

<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>

Ce paramètre fait référence à l'objet lui-même. La différence par rapport aux temps précédents est que la minuterie effaçant ce temps doit être effacée séparément pour chaque li.



6. Transparence multi-objets

En matière de transparence, vous devez faire attention aux problèmes de compatibilité des navigateurs. De plus, la valeur initiale de transparence ne peut pas être définie comme la valeur initiale précédente de transparence pour un seul objet. La valeur initiale de transparence pour plusieurs objets doit être définie séparément et chaque objet a une valeur initiale.

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)
 }

Ce qui suit utilise plusieurs divs comme exemples :

<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>

Ce qui précède est le contenu de l'apprentissage de l'animation js (3). veuillez faire attention au site Web PHP chinois (www.php.cn) !