js animation apprentissage (3)-tutoriel CSS-php.cn

js animation apprentissage (3)

黄舟

Libérer： 2016-12-30 16:56:24

original

1346 Les gens l'ont consulté

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+&#39;px&#39;;
         }
     },30)
 }

Copier après la connexion

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>

Copier après la connexion

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

Copier après la connexion

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=&#39;alpha(opacity:&#39;+obj.alpha+&#39;)&#39;;//IE浏览器
             obj.style.opacity=obj.alpha/100;//火狐和谷歌
         }
     }, 30)
 }

Copier après la connexion

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>

Copier après la connexion

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

Copier après la connexion

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