萬盛學電腦網 >> 腳本專題 >> javascript >> jq實現果凍抖動效果
jq實現果凍抖動效果
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "1/DTD/xhtml1-transitional.dtd">
02 <html xmlns="">
03 <head>
04 <meta http-equiv=Content-Type content="text/html;charset=utf-8">
05 <script type="text/javascript"src=";></script>
06 <style type="text/css">
07 .test{
08 margin:10px 0px;
09 background-color:#7DBB00;
10 height:150px;
11 border:1px #ccc solid;
12 -moz-border-radius: 5px;
13 -khtml-border-radius: 5px;
14 -webkit-border-radius: 5px;
15 border-radius: 10px;
16 opacity:0.8;
17
18 }
19 </style>
20 </head>
21 <body style="background-color:#e8e8e8;">
22 <div style="margin:50px auto;width:900px;overflow:visible;">
23 <div id="test_01" class="test"></div>
24 <div id="test_02" class="test"></div>
25 <div id="test_03" class="test"></div>
26 <div id="test_04" class="test"></div>
27 <div id="test_05" class="test"></div>
28 <div id="test_06" class="test"></div>
29 </div>
30 <script type="text/javascript">
31 $('.test').hover(function(){
32 $(this).animate({
33 width: 920,
34 height: 170,
35 marginLeft: -20,
36 opacity:0.8
37 }, 100 ).animate({
38 width: 910,
39 height: 160,
40 marginLeft: -10,
41 opacity:0.9
42 }, 100 ).animate({
43 width: 920,
44 height: 170,
45 marginLeft: -20,
46 opacity:1
47 }, 100 )
48 },function(){
49 $(this).stop(true).animate({
50 width: 900,
51
javascript排行
程序編程推薦
相關文章
copyright © 萬盛學電腦網 all rights reserved