JS實(shí)現(xiàn)圖片平面旋轉(zhuǎn)的方法
更新時(shí)間：2016年03月01日 11:09:05 作者：yenange
這篇文章主要介紹了JS實(shí)現(xiàn)圖片平面旋轉(zhuǎn)的方法,涉及JavaScript操作頁(yè)面元素樣式動(dòng)態(tài)變換的相關(guān)技巧,需要的朋友可以參考下
本文實(shí)例講述了JS實(shí)現(xiàn)圖片平面旋轉(zhuǎn)的方法。分享給大家供大家參考，具體如下：
<!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>圖片旋轉(zhuǎn)</title>
<style type="text/css" >
#div1{ position:relative;height:800px; border:1px solid red;}
#div1 img{ position:absolute;}
</style>
</head>
<body >
<div id="div1" >
<img src="http://www.fzitv.net/images/logo.gif" />
<img src="http://www.fzitv.net/images/logo.gif" />
<img src="http://www.fzitv.net/images/logo.gif" />
<img src="http://www.fzitv.net/images/logo.gif" />
<img src="http://www.fzitv.net/images/logo.gif" />
<img src="http://www.fzitv.net/images/logo.gif" />
</div>
<script type="text/javascript" >
var centerx = 400; //圓心X
var centery = 300; //圓心Y
var r = 300; //半徑
var oimages = document.getElementById("div1").getElementsByTagName("IMG"); //圖片集合
var cnt = oimages.length; //圖片數(shù)
var da = 360 / cnt; //圖片間隔角度
var a0 = 0; //已旋轉(zhuǎn)角度
var timer;
for (var i = 0; i < cnt; i++) {
oimages[i].onmouseover = stop;
oimages[i].onmouseout = start;
}
function posimgs() {
for (var i = 0; i < cnt; i++) {
oimages[i].style.left = centerx + r * Math.cos((da * i + a0) / 180 * Math.PI) + "px";
oimages[i].style.top = centery + r * Math.sin((da * i + a0) / 180 * Math.PI) + "px";
}
}
// posimgs();
function start() {
timer = window.setInterval("posimgs();a0++;", 100);
}
function stop() {
window.clearInterval(timer);
}
start();
</script>
</body>
</html>
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript查找算法技巧總結(jié)》、《JavaScript動(dòng)畫特效與技巧匯總》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
相關(guān)文章
JS實(shí)現(xiàn)簡(jiǎn)單的tab切換選項(xiàng)卡效果
這篇文章主要介紹了JS實(shí)現(xiàn)簡(jiǎn)單的tab切換選項(xiàng)卡效果,涉及javascript結(jié)合鼠標(biāo)事件對(duì)頁(yè)面元素屬性動(dòng)態(tài)操作的相關(guān)技巧,需要的朋友可以參考下2016-09-09
JS判斷數(shù)組是否包含某元素實(shí)現(xiàn)方法匯總
這篇文章主要介紹了JS判斷數(shù)組是否包含某元素實(shí)現(xiàn)方法匯總,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-06-06
JS獲取復(fù)選框的值,并傳遞到后臺(tái)的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇JS獲取復(fù)選框的值,并傳遞到后臺(tái)的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-05
編程世界里只存在兩種基本元素，一個(gè)是數(shù)據(jù)，一個(gè)是代碼。編程世界就是在數(shù)據(jù)和代碼千絲萬(wàn)縷的糾纏中呈現(xiàn)出無(wú)限的生機(jī)和活力。2008-03-03
JavaScript給url網(wǎng)址進(jìn)行encode編碼的方法
這篇文章主要介紹了JavaScript給url網(wǎng)址進(jìn)行encode編碼的方法,實(shí)例分析了javascript中encodeURIComponent函數(shù)的使用技巧,需要的朋友可以參考下2015-03-03
這篇文章主要介紹了JS刪除String里某個(gè)字符的方法,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，,需要的朋友可以參考下2019-06-06
JS實(shí)現(xiàn)瀏覽器狀態(tài)欄文字從右向左彈出效果代碼
這篇文章主要介紹了JS實(shí)現(xiàn)瀏覽器狀態(tài)欄文字從右向左彈出效果,涉及JavaScript結(jié)合時(shí)間函數(shù)遍歷字符串及動(dòng)態(tài)改變狀態(tài)欄顯示效果的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10
這篇文章主要介紹了使用JS獲取當(dāng)前地理位置方法匯總,需要的朋友可以參考下2014-12-12
本篇文章主要介紹了js正則表達(dá)式驗(yàn)證表單的實(shí)例，具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-03-03
JS+CSS實(shí)現(xiàn)簡(jiǎn)易的滑動(dòng)門效果代碼
這篇文章主要介紹了JS+CSS實(shí)現(xiàn)簡(jiǎn)易的滑動(dòng)門效果代碼,涉及JavaScript動(dòng)態(tài)遍歷及修改頁(yè)面元素屬性的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09