jquery+css3實現會動的小圓圈效果_jquery
- WBOY原創
- 2016-05-16 15:17:332074瀏覽
本文實例講述了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程式設計有所幫助。陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn