jquery+css3实现会动的小圆圈效果
更新时间：2016年01月27日 11:59:06 作者：m1870164
这篇文章主要介绍了jquery+css3实现会动的小圆圈效果,涉及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.data() 的实现方式，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-11-11
下面小编就为大家带来一篇深入理解JQuery中的事件与动画。小编觉得挺不错的，现在就分享给大家，也给大家做个参考，一起跟随小编过来看看吧2016-05-05
我原以为我对jQuery的使用还过得去，可是经过昨天的工作，我才发现，原来，我才算是刚刚入门。好吧。下面，我简单讲一下，我昨天遇到的问题以及解决方案2012-08-08
本文主要介绍了使用了CSS3立体效果的强大特效，本特效使用jQuery跟CSS3 transform来实现在用户鼠标按下拖动时，环形图片墙可以跟随鼠标进行3D旋转动画。下面跟着小编一起来看下吧2017-01-01
jquery实现获取具体时间(年月日)后3个月+1天的年月日
这篇文章主要为大家详细介绍了jquery如何实现获取具体时间(年月日)后3个月+1天的年月日,文中的示例代码讲解详细,有需要的小伙伴可以参考一下2023-11-11
jQuery分页插件示例，ajax方式的jQuery前端分页插件，其核心代码jquery.pagination.js已随示例打包，Demo中包括了5种不同的分页效果演示，全部是Ajax无刷新方式实现分页，对于搞前端开发的朋友来说，这是个值得收藏的代码特效，为以后实现无刷新分页提供方便。2015-04-04
$(function() {});是$(document).ready(function(){ })的简写，最早接触的时候也说$(document).ready(function(){ })这个函数是用来取代页面中的window.onload;但是今天发现 好像不是这样回事！是在做一个页面载入效果时发现的！2015-08-08
这篇文章主要为大家详细介绍了jquery实现轮播图特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-04-04
一张图片点击鼠标放大，再点缩小基于jquery1.8.3实现，下面有个不错的示例，感兴趣的朋友可以参考下2013-09-09
这是一个基于jQuery的效果，当鼠标在小图片上悬停时，会弹出一个大图，该大图会跟随鼠标的移动而移动2013-07-07
最新评论