基于JS代碼實(shí)現(xiàn)圖片在頁面中旋轉(zhuǎn)效果
1.概述
在一些交易平臺(tái)網(wǎng)站,如淘寶網(wǎng)、拍拍網(wǎng)等,經(jīng)常會(huì)發(fā)現(xiàn)一些圖片以圈的形狀旋轉(zhuǎn)的效果,如此反復(fù)的執(zhí)行。
2.技術(shù)要點(diǎn)
主要應(yīng)用了Math對(duì)象的sin(返回?cái)?shù)的正弦值)和cos(返回?cái)?shù)的余弦值),通過取得正弦值和余弦值然后加一些算法來改變當(dāng)前層的位置,使圖片在頁面中旋轉(zhuǎn)。
3.具體實(shí)現(xiàn)
(1)本例利用javaScript的Math對(duì)象的正弦和余弦值來改變當(dāng)前層的位置,代碼如下:
<script language="javascript"> var x1=200; var x2=200; var timer; var r=60; var i = 0; function eddyphoto(i) { var ob=document.all("divround"); ob.style.posTop = r*Math.sin((i*Math.PI)/180)+x1; ob.style.posLeft = r*Math.cos((i*Math.PI)/180)+x2; i=i+1; if (r>100){ window.clearTimeout(timer); } else{ if (i > 360){ i = 0;r = r + 1; } timer=setTimeout("eddyphoto("+i+")",10); } } eddyphoto(0); </script>
(2)在頁面中添加一個(gè)層并在層中添加要旋轉(zhuǎn)效果的圖片,代碼如下:
<div id="divround" style="width:50pt; top:198.75pt; left:256.5pt; position:absolute; z-index:0"> <img src="temp.jpg"> </div>
以上所述是小編給大家介紹的基于JS代碼實(shí)現(xiàn)圖片在頁面中旋轉(zhuǎn)效果 的相關(guān)知識(shí),希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
js對(duì)table的td進(jìn)行相同內(nèi)容合并示例詳解
正如標(biāo)題所言如何對(duì)table的td進(jìn)行相同內(nèi)容合并,下面為大家詳細(xì)介紹下使用js是如何做到的,感興趣的朋友不要錯(cuò)過2013-12-12JS使用 cryptojs加密解密(對(duì)稱加密庫)的問題
js 加密解密可以使用 crypto-js,這是一個(gè)對(duì)稱加密的庫, 可以使用 AES DES 但沒有 rsa 等非對(duì)稱加密的方法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧2023-11-11javascript關(guān)于open.window子頁面執(zhí)行完成后刷新父頁面的問題分析
這篇文章主要介紹了javascript關(guān)于open.window子頁面執(zhí)行完成后刷新父頁面的問題,實(shí)例分析了javascript操作子頁面的執(zhí)行與父頁面的刷新技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04js+canvas實(shí)現(xiàn)驗(yàn)證碼功能
這篇文章主要為大家詳細(xì)介紹了js+canvas實(shí)現(xiàn)驗(yàn)證碼功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-07-07