第25款插件:execute 鼠标移动到图片上，图片就会弹起的插件(仿苹果界面)

描述： 当鼠标移动到图片上，图片就会弹起。一种是阴影式的，一种是倒影式的！
兼容浏览器： IE7+/Firefox/Google Chrome
官方链接： http://www.adrianpelletier.com/2 ... ect-with-jquery-ui/
JS下载： http://ijquery.360sites.cn/js/execute.js
预览： http://ijquery.360sites.cn/demo/execute打包下载： http://ijquery.360sites.cn/demo/execute/execute.zip参数说明： 无
图片展示：

JS引用代码：

1. <script type="text/javascript" charset="utf-8" src="http://ijquery.360sites.cn/js/jquery-1.3.2.min.js"></script>
   
2. <script type="text/javascript" charset="utf-8" src="http://ijquery.360sites.cn/js/execute.js"></script>

复制代码

HTML代码：

1. <h2>Reflection-倒影</h2>
   
2. <ul id="nav-reflection">
   
3.         <li class="button-color-1"><a href="#" title=""></a></li>
   
4.         <li class="button-color-2"><a href="#" title=""></a></li>
   
5.         <li class="button-color-3"><a href="#" title=""></a></li>
   
6.         <li class="button-color-4"><a href="#" title=""></a></li>
   
7. </ul>
   
8. 
   
9. <h2>Shadow-阴影</h2>
   
10. <ul id="nav-shadow">
    
11.         <li class="button-color-1"><a href="#" title=""></a></li>
    
12.         <li class="button-color-2"><a href="#" title=""></a></li>
    
13.         <li class="button-color-3"><a href="#" title=""></a></li>
    
14.         <li class="button-color-4"><a href="#" title=""></a></li>
    
15. </ul>

复制代码

CSS代码：

1. <link rel="stylesheet" type="text/css" href="css/screen.css" media="all" />

复制代码

即：

1. #nav-reflection {
   
2.         margin: 0 auto 50px auto;
   
3.         padding: 50px 0 0 172px;
   
4.         width: 452px;
   
5.         min-height: 130px;
   
6.         list-style: none;
   
7. }
   
8. 
   
9. #nav-reflection li {
   
10.         margin-right: 15px;
    
11.         width: 59px;
    
12.         float: left;
    
13. }
    
14. 
    
15. #nav-reflection a, #nav-reflection a:visited, #nav-reflection a:hover {
    
16.         width: 59px;
    
17.         height: 59px;
    
18.         text-indent: -9999px;
    
19.         overflow: hidden;
    
20.         background: url(../images/icons.png) no-repeat;
    
21.         display: block;
    
22. }
    
23. 
    
24. #nav-reflection span {
    
25.         margin-top: 1px;
    
26.         width: 59px;
    
27.         height: 34px;
    
28.         text-align: center;
    
29.         background: url(../images/icons-reflections.jpg) no-repeat;
    
30.         display: block;
    
31. }
    
32. 
    
33. /* Button Colors */
    
34. 
    
35. #nav-reflection li.button-color-1 a {
    
36.         background-position: -3px -3px;
    
37. }
    
38. 
    
39. #nav-reflection li.button-color-2 a {
    
40.         background-position: -92px -3px;
    
41. }
    
42. 
    
43. #nav-reflection li.button-color-3 a {
    
44.         background-position: -181px -3px;
    
45. }
    
46. 
    
47. #nav-reflection li.button-color-4 a {
    
48.         background-position: -270px -3px;
    
49. }
    
50. 
    
51. /* Button Reflection Color */
    
52. 
    
53. #nav-reflection li.button-color-1 span {
    
54.         background-position: 0 0;
    
55. }
    
56. 
    
57. #nav-reflection li.button-color-2 span {
    
58.         background-position: -89px 0;
    
59. }
    
60. 
    
61. #nav-reflection li.button-color-3 span {
    
62.         background-position: -178px 0;
    
63. }
    
64. 
    
65. #nav-reflection li.button-color-4 span {
    
66.         background-position: -267px 0;
    
67. }
    
68. 
    
69. 
    
70. /* =Shadow Nav
    
71. -------------------------------------------------------------------------- */
    
72. 
    
73. #nav-shadow {
    
74.         margin: 0 auto 50px auto;
    
75.         padding: 50px 0 0 127px;
    
76.         width: 497px;
    
77.         min-height: 130px;
    
78.         text-align: center;
    
79.         list-style: none;
    
80. }
    
81. 
    
82. #nav-shadow li {
    
83.         margin-right: 15px;
    
84.         width: 81px;
    
85.         height: 72px;
    
86.         position: relative;
    
87.         float: left;
    
88. }
    
89. 
    
90. #nav-shadow a, #nav-shadow a:visited, #nav-shadow a, #nav-shadow a:hover {
    
91.         margin: 0 auto;
    
92.         width: 59px;
    
93.         height: 59px;
    
94.         text-indent: -9999px;
    
95.         overflow: hidden;
    
96.         background: url(../images/icons.png) no-repeat;
    
97.         display: block;
    
98.         position: relative;
    
99.         z-index: 2;
    
100. }
     
101. 
     
102. /* Button Colors */
     
103. 
     
104. #nav-shadow li.button-color-1 a {
     
105.         background-position: -3px -3px;
     
106. }
     
107. 
     
108. #nav-shadow li.button-color-2 a {
     
109.         background-position: -92px -3px;
     
110. }
     
111. 
     
112. #nav-shadow li.button-color-3 a {
     
113.         background-position: -181px -3px;
     
114. }
     
115. 
     
116. #nav-shadow li.button-color-4 a {
     
117.         background-position: -270px -3px;
     
118. }
     
119. 
     
120. /* Button Shadow */
     
121. 
     
122. #nav-shadow li img.shadow {
     
123.         margin: 0 auto;
     
124.         position: absolute;
     
125.         bottom: 0;
     
126.         left: 0;
     
127.         z-index: 1;
     
128. }
     

复制代码

[转] http://ijquery.360sites.cn/forum.php?mod=viewthread&tid=25