> 웹 프론트엔드 > JS 튜토리얼 > 매우 아름다운 JS 이미지 배열 및 회전 효과 code_image 특수 효과

매우 아름다운 JS 이미지 배열 및 회전 효과 code_image 특수 효과

WBOY
풀어 주다: 2016-05-16 19:06:57
원래의
1277명이 탐색했습니다.

코드를 읽어보니 배열시뮬레이션을 사용하는 것이 좀 딱딱한 것 같아서 직접 다시 작성해 보았는데, 꼭 와주세요


[Ctrl A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다
]<script> var r=200,dv=0.01,w=100,x=400;y=100,pn=8 var pi=3.1415926575,d=pi/2; var pd=Math.asin(w/2/r);ed=pi*2/pn;smove=true function window.onload(){ var o=document.getElementById("imground"); var arrimg=o.getElementsByTagName("img"); for (n=0;n<arrimg.length;n++){ arrimg[n].onmouseout=function(){smove=true;} arrimg[n].onmouseover=function(){smove=false;} arrimg[n].onmousedown=function(){dv=dv*2} } setInterval(roundMove,20); } function roundMove(){ for (n=1;n<=8;n++){ var o=document.getElementById("p"+n) var ta=Math.sin(d+ed*n); var strFilter; if (ta<0) o.style.left=Math.cos(d+ed*n-pd)*r+x; else o.style.left=Math.cos(d+ed*n+pd)*r+x; o.style.top=ta*10+10+y; o.style.width=Math.abs(Math.cos(d+ed*n+pd)-Math.cos(d+ed*n-pd))*r; o.style.zIndex=ta*10; if (o.style.zIndex<0) strFilter="FlipH(enabled:true)" else strFilter="FlipH(enabled:false)"; if (ta<0) ta=(ta+1)*80+20; else ta=100; strFilter=strFilter+" alpha(opacity="+ta+")"; o.style.opacity=ta/100; o.style.filter=strFilter; } if (smove) d=d+dv; } </script>
관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