suchen

Heim >Web-Frontend >js-Tutorial >JS implementiert Code_Javascript-Fähigkeiten für den 3D-Bildrotationsanzeigeeffekt

JS implementiert Code_Javascript-Fähigkeiten für den 3D-Bildrotationsanzeigeeffekt

WBOY
WBOYOriginal
2016-05-16 15:38:261818Durchsuche

Das Beispiel in diesem Artikel beschreibt den JS-Code zur Implementierung des 3D-Bildrotationsanzeigeeffekts. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Dies ist ein Stück JavaScript-Code, der den Code um ein JavaScript-Bild herum dreht und in einem 3D-Modellstil anzeigt. Zur Vereinfachung der Demonstration wird das Bild durch eine Zahl ersetzt und die Position des Bildes ist reserviert schneller für diejenigen, die HTML kennen. Jeder weiß, was zu tun ist, wenn er es verwendet. Diese Bilddrehung erfordert eine manuelle Steuerung. Bei jedem Klick dreht sich das Bild einmal, was sehr praktisch ist.

Der Screenshot des Laufeffekts sieht wie folgt aus:

Die Online-Demo-Adresse lautet wie folgt:

http://demo.jb51.net/js/2015/js-3d-pic-scroll-show-style-codes/

Der spezifische Code lautet wie folgt: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片旋转展示</title>
<style>
#show{position:relative;margin:20px auto;width:800px;border:1px solid #999999;}
.item{position:absolute;height:40px;width:60px;background:#999999;border:1px solid #eeeeee;cursor:pointer;}
</style>
<script>
var len;
var showerObj;
var listObj;
var showerWidth=800;
var showerHeight=400;
var r;
var cR=0;
var ccR=0;
var timer=0;
window.onload=function(){
 showerObj=document.getElementById("show");
 listObj=showerObj.getElementsByTagName("div");
 len=listObj.length;
 r=Math.PI/180*360/len;
 for(var i=0;i<len;i++){
  var item=listObj[i];
  item.style.top=showerHeight/2+Math.sin(r*i)*showerWidth/2-20+"px";
  item.style.left=showerWidth/2+Math.cos(r*i)*showerWidth/2-30+"px";
  item.rotate=(r*i+2*Math.PI)%(2*Math.PI);
  item.onclick=function(){
   cR=Math.PI/2-this.rotate;
   timer || (timer=setInterval(rotate,10));
  }
 }
 var rX=showerObj.offsetLeft+showerWidth/2;
 var ry=showerObj.offsetTop+showerHeight/2;
 var rotate=function(){
  ccR=(ccR+2*Math.PI)%(2*Math.PI);
  if(cR-ccR<0) cR=cR+2*Math.PI;
  if(cR-ccR<Math.PI){
   ccR=ccR+(cR-ccR)/19;
  }else{
   ccR=ccR-(2*Math.PI+ccR-cR)/19;
  }
  if(Math.abs((cR+2*Math.PI)%(2*Math.PI)-(ccR+2*Math.PI)%(2*Math.PI))<Math.PI/720){
   ccR=cR;
   clearInterval(timer);
   timer=0;
  }
  for(var i=0;i<len;i++){
   var item=listObj[i];
   var w,h;
   var sinR=Math.sin(r*i+ccR);
   var cosR=Math.cos(r*i+ccR);
   w=60+0.6*60*sinR;
   h=(40+0.6*40*sinR);
   item.style.cssText +=";width:"+w+"px;height:"+h+"px;top:"+parseInt(showerHeight/2+sinR*showerWidth/2/3-w/2)+"px;left:"+parseInt(showerWidth/2+cosR*showerWidth/2-h/2)+"px;z-index:"+parseInt(showerHeight/2+sinR*showerWidth/2/3-w/2)+";";
  }
 }
 document.getElementById("l").onclick=function(){
  cR=(cR+r+2*Math.PI)%(2*Math.PI);
  timer || (timer=setInterval(rotate,10));
 }
 document.getElementById("r").onclick=function(){
  cR=(cR-r+2*Math.PI)%(2*Math.PI);
  timer || (timer=setInterval(rotate,10));
 }
 rotate();
}
</script>
</head>
<body>
<input id="l" type="button" value="left" >
<input id="r" type="button" value="right" >
<div id="show">
 <div class="item">1</div>
 <div class="item">2</div>
 <div class="item">3</div>
 <div class="item">4</div>
 <div class="item">5</div>
 <div class="item">6</div>
 <div class="item">7</div>
 <div class="item">8</div>
 <div class="item">9</div>
 <div class="item">0</div>
 <div class="item">a</div>
 <div class="item">b</div>
 <div class="item">1</div>
 <div class="item">2</div>
 <div class="item">3</div>
</div>
</body>
</html>

Ich hoffe, dass dieser Artikel für die JavaScript-Programmierung aller hilfreich sein wird.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：jQuery implementiert den Flash-Effekt, der das chinesische und englische Navigationsmenü code_jquery nach oben und unten blättertNächster Artikel：jQuery implementiert den Flash-Effekt, der das chinesische und englische Navigationsmenü code_jquery nach oben und unten blättert

In Verbindung stehende Artikel

Mehr sehen