JavaScript+CSS 앨범 필터 인 스 턴 스 코드

9985 단어 js앨범 효과css

네,바로 이런 예 입 니 다.영상 에서 배 운 특수 효 과 는 실제 적 으로 쓸모 가 없 지만 JS 언어 를 이해 하고 CSS 3 스타일 을 익히 는 데 도움 이 됩 니 다.
디자인:
그림 의 변 화 를 관찰 한 결과:
1.그림 크기 조정(무 작위,동시에 움 직 이지 않 음)
      1.큰 것 부터 작은 것 까지
       2.작은 것 부터 큰 것 까지 투명 도 는 1 부터 0 까지(첫 번 째 운동 이 끝나 면 바로 시작)
2.그림 회전(랜 덤,동시에 움 직 이 는 것 이 아 닙 니 다.모든 운동 이 끝 난 후에 시작 해 야 한다)
3.그림 마다 무 작위 로 변환 되 기 때문에 시작 시간 이 다 릅 니 다.지연 기 setTimeout 을 설정 할 수 있 습 니 다.시간 은 random 으로 무 작위 로 생 성 하면 됩 니 다.
4.중간 에 자체 실행 함 수 를 사용 해 야 합 니 다.setTimeout 은 for 순환 의 i 를 무시 하기 때문에 지연 기 가 실 행 될 때마다 i 가 잘못 될 수 있 습 니 다.자체 실행 함수 로 i 의 모든 값 을 저장 합 니 다.
5.전환 하 는 동안 버튼 의 div 는 클릭 할 수 없 으 며 표시 와 판단 이 필요 합 니 다.
6.운동 은 모두 두 개 입 니 다.크기 조정 과 회전,크기 조정 이 모두 끝나 야 회전 을 시작 할 수 있 습 니 다.여기 도 잘 처리 해 야 합 니 다.
메모:
scale 은 크기 조정 입 니 다.
과도
하위 함수 가 아버지의 값 을 수정 하 는 것 은 폐쇄 입 니 다.

실행 함수
타 이 머 를 직접 추가 하면 바깥 순환 에 상 관 없 이 1s 후에 실 행 됩 니 다.이때 i 는 어디 까지 갔 는 지 모 르 고 경 계 를 넘 을 수 있 습 니 다.

Math.random()에서 발생 하 는 값 은 setTimeout 의 매개 변수 입 니 다.지연 시간 입 니 다.
setTimeout 지연 시간 도 컴퓨터 카드 와 영향 을 미친다.
transition end 는 과도 하면 실 행 됩 니 다.스타일 에 따라 계 산 됩 니 다.

