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


Posted in Javascript onJanuary 27, 2016

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

Javascript 相关文章推荐
js cookies实现简单统计访问次数
Nov 24 Javascript
angularJS 入门基础
Feb 09 Javascript
JavaScript中的setUTCDate()方法使用详解
Jun 11 Javascript
jQuery 跨域访问解决原理案例详解
Jul 09 Javascript
详解JavaScript中return的用法
May 08 Javascript
详解vue2.0监听属性的使用心得及搭配计算属性的使用
Jul 18 Javascript
angular4强制刷新视图的方法
Oct 09 Javascript
Vue.js 父子组件通信的十种方式
Oct 30 Javascript
实现elementUI表单的全局验证的方法步骤
Apr 29 Javascript
详解JavaScript中的坐标和距离
May 27 Javascript
JavaScript常用8种数组去重代码实例
Sep 09 Javascript
js加减乘除精确运算方法实例代码
Jan 17 Javascript
再谈JavaScript异步编程
Jan 27 #Javascript
简单介绍jsonp 使用小结
Jan 27 #Javascript
理解javascript异步编程
Jan 27 #Javascript
js实现的鼠标滚轮滚动切换页面效果(类似360默认页面滚动切换效果)
Jan 27 #Javascript
AngularJS转换响应内容
Jan 27 #Javascript
jQuery+css实现的切换图片功能代码
Jan 27 #Javascript
javascript中的3种继承实现方法
Jan 27 #Javascript
You might like
一个用mysql_odbc和php写的serach数据库程序
2006/10/09 PHP
php生成图片验证码-附五种验证码
2015/08/19 PHP
从JavaScript的函数重名看其初始化方式
2007/03/08 Javascript
使一个函数作为另外一个函数的参数来运行的javascript代码
2007/08/13 Javascript
基于jquery自定义图片热区效果
2012/07/21 Javascript
script不刷新页面的联动前后代码
2013/09/18 Javascript
jQuery实现当按下回车键时绑定点击事件
2014/01/28 Javascript
javascript设计简单的秒表计时器
2020/09/05 Javascript
如何消除inline-block属性带来的标签间间隙
2016/03/31 Javascript
bootstrap下拉列表与输入框组结合的样式调整
2016/10/08 Javascript
微信小程序 时间格式化(util.formatTime(new Date))详解
2016/11/16 Javascript
详解js中==与===的区别
2017/01/08 Javascript
vue2项目使用sass的示例代码
2017/06/28 Javascript
10个最优秀的Node.js MVC框架
2017/08/24 Javascript
Vue.js+Layer表格数据绑定与实现更新的实例
2018/03/07 Javascript
VUE重点问题总结
2018/03/19 Javascript
js中实例与对象的区别讲解
2019/01/21 Javascript
python获取文件真实链接的方法,针对于302返回码
2018/05/14 Python
浅谈python图片处理Image和skimage的区别
2019/08/04 Python
python实现图像检索的三种(直方图/OpenCV/哈希法)
2019/08/08 Python
python 表格打印代码实例解析
2019/10/12 Python
Python object类中的特殊方法代码讲解
2020/03/06 Python
python实现图像拼接功能
2020/03/23 Python
Python学习之os模块及用法
2020/06/03 Python
Python 为什么推荐蛇形命名法原因浅析
2020/06/18 Python
Python错误的处理方法
2020/06/23 Python
英国顶级珠宝品牌之家:John Greed
2018/06/09 全球购物
英国豪华装饰照明品牌的在线零售商:Inspyer Lighting
2019/12/10 全球购物
给校长的建议书600字
2014/05/15 职场文书
建筑安全标语
2014/06/07 职场文书
工地门卫岗位职责范本
2014/07/01 职场文书
计生工作先进事迹
2014/08/15 职场文书
社区创先争优承诺书
2014/08/30 职场文书
个人授权委托书模板
2014/09/14 职场文书
经典格言警句:没有热忱,世间便无进步
2019/11/13 职场文书
vue里使用create, mounted调用方法
2022/04/26 Vue.js