純JS實(shí)現(xiàn)旋轉(zhuǎn)圖片3D展示效果
更新時(shí)間：2015年04月12日 10:48:42 投稿：hebedich
本文給大家分享的是純js實(shí)現(xiàn)的類似flash里的圖片環(huán)繞旋轉(zhuǎn)效果，非常炫酷，有需要的小伙伴可以參考下。
CSS:
<style type="text/css">
#show{position:relative;margin:20px auto;width:800px;}
.item{position:absolute;height:40px;width:60px;background:#999999;border:1px solid #eeeeee;cursor:pointer;}</style>
Html:
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>
JS
<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>
以上所述就是本文的全部內(nèi)容了，希望大家能夠喜歡。
相關(guān)文章
js刷新框架子頁面的七種方法2008-11-11
JavaScript學(xué)習(xí)筆記之DOM基礎(chǔ) 2.4
DOM(Document Object Model)，即“文檔對象模型”?；谡Z義的邏輯結(jié)構(gòu)，DOM將網(wǎng)頁內(nèi)的元素與內(nèi)容呈現(xiàn)為一個清晰、易讀的樹狀模型，下面小編把最近整理有關(guān)javascript筆記之DOM基礎(chǔ)分享給大家，有需要的朋友可以參考下2015-08-08
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)跑馬燈效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-11-11
javascript實(shí)現(xiàn)選中復(fù)選框后相關(guān)輸入框變灰不可用的方法
這篇文章主要介紹了javascript實(shí)現(xiàn)選中復(fù)選框后相關(guān)輸入框變灰不可用的方法,涉及javascript針對頁面元素屬性的相關(guān)操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08
在IE瀏覽器中添加或刪除事件用attachEvent、detachEvent，下面的對事件的添加和刪除做了封裝，感興趣的朋友可以參考下2014-07-07
Javascript的表單驗(yàn)證-初識正則表達(dá)式
JavaScript 可用來在數(shù)據(jù)被送往服務(wù)器前對 HTML 表單中的這些輸入數(shù)據(jù)進(jìn)行驗(yàn)證。接下來通過本文給大家介紹Javascript的表單驗(yàn)證-初識正則表達(dá)式，對js表單驗(yàn)證正則表達(dá)式相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧2016-03-03
本文主要介紹了JS PromiseLike的判定與使用詳解, 文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-11-11
這篇文章主要介紹了JavaScript中的常用算法與函數(shù)。需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11
Bootstrap與KnockoutJs相結(jié)合實(shí)現(xiàn)分頁效果實(shí)例詳解
KnockoutJS是一個JavaScript實(shí)現(xiàn)的MVVM框架。接下來通過本文給大家介紹Bootstrap與KnockoutJs相結(jié)合實(shí)現(xiàn)分頁效果，對bootstrap knockoutjs相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧2016-05-05
這篇文章主要源碼解讀了Bootstrap表單，介紹了Bootstrap各式各樣的表單,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12