원생 JS 이미지 반전 회전 효과 구현
12596 단어 JavaScript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css"> #imgWrap{ width: 800px; height:350px; margin:80px auto; perspective:800px; } #imgWrap img{ float: left; height:80px; width: 80px; border:1px solid #eee; } #btn{ width:100px; text-align: center; font:16px/40px Arial,Verdana; color:#fff; padding:0 20px; background:rgb(0,100,0); margin:0 auto; border-radius:5px; cursor: pointer; box-shadow:2px 2px 5px rgba(0,0,0,0.5); } </style>
<script type="text/javascript"> /* * 1. （ 0，scale， ） * 2. ， 1 0（ ， ） * 3. ， 0 1， （ translate）（ 0 ， ） */ window.onload=function(){ var btn=document.getElementById('btn'); var imgs=document.querySelectorAll('img'); var allEnd=0;// var on=true;// // btn btn.onclick=function(){ console.log("on:"+on); if(!on){ return; } on=false; var endNum=0;// for(var i=0;i<imgs.length;i++){ // ：for ， setTimeout i (function(i){ setTimeout(function(){ montion(imgs[i],'10ms',function(){ this.style.transform='scale(0)';// call ， this， imgs[i] },function(){ // montion(this,'1s',function(){ this.style.transform="scale(1)"; this.style.opacity=0; },function(){ endNum++;// ， 1 if(endNum===imgs.length){ toBig(); } }) }); },Math.random()*1000); })(i); } // ， ， }; // function toBig(){ /* * ，x,y,z */ for(var i=0;i<imgs.length;i++){ imgs[i].style.transition=''; // imgs[i].style.opacity='1'; // css3 ， imgs[i].style.transform='rotateY(0deg) translateZ(-'+Math.random()*500+'px)'; // ， i， for ， i (function(i){ setTimeout(function(){ montion(imgs[i],'2s',function(){ this.style.opacity=1; this.style.transform='rotateY(-360deg) translateZ(0)' },function(){ allEnd++; if(allEnd===imgs.length){ console.log("allEnd:"+allEnd+',imgs.length:'+imgs.length); // ， ， // ， on=true; allEnd=0; } }); },Math.random()*1000); })(i); } } // ( ， ， ， ) function montion(obj,time,doFn,callBack){ obj.style.transition=time; doFn.call(obj);// ， this obj var called=false;// transitionend bug obj.addEventListener('transitionend',function(){ if(!called){ callBack&&callBack.call(obj);// callBack called=true; } },false);// ， ， ,false } } </script>
</head>
<body>
<div id="imgWrap">
<img src="https://dummyimage.com/1:1x100&text=1" alt="">
<img src="https://dummyimage.com/1:1x100&text=2" alt="">
// ... 45
<img src="https://dummyimage.com/1:1x100&text=45" alt="">
</div>
<div id="btn"> </div>
</body>
</html>효 과 는 다음 과 같 습 니 다:
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
기초 정리 - 1문자 (String) 숫자 (Number) 불린 (Boolean) null undefined 심볼 (Symbol) 큰정수 (BigInt) 따옴표로 묶어 있어야 함 Not-A-Number - 숫자 데이터 / 숫자로 표...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
