jQuery實作動畫效果circle實例_jquery
- WBOY原創
- 2016-05-16 15:46:331585瀏覽
本文實例講述了jQuery實作動畫效果circle的方法。分享給大家供大家參考。具體如下：
這款jQuery實現動畫效果circle，Google 的圈子特效做的很不錯，這裡模仿下，時間有限，還有一個動畫累積的問題沒有解決。當然，是基於 jQuery的，純JS 還沒有這個能力呢。有興趣的朋友可以加以完善試試。
運作效果截圖如下：
具體程式碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery 动画效果 circle</title>
<style>
body {
width:200px;
margin:0 auto;
margin-top:100px;
background:#CCC;
}
#login{
position:relative;
}
.circle_l, .circle_b {
width:148px;
height:148px;
border-radius:80px;
background:blue;
border:1px solid #FFF;
}
.circle_l {
width:138px;
height:138px;
position:absolute;
top:5px;
left:5px;
}
.circle_b {
background:lightblue;
}
</style>
<script src="jquery-1.6.2.min.js" type="text/javascript"></script>
</head>
<body>
<div id="login">
<div class="circle_b">
<div class="circle_l"></div>
</div>
</div>
<script type="text/javascript">
$(".circle_b").hover(function(){
$(this).stop().animate({width:188,height:188,marginTop:"-20",marginLeft:"-20"},500)
.css({"border-radius":"150px"});
$(".circle_l").stop().animate({marginTop:"20"},500)
},function(){
$(this).stop().animate({width:148,height:148,marginTop:"0",marginLeft:"0"},500)
.css({"border-radius":"100px"});
$(".circle_l").stop().animate({marginTop:"0"},500)
})
</script>
</body>
</html>
希望本文所述對大家的jquery程式設計有所幫助。
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn