jQuery css3实现转动的正方形效果（附演示源码下载)

本文实例讲述了jQuery css3实现转动的正方形效果。分享给大家供大家参考，具体如下：

主要是应用到了css3中的辐状的来控制旋转角度

运行效果截图如下：

点击此处查看在线演示效果。

具体代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。L1-过渡时期。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' head title/title script src=' http 3360 jquery-1。7 .1 .量滴js ' type=' text/JavaScript '/script style='高度：50 px} .边距1 {边距-顶部：50 px左边距left:100px}。边距2 {边距-顶部：50 px左边距left:100px}。边距3 {边距-顶部：50 px左边距left:100px}。边距4 {边距-顶部：50 px左边距left:100px}。边距5 {边距-顶部：50 px左边距left:100px}。边距6 {边距-顶部：50 px左边距left:175px}。边距7 {边距-顶部：50 px左边距left:100px}。边距8 {边距-顶部：50 px左边距left:100px}。页边距9 {页边距-顶部：50 px左边距left:100px}。页边距10 {页边距-顶部：50 px左边距left:250px}。页边距11 {页边距-顶部：50 px左边距left:100px}。页边距12 {页边距-顶部：50 px左边距left:100px}。页边距13 {页边距-顶部：50 px左边距left:325px}。页边距14 {页边距-顶部：50 px左边距left:100px}。页边距15 {页边距-顶部：50 px左边距左：400 px }/样式脚本类型=' text/JavaScript ' var ADD _ ANGEL=45；//每次偏移角度变化角度=0;//角度窗户。onload=function(){ var img=$(' img ')；setInterval(function(){ rotate(img))；}, 50);}函数旋转(obj){ ANGLE=ADD _ ANGLE；if(angle==360){ angle=0；} obj。CSS({ ' transform ' : ' rotate(' angle ' deg ')，'-web kit-transform ' : ' rotate(' angle ' deg ')，'-moz-transform ' : ' rotate(' angle ' deg ')))})；}/script/headdymg src=' http :3。jpg ' alt=' class=' margin 1 '/img src=' http :3。jpg ' alt=' class=' margin 2 '/img src=' http :3。jpg ' alt=' class=' http :3 '/img src=' http :3。jpg ' alt=' class=' margin 4 '/img src=' http 333366完整实例代码点击此处本站下载。

更多关于jQuery特效相关内容感兴趣的读者可查看本站专题： 《jQuery常见经典特效汇总》 及《jQuery动画与特效用法总结》 。

希望本文所述对大家jQuery程序设计有所帮助。