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

2019-11-20 10:40:36

字体：大中小

来源：转载

供稿：网友

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

上一篇：jquery实现可旋转可拖拽的文字效果代码

下一篇：再谈JavaScript异步编程