크기 조정 과 투명 은 transition end 를 촉발 합 니 다.
call()this 가 가리 키 는 대상 변경
그리고 페이지 를 불 러 올 때 이 효 과 를 실행 합 니 다.
중간 에 찾 아 낸 자 료 를 보충 하 다.
1.CSS 3 불투명 도 속성:
값.
묘사 하 다.
value
불투명 도 를 지정 합 니 다.0.0(완전 투명)에서 1.0(완전 불투명)까지
inherit
Opacity 속성의 값 은 부모 요소 로부터 계승 해 야 합 니 다.
2.HTML DOM scale()방법:
매개 변수
매개 변수
묘사 하 다.
sx, sy
수평 과 수직 크기 조정 인자.
묘사 하 다.
scale()방법 은 캔버스 의 현재 변환 행렬 에 크기 조정 변환 을 추가 합 니 다.크기 조정 은 독립 된 수평 과 수직 크기 조정 인 자 를 통 해 이 루어 집 니 다.예 를 들 어 하나의 값 2.0 과 0.5 를 전달 하면 그림 그리 기 경로 의 너비 가 원래 의 두 배로 변 하고 높이 는 원래 의 1/2 로 변 한다.마이너스 sx 값 을 지정 하면 X 좌표 가 Y 축 을 따라 반 으로 접 히 고 마이너스 sy 를 지정 하면 Y 좌표 가 X 축 을 따라 반 으로 접 힐 수 있 습 니 다.
여기 서 제 가 직접 매개 변 수 는 높이 와 너 비 를 동시에 줄 이 는 것 입 니 다.
3.
div 는 블록 탭 입 니 다.현재 이 div 의 탭 은 안의 그림 높이 에 의 해 스스로 지탱 됩 니 다.img 탭 은 기본적으로 왼쪽으로 떠 있 습 니 다.마침 줄 당 10 개 씩 80px 입 니 다.
margin:0 auto 는 margin:0 auto 0 auto 의 약자,즉 좌우 자동 으로 가운데 에 있 습 니 다.왜 위의 div 에 바짝 붙 어 있 지 않 은 지 에 대해 서 는 위 에 있 는 margin:80px auto 일 것 입 니 다.아래 의 div 바깥쪽 과 80px 거 리 를 설정 하 였 습 니 다.
btn 의 높이 는 설정 되 지 않 았 습 니 다.font 로 버 텼 습 니 다.
나머지 는 코드 입 니 다.주석 이 상세 하고 리 셋 함수 가 많 습 니 다.

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 <style>
  /*        ，         800px */
  #imgWrap{
  width: 800px;
  height: 400px;
  margin: 80px auto;
  perspective: 800px;
  }

  /*   ，  *  =  div*/
  #imgWrap img{
  float: left;
  width: 80px;
  height: 80px;
  }

  #btn{
  width: 100px;
  /*height: 40px         font    */
  background: rgb(0,100,0);
  padding: 0 20px;
  /*font-size   line-height      。*/
  font: 16px/40px "    ";
  color: #fff;
  margin: 0 auto;
  border-radius: 5px;
  box-shadow: 2px 2px 5px #000;
  cursor: pointer;
  }
 </style>
 <script>
  /*
  * 1、    （  ，        ）
  * 1、    
  * 2、    ，    1 0（             ）
  *
  * 2、    （  ，         。             ）
  */

  window.onload=function(){
  var btn=document.getElementById("btn");
  //       
  var imgs=document.querySelectorAll("img");
  var endNum=0; //            
  var canClick=true; //           

  btn.onclick=function(){
   if(!canClick){
   return; //         
   }
   canClick=false;


   for(var i=0;i<imgs.length;i++){
   (function(i){
    setTimeout(function(){
    /*imgs[i].style.transition='100ms';
    imgs[i].style.transform='scale(0)';
    imgs[i].style.opacity='0';

    imgs[i].addEventListener('transitionend',function(){
     console.log(1);
    });*/

    motion(imgs[i],'50ms',function(){
     this.style.transform='scale(0)';
    },function(){
     motion(this,'1s',function(){
     this.style.transform='scale(1)';
     this.style.opacity='0';
     },function(){
     //                   ，        

     endNum++;
     if(endNum==imgs.length){
      //         
      //console.log('         ')
      rotate();
      //endNum=0;
     }
     });
    });
    },Math.random()*1000);
   })(i);
   }
  };


  //    
  function rotate(){
   for(var i=0;i<imgs.length;i++){
   //         
   imgs[i].style.transition='';
   /*imgs[i].style.opacity=1;*/
   imgs[i].style.transform='rotateY(0deg) translateZ(-'+Math.random()*500+'px)';

   //    ，     
   (function(i){
    setTimeout(function(){
    motion(imgs[i],'2s',function(){
     this.style.opacity=1;
     this.style.transform='rotateY(-360deg) translateZ(0)';
    },function(){
     endNum--; //            ，endNum       50 
     //console.log(endNum);
     if(endNum==0){
     //         
     canClick=true;
     //endNum=0
     }
    });
    },Math.random()*1000);
   })(i);
   }
  }

  //    
  function motion(obj,timer,doFn,callBack){
   //motion(    ,    (   +  ),    (  ),          )
   obj.style.transition=timer;
   doFn.call(obj);//    

   var end=true; //             

   //        
   function endFn(){
   if(end){
    //callBack&&callBack.call(obj);
    if(callBack){
    callBack.call(obj);
    }

    end=false; //  false，        if 
   }

   obj.removeEventListener('transitionend',endFn); //            ，          
   }

   obj.addEventListener('transitionend',endFn);
  }
  };
 </script>
 </head>
 <body>
 <div id="imgWrap">
  <img src="images/1.jpg" alt="" />
  <img src="images/2.jpg" alt="" />
  <img src="images/3.jpg" alt="" />
  <img src="images/4.jpg" alt="" />
  <img src="images/5.jpg" alt="" />
  <img src="images/6.jpg" alt="" />
  <img src="images/7.jpg" alt="" />
  <img src="images/8.jpg" alt="" />
  <img src="images/9.jpg" alt="" />
  <img src="images/10.jpg" alt="" />
  <img src="images/11.jpg" alt="" />
  <img src="images/12.jpg" alt="" />
  <img src="images/13.jpg" alt="" />
  <img src="images/14.jpg" alt="" />
  <img src="images/15.jpg" alt="" />
  <img src="images/16.jpg" alt="" />
  <img src="images/17.jpg" alt="" />
  <img src="images/18.jpg" alt="" />
  <img src="images/19.jpg" alt="" />
  <img src="images/20.jpg" alt="" />
  <img src="images/21.jpg" alt="" />
  <img src="images/22.jpg" alt="" />
  <img src="images/23.jpg" alt="" />
  <img src="images/24.jpg" alt="" />
  <img src="images/25.jpg" alt="" />
  <img src="images/26.jpg" alt="" />
  <img src="images/27.jpg" alt="" />
  <img src="images/28.jpg" alt="" />
  <img src="images/29.jpg" alt="" />
  <img src="images/30.jpg" alt="" />
  <img src="images/31.jpg" alt="" />
  <img src="images/32.jpg" alt="" />
  <img src="images/33.jpg" alt="" />
  <img src="images/34.jpg" alt="" />
  <img src="images/35.jpg" alt="" />
  <img src="images/36.jpg" alt="" />
  <img src="images/37.jpg" alt="" />
  <img src="images/38.jpg" alt="" />
  <img src="images/39.jpg" alt="" />
  <img src="images/40.jpg" alt="" />
  <img src="images/41.jpg" alt="" />
  <img src="images/42.jpg" alt="" />
  <img src="images/43.jpg" alt="" />
  <img src="images/44.jpg" alt="" />
  <img src="images/45.jpg" alt="" />
  <img src="images/46.jpg" alt="" />
  <img src="images/47.jpg" alt="" />
  <img src="images/48.jpg" alt="" />
  <img src="images/49.jpg" alt="" />
  <img src="images/50.jpg" alt="" />
 </div>
 <div id="btn">      </div>
 </body>
</html>
이상 의 자 바스 크 립 트+CSS 앨범 필터 인 스 턴 스 코드 는 여러분 에 게 공 유 된 모든 내용 입 니 다.참고 하 시고 많은 응원 부 탁 드 리 겠 습 니 다.
위 챗 애플 릿 이 라운드 맵 효 과 를 실현 하 다.
jQuery UI Draggable+Sortable 결합 사용(인 스 턴 스 설명)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage