jquery+css3实现会动的小圆圈效果

本文实例讲述了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程序设计有所帮助。