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 图像裁剪插件Jcrop的简单使用
May 22 Javascript
多种方法实现load加载完成后把图片一次性显示出来
Feb 19 Javascript
Ext GridPanel加载完数据后进行操作示例代码
Jun 17 Javascript
浅析Javascript中“==”与“===”的区别
Dec 23 Javascript
jQuery中prepend()方法用法实例
Dec 25 Javascript
理解javascript封装
Feb 23 Javascript
jQuery模仿阿里云购买服务器选择购买时间长度的代码
Apr 29 Javascript
jQuery 中msgTips 顶部弹窗效果实现代码
Aug 14 jQuery
vuex 的简单使用
Mar 22 Javascript
vue实现固定位置显示功能
May 30 Javascript
jquery将json转为数据字典的实例代码
Oct 11 jQuery
vue将文件/图片批量打包下载zip的教程
Oct 21 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中文本操作的类
2007/03/17 PHP
PHP服务器页面间跳转实现方法
2012/08/02 PHP
比较strtr, str_replace和preg_replace三个函数的效率
2013/06/26 PHP
php操作xml入门之xml标签的属性分析
2015/01/23 PHP
PHP易混淆知识整理笔记
2015/09/24 PHP
PHP获取指定时间段之间的 年,月,天,时,分,秒
2016/06/05 PHP
PHP CURL中传递cookie的方法步骤
2019/05/09 PHP
用正则表达式 动态创建/增加css style script 兼容IE firefox
2009/03/10 Javascript
jQuery不间断滚动效果(模拟百度新闻支持文字/图片/垂直滚动)
2013/02/05 Javascript
jQuery.prototype.init选择器构造函数源码思路分析
2013/02/05 Javascript
JavaScript将取代AppleScript?
2014/09/18 Javascript
JavaScript显示表单内元素数量的方法
2015/04/02 Javascript
javascript自定义in_array()函数实现方法
2015/08/03 Javascript
实例讲解javascript注册事件处理函数
2016/01/09 Javascript
JS实现六边形3D拖拽翻转效果的方法
2016/09/11 Javascript
微信小程序 wxapp画布 canvas详细介绍
2016/10/31 Javascript
js 性能优化之算法和流程控制
2017/02/15 Javascript
vue 指定组件缓存实例详解
2018/04/01 Javascript
基于Vue的延迟加载插件vue-view-lazy
2018/05/21 Javascript
使用Taro实现小程序商城的购物车功能模块的实例代码
2020/06/05 Javascript
vue v-on:click传递动态参数的步骤
2020/09/11 Javascript
jQuery实现可以计算进制转换的计算器
2020/10/19 jQuery
Vue包大小优化的实现(从1.72M到94K)
2021/02/18 Vue.js
Python实现Linux下守护进程的编写方法
2014/08/22 Python
python网络编程调用recv函数完整接收数据的三种方法
2017/03/31 Python
python3 判断列表是一个空列表的方法
2018/05/04 Python
解决Django的request.POST获取不到内容的问题
2018/05/28 Python
django 实现编写控制登录和访问权限控制的中间件方法
2019/01/15 Python
英国建筑用品在线:Building Supplies Online(BSO)
2018/04/30 全球购物
基层党组织公开承诺书
2014/03/28 职场文书
初中生300字旷课检讨书
2014/11/19 职场文书
2015年手术室工作总结
2015/05/11 职场文书
服务行业标语口号
2015/12/26 职场文书
python实现学生信息管理系统(面向对象)
2022/06/05 Python
mysqldump进行数据备份详解
2022/07/15 MySQL
源码安装apache脚本部署过程详解
2022/09/23 Servers