本文实例讲述了基于 jQuery 实现的旋转彩圈。分享给大家供大家参考。具体实现方法如下:
- <!DOCTYPE html>
- <html>
- <head>
- <script src="jquery-1.7.1.min.js"></script>
- <script>
- for(var i=0;i<100000;i++)
- {
- if(i%4==0)
- setTimeout("$('#div1').CSS({'border-left':'40px solid red','border-bottom':'40px solid green','border-right':'40px solid yellow','border-top':'40px solid blue'})",2000*i);
- if(i%4==1)
- setTimeout("$('#div1').css({'border-left':'40px solid blue','border-bottom':'40px solid red','border-right':'40px solid green','border-top':'40px solid yellow'})",2000*i);
- if(i%4==2)
- setTimeout("$('#div1').css({'border-left':'40px solid yellow','border-bottom':'40px solid blue','border-right':'40px solid red','border-top':'40px solid green'})",2000*i);
- if(i%4==3)
- setTimeout("$('#div1').css({'border-left':'40px solid green','border-bottom':'40px solid yellow','border-right':'40px solid blue','border-top':'40px solid red'})",2000*i);
- }
- </script>
- <style>
- #div2{
- width: 100px;
- height: 100px;
- border-left: 40px solid red;
- border-right: 40px solid yellow;
- border-bottom: 40px solid green;
- border-top:40px solid blue;
- background-color:#FFFFFF;
- border-radius:900px/900px;
- display:none;
- top:0px;
- left:0px;
- position:relative;
- z-index:1;
- }
- #div1{
- width: 100px;
- height: 100px;
- border-left: 40px solid red;
- border-right: 40px solid yellow;
- border-bottom: 40px solid green;
- border-top:40px solid blue;
- background-color:#FFFFFF;
- border-radius:90px/90px;
- }
- </style>
- </head>
- <body>
- <p style="color:#FF0000">旋转的圈</p>
- <div id="div1"></div>
- </body>
- </html>
运行效果图如下:
希望本文所述对大家的 jQuery 程序设计有所帮助。
来源: http://www.phpstudy.net/b.php/113073.html