jquery+css3で小さな円を動かす効果を実現_jquery-jsチュートリアル-php.cn

jquery+css3で小さな円を動かす効果を実現_jquery

WBOY

リリース： 2016-05-16 15:17:33

オリジナル

2076 人が閲覧しました

この記事の例では、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 &#63; size.height/2 : size.width / 2;
   var opacity = Math.random();
   opacity = opacity < 0.3 &#63; 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 プログラミングのすべての人に役立つことを願っています。