JS實現(xiàn)圖片平面旋轉(zhuǎn)的方法
更新時間：2016年03月01日 11:09:05 作者：yenange
這篇文章主要介紹了JS實現(xiàn)圖片平面旋轉(zhuǎn)的方法,涉及JavaScript操作頁面元素樣式動態(tài)變換的相關(guān)技巧,需要的朋友可以參考下
本文實例講述了JS實現(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.dhdzp.com/images/logo.gif" />
<img src="http://www.dhdzp.com/images/logo.gif" />
<img src="http://www.dhdzp.com/images/logo.gif" />
<img src="http://www.dhdzp.com/images/logo.gif" />
<img src="http://www.dhdzp.com/images/logo.gif" />
<img src="http://www.dhdzp.com/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動畫特效與技巧匯總》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學運算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
相關(guān)文章
這篇文章主要介紹了JS實現(xiàn)簡單的tab切換選項卡效果,涉及javascript結(jié)合鼠標事件對頁面元素屬性動態(tài)操作的相關(guān)技巧,需要的朋友可以參考下2016-09-09
JS判斷數(shù)組是否包含某元素實現(xiàn)方法匯總
這篇文章主要介紹了JS判斷數(shù)組是否包含某元素實現(xiàn)方法匯總,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-06-06
下面小編就為大家?guī)硪黄狫S獲取復選框的值,并傳遞到后臺的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
編程世界里只存在兩種基本元素，一個是數(shù)據(jù)，一個是代碼。編程世界就是在數(shù)據(jù)和代碼千絲萬縷的糾纏中呈現(xiàn)出無限的生機和活力。2008-03-03
JavaScript給url網(wǎng)址進行encode編碼的方法
這篇文章主要介紹了JavaScript給url網(wǎng)址進行encode編碼的方法,實例分析了javascript中encodeURIComponent函數(shù)的使用技巧,需要的朋友可以參考下2015-03-03
這篇文章主要介紹了JS刪除String里某個字符的方法,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，,需要的朋友可以參考下2019-06-06
JS實現(xiàn)瀏覽器狀態(tài)欄文字從右向左彈出效果代碼
這篇文章主要介紹了JS實現(xiàn)瀏覽器狀態(tài)欄文字從右向左彈出效果,涉及JavaScript結(jié)合時間函數(shù)遍歷字符串及動態(tài)改變狀態(tài)欄顯示效果的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-10-10
這篇文章主要介紹了使用JS獲取當前地理位置方法匯總,需要的朋友可以參考下2014-12-12
本篇文章主要介紹了js正則表達式驗證表單的實例，具有很好的參考價值。下面跟著小編一起來看下吧2017-03-03
這篇文章主要介紹了JS+CSS實現(xiàn)簡易的滑動門效果代碼,涉及JavaScript動態(tài)遍歷及修改頁面元素屬性的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-09-09