萬盛學電腦網

 萬盛學電腦網 >> 腳本專題 >> 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
copyright © 萬盛學電腦網 all rights reserved