ホームページ >ウェブフロントエンド >jsチュートリアル >jquery+css3で小さな円を動かす効果を実現_jquery
jquery+css3で小さな円を動かす効果を実現_jquery
- WBOYオリジナル
- 2016-05-16 15:17:332086ブラウズ
この記事の例では、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 までご連絡ください。