jQuery实现仿Alipay支付宝首页全屏焦点图切换特效

这篇文章主要介绍了jQuery实现仿Alipay支付宝首页全屏焦点图切换特效,涉及jQuery插件jquery.kinMaxShow的相关使用技巧,非常具有实用价值,需要的朋友可以参考下

本文实例讲述了jQuery实现仿Alipay支付宝首页全屏焦点图切换特效。分享给大家供大家参考。具体实现方法如下：

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
3. <html xmlns="http://www.w3.org/1999/xhtml"> 
4. <head> 
5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
6. <title>kinMaxShow 扩展效果</title> 
7. <link type="text/css" href="_doc/base.css" rel="stylesheet" /> 
8. <style type="text/css">  
9. body{ margin:0; padding:0;} 
10. #Login{ position:relative;} 
11. #loginPlane{ 
12. position:absolute;width:100%; 
13. height:330px; top:0; 
14. left:0;z-index:88; 
15. } 
16. #loginWrap{ 
17. width:960px;margin:0 auto; 
18. padding-top:20px; 
19. } 
20. #loginBox{ 
21. width:286px;height:330px; 
22. filter:progid:DXImageTransform.Microsoft.gradient( 
23. startcolorstr=#88000000,endcolorstr=#88000000); 
24. background:rgba(0,0,0,0.2); 
25. float:right; margin-right:20px; 
26. } 
27. #loginBox h3{ 
28. border-bottom:1px solid #ccc; 
29. margin:10px; color:#fff; 
30. font-weight:normal; font-size:16px; 
31. line-height:26px; 
32. } 
33. #loginBox form{ 
34. color:#fff; font-size:12px; 
35. padding:8px 0 0 20px 
36. } 
37. #loginBox .text{ 
38. padding:4px;border:1px solid; 
39. border-color:#aaa #ddd #ddd #aaa; 
40. height:20px; width:230px; 
41. font-family:Verdana 
42. } 
43. #loginBox .submit{ 
44. color:#fff; border:0; 
45. background:#FFA600;width:236px; 
46. height:35px; font-weight:bold; 
47. font-family:"Microsoft Yahei"; 
48. font-size:14px; 
49. } 
50. #kinMaxShow{ display:none;} 
51. #kinMaxShow .sub_1_1{ 
52. display:block; position:absolute;left:110px; top:136px; 
53. } 
54. #kinMaxShow .sub_1_2{ 
55. display:block; position:absolute;left:110px; top:120px; 
56. } 
57. #kinMaxShow .sub_2_1{ 
58. display:block; position:absolute;left:-160px; bottom:0px; 
59. } 
60. #kinMaxShow .sub_2_2{ 
61. display:block; position:absolute;left:110px; top:20px; 
62. } 
63. #kinMaxShow .sub_3_1{ 
64. display:block; position:absolute;right:180px; bottom:0px; 
65. } 
66. #kinMaxShow .sub_3_2{ 
67. display:block; position:absolute;left:30px; top:40px; 
68. } 
69. </style> 
70. <script src="js/jquery-1.10.2.min.js" type="text/javascript"></script> 
71. <script src="js/jquery.kinMaxShow-1.1.min.js" 
72. type="text/javascript"></script> 
73. <script type="text/javascript">  
74. $(function(){ 
75. $("#kinMaxShow").kinMaxShow({ 
76. height:400, 
77. button:{ 
78. showIndex:false, 
79. normal:{background:'url(images/button.png) no-repeat -14px 0', 
80. marginRight:'8px',border:'0',right:'44%',bottom:'20px' 
81. }, 
82. focus:{background:'url(images/button.png) no-repeat 0 0', 
83. border:'0' 
84. } 
85. }, 
86. callback:function(index,action){ 
87. switch(index){ 
88. case 0 : 
89. if(action=='fadeIn'){ 
90. $(this).find('.sub_1_1').animate({left:'70px'},600) 
91. $(this).find('.sub_1_2').animate({top:'60px'},600) 
92. }else{ 
93. $(this).find('.sub_1_1').animate({left:'110px'},600) 
94. $(this).find('.sub_1_2').animate({top:'120px'},600) 
95. }; 
96. break; 
97. case 1 : 
98. if(action=='fadeIn'){ 
99. $(this).find('.sub_2_1').animate({left:'-100px'},600) 
100. $(this).find('.sub_2_2').animate({top:'60px'},600) 
101. }else{ 
102. $(this).find('.sub_2_1').animate({left:'-160px'},600)  
103. $(this).find('.sub_2_2').animate({top:'20px'},600) 
104. }; 
105. break; 
106. case 2 : 
107. if(action=='fadeIn'){ 
108. $(this).find('.sub_3_1').animate({right:'350px'},600) 
109. $(this).find('.sub_3_2').animate({left:'180px'},600) 
110. }else{ 
111. $(this).find('.sub_3_1').animate({right:'180px'},600)  
112. $(this).find('.sub_3_2').animate({left:'30px'},600) 
113. }; 
114. break;  
115. } 
116. } 
117. }); 
118. }); 
119. </script> 
120. </head> 
121. <body> 
122. <div id="Login">  
123. <div id="kinMaxShow"> 
124. <div> 
125. <img src="images/1.jpg" /> 
126. <div> 
127. <img class="sub_1_1" src="images/sub_1_1.png" /> 
128. <img class="sub_1_2" src="images/sub_1_2.png" 
129. usemap="#Map_1_2" border="0" /> 
130. <map name="Map_1_2" id="Map_1_2"> 
131. <area shape="rect" coords="2,96,106,123" 
132. href="http://www.vevb.com" target="_blank"/> 
133. </map> 
134. </div> 
135. </div> 
136. <div> 
137. <img src="images/2.jpg" /> 
138. <div> 
139. <img class="sub_2_1" src="images/sub_2_1.png" /> 
140. <img class="sub_2_2" src="images/sub_2_2.png" 
141. usemap="#Map_2_2" border="0" /> 
142. <map name="Map_2_2" id="Map_2_2"> 
143. <area shape="rect" coords="3,97,104,124" 
144. href="http://www.vevb.com" target="_blank"/> 
145. </map>  
146. </div>  
147. </div> 
148. <div> 
149. <img src="images/3.jpg" /> 
150. <div> 
151. <img class="sub_3_1" src="images/sub_3_1.png" /> 
152. <img class="sub_3_2" src="images/sub_3_2.png" 
153. usemap="#Map_3_2" border="0" /> 
154. <map name="Map_3_2" id="Map_3_2"> 
155. <area shape="rect" coords="1,98,106,124" 
156. href="http://www.vevb.com" target="_blank"/> 
157. </map>  
158. </div> 
159. </div> 
160. </div> 
161. <div id="loginPlane"> 
162. <div id="loginWrap"> 
163. <div id="loginBox"> 
164. <h3>登陆支付宝</h3> 
165. <form> 
166. <label>账户名：</label> 
167. <p><input type="text" class="text" /></p> 
168. <label>登陆密码：</label> 
169. <p><input type="password" class="text" /></p>  
170. <br /> 
171. <p><input type="button" value=" 登 陆 " class="submit" /></p>  
172. </form> 
173. </div> 
174. </div> 
175. </div> 
176. </div> 
177. </body> 
178. </html> 

jquery.kinMaxShow-1.1.min.js点击此处本站下载。

希望本文所述对大家的jQuery程序设计有所帮助。