js 애니메이션 학습 (3)-CSS 튜토리얼-php.cn

js 애니메이션 학습 (3)

黄舟

풀어 주다： 2016-12-30 16:56:24

원래의

1345명이 탐색했습니다.

5. 여러 개체가 넓어집니다

객체가 더 많기 때문에 각 개체에 타이머를 장착해야 합니다. 그렇지 않으면 타이머가 하나만 있는 경우입니다. , 마우스가 서로 다른 개체 사이에서 빠르게 미끄러지면 서로 다른 개체가 서로 경쟁하게 됩니다. 따라서 타이머 앞에 obj를 추가하세요.

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

로그인 후 복사

예: 3개의 li를 예로 사용하세요.

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

로그인 후 복사

이 매개변수는 개체 자체를 나타냅니다. 이전 시간과 다른 점은 이번 시간을 클리어하는 타이머를 리마다 별도로 클리어해야 한다는 점이다.

6. 다중 객체 투명성

투명성에 관해서는 브라우저 호환성 문제에 주의해야 합니다. 또한, 투명도 초기값은 기존 단일 객체의 투명도 초기값처럼 설정할 수 없으며, 여러 객체의 투명도 초기값은 별도로 설정해야 하며, 각 객체에는 초기값이 있습니다.

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

로그인 후 복사

다음은 여러 div를 예시로 사용합니다.

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

로그인 후 복사

위는 js 애니메이션 학습 내용입니다(3). PHP 중국어 홈페이지(m.sbmmt.com)를 주목해주세요!