运行效果截图如下：
具体代码如下：
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8" /> <title>那些变换颜色的小豆豆</title> <script type="text/javascript" src="https://www.jb51.net/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 ></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> <div> </div> </body> </html>