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获取select的value和text值的简单实例
Feb 26 Javascript
Node.js安装教程和NPM包管理器使用详解
Aug 16 Javascript
JavaScript实现的链表数据结构实例
Apr 02 Javascript
Bootstrap页面布局基础知识全面解析
Jun 13 Javascript
jQuery+CSS3实现四种应用广泛的导航条制作实例详解
Sep 17 Javascript
微信小程序删除处理详解
Aug 16 Javascript
浅谈在koa2中实现页面渲染的全局数据
Oct 09 Javascript
Vue用v-for给循环标签自身属性添加属性值的方法
Oct 18 Javascript
小程序实现左滑删除功能
Oct 30 Javascript
实例分析Array.from(arr)与[...arr]到底有何不同
Apr 09 Javascript
js消除图片小游戏代码
Dec 11 Javascript
Vue路由切换页面不更新问题解决方案
Jul 10 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压缩html网页代码(清除空格,换行符,制表符,注释标记)
2012/04/02 PHP
改变javascript函数内部this指针指向的三种方法
2010/04/23 Javascript
jQuery 选择表格(table)里的行和列及改变简单样式
2012/12/15 Javascript
jquery实现点击展开列表同时隐藏其他列表
2015/08/10 Javascript
Svg.js实例教程及使用手册详解(一)
2016/05/16 Javascript
基于JS实现无缝滚动思路及代码分享
2016/06/07 Javascript
Bootstrap fileinput组件封装及使用详解
2017/03/10 Javascript
JavaScript实现三级联动菜单效果
2017/08/16 Javascript
JS动态添加的div点击跳转到另一页面实现代码
2017/09/30 Javascript
vue中配置mint-ui报css错误问题的解决方法
2017/10/11 Javascript
JS实现音乐导航特效
2020/01/06 Javascript
python遍历文件夹并删除特定格式文件的示例
2014/03/05 Python
python实现简单神经网络算法
2018/03/10 Python
Python读取txt文件数据的方法(用于接口自动化参数化数据)
2018/06/27 Python
python 定时器,轮询定时器的实例
2019/02/20 Python
Python之修改图片像素值的方法
2019/07/03 Python
Python的matplotlib绘图如何修改背景颜色的实现
2019/07/16 Python
利用keras加载训练好的.H5文件,并实现预测图片
2020/01/24 Python
在PyCharm中实现添加快捷模块
2020/02/12 Python
python gui开发——制作抖音无水印视频下载工具(附源码)
2021/02/07 Python
CSS3 Columns分列式布局方法简介
2014/05/03 HTML / CSS
html5+svg学习指南之SVG基础知识
2014/12/17 HTML / CSS
HTML5+Canvas+CSS3实现齐天大圣孙悟空腾云驾雾效果
2016/04/26 HTML / CSS
美国电子元器件分销商:Newark element14
2018/01/13 全球购物
老板电器官方购物商城:老板油烟机、燃气灶、消毒柜、电烤箱
2018/05/30 全球购物
Seavenger官网:潜水服、浮潜、靴子和袜子
2020/03/05 全球购物
size?法国官网:英国伦敦的球鞋精品店
2020/03/15 全球购物
软件设计的目标是什么
2016/12/04 面试题
个人简历中的自我评价范例
2013/10/29 职场文书
教师师德反思材料
2014/02/15 职场文书
外国人聘用意向书
2014/04/01 职场文书
2014年设备管理工作总结
2014/11/26 职场文书
2014年政教处工作总结
2014/12/20 职场文书
2015年学校体育工作总结
2015/04/22 职场文书
小程序后台PHP版本部署运行 LNMP+WNMP
2021/04/01 Servers
Pytest allure 命令行参数的使用
2021/04/18 Python