Kwicks for JQuery详细案例

最新推荐文章于 2020-08-01 17:18:55 发布

weixin_30375427

最新推荐文章于 2020-08-01 17:18:55 发布

阅读量185

点赞数

文章标签： xhtml javascript php ViewUI

原文链接：http://www.cnblogs.com/jshoukun/archive/2012/02/07/2341674.html

版权

　　在国外的一个网站里面整理出来一款实用的JQuery，可以实现鼠标滑过，渐渐展开等功能。

　　案例展示效果：http://www.jeremymartin.name/examples/kwicks.php?example=6

　　详细代码：

完整代码

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 5 <title>example-6</title>
 6 <script src="js/jquery-1.2.6.min.js" type="text/javascript"></script>
 7 <script src="js/jquery.easing.1.3.js" type="text/javascript"></script>
 8 <script src="js/jquery.kwicks-1.5.1.pack.js" type="text/javascript"></script>
 9 <style type="text/css">
10 body {
11     background-color: #1d1e21;
12     padding: 50px;
13 }
14 .kwicks {  
15     list-style: none;  
16     position: relative;  
17     margin: 0;  
18     padding: 0;  
19 }
20 .kwicks li {  
21     float: left;  
22     width: 125px;  
23     height: 100px;  
24     margin-right: 5px;  
25 }  
26 #kwick1 {   
27     background-color: #53b388;  
28 }  
29 #kwick2 {  
30     background-color: #5a69a9;  
31 }  
32 #kwick3 {  
33     background-color: #c26468;  
34 }  
35 #kwick4 {   
36     background-color: #bf7cc7;  
37     margin-right: 0px;  
38 }
39 </style>
40 <script type="text/javascript">
41     $().ready(function() {
42     $('.kwicks').kwicks({
43         max: 320,  
44         spacing: 5,  
45         duration: 1500,  
46         easing: 'easeOutBounce'  
47     });  
48 });
49 </script>
50 </head>
51 
52 <body>
53 <ul class="kwicks">  
54     <li id="kwick1"></li>  
55     <li id="kwick2"></li>  
56     <li id="kwick3"></li>  
57     <li id="kwick4"></li>  
58 </ul>
59 </body>
60 </html>