jQuery+css3實(shí)現(xiàn)轉(zhuǎn)動(dòng)的正方形效果(附demo源碼下載)
本文實(shí)例講述了jQuery+css3實(shí)現(xiàn)轉(zhuǎn)動(dòng)的正方形效果。分享給大家供大家參考,具體如下:
主要是應(yīng)用到了css3中的rotate來(lái)控制旋轉(zhuǎn)角度
運(yùn)行效果截圖如下:
點(diǎn)擊此處查看在線(xià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> <title></title> <script src="jquery-1.7.1.min.js" type="text/javascript"></script> <style type="text/css" > img { width:50px; height:50px; } .margin1 { margin-top:50px; margin-left:100px; } .margin2 { margin-top:50px; margin-left:100px; } .margin3 { margin-top:50px; margin-left:100px; } .margin4 { margin-top:50px; margin-left:100px; } .margin5 { margin-top:50px; margin-left:100px; } .margin6 { margin-top:50px; margin-left:175px; } .margin7 { margin-top:50px; margin-left:100px; } .margin8 { margin-top:50px; margin-left:100px; } .margin9 { margin-top:50px; margin-left:100px; } .margin10 { margin-top:50px; margin-left:250px; } .margin11 { margin-top:50px; margin-left:100px; } .margin12 { margin-top:50px; margin-left:100px; } .margin13 { margin-top:50px; margin-left:325px; } .margin14 { margin-top:50px; margin-left:100px; } .margin15 { margin-top:50px; margin-left:400px; } </style> <script type="text/javascript" > var ADD_ANGLE = 45; // 每次偏移角度 var angle = 0; // 角度 window.onload = function () { var img = $("img"); setInterval(function () { rotate(img); }, 50); } function rotate(obj) { angle += ADD_ANGLE; if (angle == 360) { angle = 0; } obj.css({ "transform": "rotate(" + angle + "deg)", "-webkit-transform": "rotate(" + angle + "deg)", "-moz-transform": "rotate(" + angle + "deg)" }); } </script> </head> <body> <img src="3.jpg" alt="" class="margin1" /> <img src="3.jpg" alt="" class="margin2" /> <img src="3.jpg" alt="" class="margin3" /> <img src="3.jpg" alt="" class="margin4" /> <img src="3.jpg" alt="" class="margin5" /> <br /> <img src="3.jpg" alt="" class="margin6" /> <img src="3.jpg" alt="" class="margin7" /> <img src="3.jpg" alt="" class="margin8" /> <img src="3.jpg" alt="" class="margin9" /> <br /> <img src="3.jpg" alt="" class="margin10" /> <img src="3.jpg" alt="" class="margin11" /> <img src="3.jpg" alt="" class="margin12" /> <br /> <img src="3.jpg" alt="" class="margin13" /> <img src="3.jpg" alt="" class="margin14" /> <br /> <img src="3.jpg" alt="" class="margin15" /> </body> </html>
完整實(shí)例代碼點(diǎn)擊此處本站下載。
更多關(guān)于jQuery特效相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題:《jQuery常見(jiàn)經(jīng)典特效匯總》及《jQuery動(dòng)畫(huà)與特效用法總結(jié)》。
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
- jQuery+css實(shí)現(xiàn)的時(shí)鐘效果(兼容各瀏覽器)
- jquery+css3實(shí)現(xiàn)會(huì)動(dòng)的小圓圈效果
- jQuery+css實(shí)現(xiàn)的換頁(yè)標(biāo)簽欄效果
- jQuery+CSS實(shí)現(xiàn)滑動(dòng)的標(biāo)簽分欄切換效果
- jquery+css實(shí)現(xiàn)動(dòng)感的圖片切換效果
- jQuery+CSS3實(shí)現(xiàn)3D立方體旋轉(zhuǎn)效果
- jQuery+CSS3折疊卡片式下拉列表框?qū)崿F(xiàn)效果
- jQuery+css實(shí)現(xiàn)的藍(lán)色水平二級(jí)導(dǎo)航菜單效果代碼
- jquery+CSS3模擬Path2.0動(dòng)畫(huà)菜單效果代碼
- jQuery+css實(shí)現(xiàn)炫目的動(dòng)態(tài)塊漂移效果
相關(guān)文章
jquery實(shí)現(xiàn)簡(jiǎn)單的拖拽效果實(shí)例兼容所有主流瀏覽器
拖拽效果個(gè)人覺(jué)得是一種不錯(cuò)的用戶(hù)體驗(yàn),抽空研究了一下,原理還蠻簡(jiǎn)單的,具體實(shí)現(xiàn)如下,感興趣的朋友可以參考下哈2013-06-06jquery實(shí)現(xiàn)tab菜單切換內(nèi)容(精簡(jiǎn)版demo)
這篇文章主要為大家介紹了jquery實(shí)現(xiàn)tab菜單切換內(nèi)容的精簡(jiǎn)方法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-10-10jQuery ajax dataType值為text json探索分享
ajax dataType值為text json的使用是怎么樣的,在本文將為大家想你想介紹下,感興趣的朋友不要錯(cuò)過(guò)2013-09-09jquery attr方法獲取input的checked屬性問(wèn)題
如果使用jquery,應(yīng)使用prop方法來(lái)獲取和設(shè)置checked屬性,不應(yīng)使用attr,需要的朋友可以參考下2014-05-05jQuery實(shí)現(xiàn)左右切換焦點(diǎn)圖
這篇文章主要介紹了jQuery實(shí)現(xiàn)左右切換焦點(diǎn)圖的核心代碼,有需要的小伙伴可以參考下2015-04-04jquery樹(shù)形菜單效果的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇jquery樹(shù)形菜單效果的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06