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

前端技术 2023/09/05 JavaScript

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

本文地址：https://www.stayed.cn/item/14528

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案