君子以泽,懒人听书

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

jQuery制作圖片旋轉(zhuǎn)效果-創(chuàng)新互聯(lián)

以前用JQuery寫過一個縱深方向上的圖片旋轉(zhuǎn)效果，在這里拿出來跟大家分享下,貼上一張圖片看看效果是如何的：

網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)建站！專注于網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、成都微信小程序、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了儀征免費(fèi)建站歡迎大家使用！

jQuery制作圖片旋轉(zhuǎn)效果

其實現(xiàn)原理并不復(fù)雜，在數(shù)學(xué)上只用到了其中的正弦函數(shù)，制作過程大致如下：

（1）先定義好圖片旋轉(zhuǎn)的半徑

（2）圖片旋轉(zhuǎn)的過程需要用到setInterval()方法，來獲取每一張圖片所在位置的的角度，角度會根據(jù)時間變化逐漸變化

（3）根據(jù)一個數(shù)學(xué)公式：x=R*SIN(deg)可以獲得圖片在X方向的位置

（4）透明度的設(shè)置其實也是根據(jù)圖片旋轉(zhuǎn)時候的角度來定的。初始設(shè)置圖片在正前方時是0度，無論是正時針還是逆時針方式旋轉(zhuǎn)，當(dāng)圖片旋轉(zhuǎn)角度大于0度

小于180度時圖片的透明度是逐漸減小的，這里為了圖片在180度時不至于完全透明加了個小小的計算公式，代碼會在下面展示。

（5）圖片的縮放也是根據(jù)圖片旋轉(zhuǎn)角度而定的，相信容易理解。

（6）有了圖片的X軸位置信息，縮放信息，透明度信息后，接下來就是很簡單的事情了，只要將所有的信息通過CSS樣式顯示出來就可以了。

css的樣式會通過setInterval()方法逐漸改變。

下面來看下主要代碼：

var thisleft=-(o.radius)*Math.sin((360/imgnum)*$(this).data("index")*(Math.PI*2/360))+(holderwidth/2);
 var thiszindex=360/imgnum*$(this).data("index")>180?360/imgnum*$(this).data("index")-360:-360/imgnum*$(this).data("index");
 var thisopacity=360/imgnum*$(this).data("index")<=180?(180-360/imgnum*$(this).data("index"))/180*1.2:
 (360/imgnum*$(this).data("index")-180)/180*1.2;

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站www.cdcxhl.com，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

文章標(biāo)題：jQuery制作圖片旋轉(zhuǎn)效果-創(chuàng)新互聯(lián)
分享URL：http://fisionsoft.com.cn/article/dehphe.html

新聞中心

其他資訊