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 相关文章推荐
jQuery UI Dialog 创建友好的弹出对话框实现代码
Apr 12 Javascript
JS小游戏之宇宙战机源码详解
Sep 25 Javascript
js设置document.domain实现跨域的注意点分析
May 21 Javascript
Javascript实现鼠标框选操作  不是点击选取
Apr 14 Javascript
js HTML5 canvas绘制图片的方法
Sep 08 Javascript
基于 flexible 的 Vue 组件:Toast -- 显示框效果
Dec 26 Javascript
浅谈React组件之性能优化
Mar 02 Javascript
JS内部事件机制之单线程原理
Jul 02 Javascript
对VUE中的对象添加属性
Sep 18 Javascript
Vue + Elementui实现多标签页共存的方法
Jun 12 Javascript
配置node服务器并且链接微信公众号接口配置步骤详解
Jun 21 Javascript
layui table设置某一行的字体颜色方法
Sep 05 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
PHP中实现图片的锐化
2006/10/09 PHP
PHP二维数组去重算法
2016/12/17 PHP
javascript 一段左右两边随屏滚动的代码
2009/06/18 Javascript
JQuery 学习笔记 选择器之四
2009/07/23 Javascript
capacityFixed 基于jquery的类似于新浪微博新消息提示的定位框
2011/05/24 Javascript
Node.js中HTTP模块与事件模块详解
2014/11/14 Javascript
jQuery模拟原生态App上拉刷新下拉加载更多页面及原理
2015/08/10 Javascript
基于node下的http小爬虫的示例代码
2018/01/11 Javascript
angular写一个列表的选择全选交互组件的示例
2018/01/22 Javascript
关于js的三种使用方式(行内js、内部js、外部js)的程序代码
2018/05/05 Javascript
react中使用swiper的具体方法
2018/05/15 Javascript
Vue中使用clipboard实现复制功能
2018/09/05 Javascript
微信小程序使用map组件实现路线规划功能示例
2019/01/22 Javascript
vue实现树形结构样式和功能的实例代码
2019/10/15 Javascript
微信小程序文章详情功能完整实例
2020/06/03 Javascript
Vue通过Blob对象实现导出Excel功能示例代码
2020/07/31 Javascript
Vue实现导航栏菜单
2020/08/19 Javascript
微信小程序实现点击页面出现文字
2020/09/21 Javascript
Nginx搭建HTTPS服务器和强制使用HTTPS访问的方法
2015/08/16 Python
Ubuntu下使用python读取doc和docx文档的内容方法
2018/05/08 Python
使用python将图片按标签分入不同文件夹的方法
2018/12/08 Python
Django框架实现的分页demo示例
2019/05/25 Python
python add_argument()用法解析
2020/01/29 Python
一款纯css3实现的鼠标经过按钮特效教程
2014/11/09 HTML / CSS
HTML5中input[type='date']自定义样式与日历校验功能的实现代码
2017/07/11 HTML / CSS
HTML5 video进入全屏和退出全屏的实现方法
2020/07/28 HTML / CSS
html table呈现个人简历以及单元格宽度失效的问题解决
2021/01/22 HTML / CSS
凯撒娱乐:Caesars Entertainment
2018/02/23 全球购物
世界上最大的字体市场:MyFonts
2020/01/10 全球购物
澳大利亚厨房和家用电器购物网站:Bing Lee
2021/01/11 全球购物
捐赠仪式主持词
2014/03/19 职场文书
实习介绍信范文
2015/05/05 职场文书
2015年乡镇组织委员工作总结
2015/10/23 职场文书
《钓鱼的启示》教学反思
2016/02/18 职场文书
ThinkPHP5和ThinkPHP6的区别
2021/03/31 PHP
怎么禁用Win11输入法 最新Win11输入法关闭教程
2022/08/05 数码科技