本文實例講述了jquery+css3實現會動的小圓圈效果。分享給大家供大家參考，具體如下：
運行效果截圖如下：
具體代碼如下：
<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="utf-8" /> <title>那些變換顏色的小豆豆</title> <script type="text/javascript" src="jquery.js"></script> <style type="text/css"> h1{font-size:16px;} .circle { position:absolute; width:100px; height:100px; border-radius: 50px; -webkit-border-radius:50px; -moz-border-radius:50px; -o-border-radius:50px; -ms-border-radius:50px; border:1px solid #ddd; background-color:#eee; text-align:center; -moz-transition:background-color .5s ease-in; -webkit-transition:background-color .5s ease-in; -o-transition:background-color .5s ease-in; -ms-transition:background-color .5s ease-in; transition:background-color .5s ease-in; } </style> <script type="text/javascript" > var colorArray = "ABCDEFabcdef1234567890".split(''); function createCircle(position, size){ var html = []; var radius = size.height > size.width ? size.height/2 : size.width / 2; var opacity = Math.random(); opacity = opacity < 0.3 ? opacity = 0.3 : opacity; html.push('<div class="circle" style="left:'+position.left+'px; top:'+position.top+'px;'); html.push('width:'+size.width+'px; height:'+size.height+'px; '); html.push('border-radius:'+radius+'px;'); html.push('-webkit-border-radius:'+radius+'px;'); html.push('-moz-border-radius:'+radius+'px;'); html.push('-o-border-radius:'+radius+'px;'); html.push('-ms-border-radius:'+radius+'px;'); html.push('opacity:'+opacity+';'); html.push('filter:alpha(opacity='+Math.round(opacity*100)+')'); html.push('" ></div>'); return html.join(''); } function createColor(){ var color = ""; for(var i=0; i<6; i++) { color += colorArray[Math.ceil(Math.random()*21)]; } return "#"+color; } function animate(obj){ setInterval(function(){ var position = obj.position(); var left = parseInt(position.left); var top = parseInt(position.top); obj.css('background-color', createColor()); obj.animate({'left': left + 5}, 250); obj.animate({'left': left - 5, 'top': top + 5}, 250); obj.animate({'top': top}, 250); obj.animate({'left': left, 'top': top}, 250); }, 1000); } $(document).ready(function(){ var wrapper = $("#wrapper"); var height = parseInt(document.documentElement.clientHeight || 500); var width = parseInt(wrapper.width()); for(var i=0; i<200; i++) { var position = { left: Math.round(Math.random()*(width - 50)), top: Math.round(Math.random()*(height - 100)) }; var _size = 50 - Math.round(Math.random()*40); var size = { height: _size, width: _size }; var circle = $(createCircle(position, size)); circle.appendTo(wrapper); circle.mouseover(function(){ var color = createColor(); $(this).css('background-color', color); }).mouseout(function(){ var color = createColor(); $(this).css('background-color', color); }); animate(circle); } }); </script></head><body id="wrapper"> <div id="wrapper"> </div></body></html>更多關于jQuery特效相關內容感興趣的讀者可查看本站專題：《jQuery常見經典特效匯總》及《jQuery動畫與特效用法總結》
希望本文所述對大家jQuery程序設計有所幫助。
新聞熱點
疑難解答
