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特效相关内容感兴趣的读者可查看本站专题：《jQuery常见经典特效汇总》及《jQuery动画与特效用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
相关推荐
-
jQuery Uploadify 上传插件出现Http Error 302 错误的解决办法
前段时间介绍过jquery uploadify上传插件的使用方法,我在使用中遇到过Http Error 302错误问题,应该会有很多人在使用中遇到过,在此记录下来: 首先http 302是请求被重定向的意思,这就很容易理解了,如果你的uploadify处理上传脚本有session验证,就会出现此错误,因为flash在执行post请求的时候没有包含cookie信息,而服务器的session会根据客户端的cookie来得到SESSIONID.没有提交cookie自然就不能获取到session,然后u
-
jQuery仅用3行代码实现的显示与隐藏功能完整实例
本文实例讲述了jQuery仅用3行代码实现的显示与隐藏功能.分享给大家供大家参考.具体如下: jQuery技术相当好使用,的确可以用很少的代码实现想要的功能,比如这款经常用到的"显示"与"隐藏"的功能,只需要3行代码就实现了,确实够给力. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-simple-hide-show-style-demo/ 具体代码如下: <!doctype html>
-
基于jQuery和CSS3制作响应式水平时间轴附源码下载
我们经常看到有很多的垂直时间轴用来记录事件进展,而有朋友问我要求分享水平的时间轴,其实水平时间轴的难点在于自适应屏幕尺寸.那么 今天我要给大家分享的是一款支持响应式.支持触屏手势滑动的水平时间轴. 效果展示 源码下载 HTML 我们的HTML结构由两部分组成,div.timeline用于放置日期导航水平线,它有水平多个日期div.events-wrapper和水平轴左右方向导航按钮ul.cd-timeline-navigation组成.而div.events-content放置的是多个日
-
jQuery 3.0 的变化及使用方法
jQuery ,是迄今为止世界上最流行的 JavaScript 库,一直是我们这些 Web 开发者的神器.自从它在 2006 年发布最初版本直到如今,已经有非常多的 Web 开发者在项目中引入了这个优秀的库来使开发工作变得更轻松. 时隔 3 个月,jQuery 团队终于发布了 3.0 Alpha 版本.有两个版本 jQuery compat 3.0 和 jQuery 3.0. •jQuery compat 3.0 对应之前的 1.x, 兼容更多的浏览器,对于IE支持到 8.0 版本 •jQuer
-
jQuery+CSS3折叠卡片式下拉列表框实现效果
jQuery下拉列表框特效将每一个列表项都制作为卡片的样式,打开和关闭它有打开和关闭百叶窗的感觉,效果非常不错,分享给大家. 简要教程 HTML结构 该下拉列表框特效的列表项使用一个无序列表来制作,用于切换打开和关闭状态的元素是一个超链接元素. <div class="container"> <div class="card-drop"> <a class='toggle' href="#"> <i cl
-
即将发布的jQuery 3 有哪些新特性
jQuery 的横空出世,至今已有十个年头了,而它的长盛不衰显然不是没有理由的.jQuery是继prototype之后又一个优秀的Javascript库.它是轻量级的js库 ,它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+),jQuery2.0及后续版本将不再支持IE6/7/8浏览器.jQuery使用户能更方便地处理HTML(标准通用标记语言下的一个应用).events.实现动画效果,并且方便地为网站提供AJAX交互.jQue
-
解决jQuery上传插件Uploadify出现Http Error 302错误的方法
之前介绍过jquery uploadify上传插件的使用方法,我在使用中遇到过Http Error 302错误问题,应该会有很多人在使用中遇到过,在此记录下来: 首先http 302是请求被重定向的意思,这就很容易理解了,如果你的uploadify处理上传脚本有session验证,就会出现此错误,因为flash在执行post请求的时候没有包含cookie信息,而服务器的session会根据客户端的cookie来得到SESSIONID.没有提交cookie自然就不能获取到session,然后upl
-
酷炫jQuery全屏3D焦点图动画效果
这又是一款很不错的jQuery焦点图动画,它的特点是整个焦点图基本是全屏显示的,非常大气,而且图片的倾斜也给整个焦点图3D立体的视觉效果,而且焦点图的图片切换非常流畅,相当实用. HTML代码: <div class="wrapper"> </div> <div id="pxs_container" class="pxs_container"> <div class="pxs_bg"&
-
程序员必知35个jQuery 代码片段
jQuery如今已经成为Web开发中最流行的JavaScript库,通过jQuery和大量的插件,你可以轻松实现各种绚丽的效果.本文将为你介绍一些jquery实用的技巧,希望可以帮助你更加高效地使用jQuery. 收集的35个 jQuery 小技巧/代码片段,可以帮你快速开发. 1. 禁止右键点击 $(document).ready(function(){ $(document).bind("contextmenu",function(e){ return false; }); });
-
使用jquery+CSS3实现仿windows10开始菜单的下拉导航菜单特效
这是一款仿windows10开始菜单的下拉导航菜单特效.该下拉菜单使用jQuery和CSS3来完成类似windows10开始菜单样式效果,它的代码简洁,效果非常时尚. 查看演示 源码下载 该下拉菜单的HTML结构非常简单,基本的HTML结构如下: <div id="top-bar" class="top-bar"> <div class="bar"> <button id="navbox-trig