jquery+css3实现会动的小圆圈效果实现会动的小圆圈效果
主要介绍了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);
}
评论0
最新资源