jQuery+css3实现转动的正方形效果(附demo源码下载)
本文实例讲述了jQuery+css3实现转动的正方形效果。分享给大家供大家参考，具体如下：
主要是应用到了css3中的rotate来控制旋转角度
运行效果截图如下：
点击此处查看在线演示效果。
具体代码如下：
<!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>
完整实例代码点击此处本站下载。
更多关于jQuery特效相关内容感兴趣的读者可查看本站专题：《jQuery常见经典特效汇总》及《jQuery动画与特效用法总结》。
希望本文所述对大家jQuery程序设计有所帮助。
相关推荐
-
jQuery+CSS3折叠卡片式下拉列表框实现效果
jQuery下拉列表框特效将每一个列表项都制作为卡片的样式,打开和关闭它有打开和关闭百叶窗的感觉,效果非常不错,分享给大家. 简要教程 HTML结构 该下拉列表框特效的列表项使用一个无序列表来制作,用于切换打开和关闭状态的元素是一个超链接元素. <div class="container"> <div class="card-drop"> <a class='toggle' href="#"> <i cl
-
jQuery+css实现的蓝色水平二级导航菜单效果代码
本文实例讲述了jQuery+css实现的蓝色水平二级导航菜单效果.分享给大家供大家参考.具体如下: 这是一款蓝色经典的jQuery+CSS实现水平二级导航菜单,相信你会喜欢的,蓝色,超级经典的一种风格,从其它网站上扣下来的,我认为很不错,赶紧分享给大家吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-blue-line-2level-nav-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC &quo
-
jQuery+css实现炫目的动态块漂移效果
本文实例讲述了jQuery+css实现的动态块漂移效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!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/
-
jQuery+CSS实现滑动的标签分栏切换效果
本文实例讲述了jQuery实现平滑滚动的标签分栏切换效果.分享给大家供大家参考.具体如下: 运行代码如下 具体代码如下 <html> <head> <title>jQuery平滑滚动的标签分栏切换</title> <meta charset="gb2312"> <style> ul,li{ margin:0px; padding:0px; list-style:none } li{ float:left; back
-
jQuery+css实现的时钟效果(兼容各浏览器)
本文实例讲述了jQuery+css实现的时钟效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 这里没有做太多的修饰,简单的实现了一下功能,另外,用的是js的setTimeout方法,当时间长了之后,会有一定的延时,建议,在每隔多少分钟执行一次时钟校准!哈哈,都有误差的嘛,反正我是没给你校. 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.
-
jQuery+CSS3实现3D立方体旋转效果
本文介绍了如何利用jQuery+CSS3实现3D立方体旋转效果,先看一看效果图: 切换图片过程中,图片进行旋转: HTML结构 3D图片画廊的图片列表和导航按钮分别使用两个无序列表来制作. <section> <div id="css3dimageslider" class="transparency"> <ul> <li> <img src="img/css3dimg1.jpg"> &
-
jQuery+css实现的换页标签栏效果
本文实例讲述了jQuery+css实现的换页标签栏效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html> <head> <title>index</title> <script type="text/javascript" src="jquery.js"></script> <style type="t
-
jquery+css实现动感的图片切换效果
本文实例讲述了jquery+css实现动感的图片切换效果代码.分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下: 基本思路:定义一个数组存放需要展示的图片,接着当单击图片时删除zoomIn类,添加fadeOutRight类,实现实图右移并消失,记数器加1(用于调用下一张图片),当图片删除500毫秒后判断图片是不是最后一张,如果是,就把记数器调为0,从第一张图片开始,删除图片代码,接着创建一张新的图片代码,并把src设为下一张图片,同时加上缩放动画样式类animated zoom
-
jquery+CSS3模拟Path2.0动画菜单效果代码
本文实例讲述了jquery+CSS3模拟Path2.0动画菜单效果代码.分享给大家供大家参考.具体如下: CSS3实现的仿手机软件菜单,动画菜单,注意的地方,小按钮位移后有个缓冲,每个小按钮缓冲的距离不一样,每个小按钮位移的时间有间隔,处理好这些细节才能体现出灵动的效果. CSS3代码:(请用非IE标准浏览器访问)由于代码运行框缺陷,请先刷新一下页面动画运行更流畅.Path菜单的小按钮本来应该也可以旋转的,但CSS3动画的位移和旋转同时出现时不知道为何旋转就没效果了,所以这里没弄出来,感兴趣的朋
-
jquery+css3实现会动的小圆圈效果
本文实例讲述了jquery+css3实现会动的小圆圈效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8" /> <title>那些变换颜色的小豆豆</title> <script type="text/javascript&quo