javascript实现的图片切割多块效果实例

这篇文章主要介绍了javascript实现的图片切割多块效果,涉及javascript操作图片及css样式的技巧,需要的朋友可以参考下

本文实例讲述了javascript实现的图片切割多块效果。分享给大家供大家参考。具体实现方法如下：

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru"> 
4. <head> 
5. <title></title> 
6. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
7. <style type="text/css"> 
8. .line{ 
9. display:none; 
10. z-index:1; 
11. left:0; 
12. top:0; 
13. position:absolute; 
14. } 
15. #line1{ 
16. display:block; 
17. } 
18. .container{ 
19. position:relative; 
20. width:564px; 
21. height:294px; 
22. overflow:hidden; 
23. } 
24. .border{ 
25. border:5px solid #000; 
26. } 
27. .corner{ 
28. position:absolute; 
29. width:282px; 
30. height:147px; 
31. background:#ccc; 
32. overflow:hidden; 
33. } 
34. .leftTop,.inLeftTop{ 
35. position:absolute; 
36. left:0; 
37. top:0; 
38. right:auto; 
39. bottom:auto; 
40. } 
41. .rightTop,.inRightTop{ 
42. position:absolute; 
43. right:0; 
44. top:0; 
45. left:auto; 
46. bottom:auto; 
47. } 
48. .rightBottom,.inRightBottom{ 
49. position:absolute; 
50. right:0; 
51. bottom:0; 
52. top:auto; 
53. left:auto; 
54. } 
55. .leftBottom,.inLeftBottom{ 
56. position:absolute; 
57. left:0; 
58. bottom:0; 
59. top:auto; 
60. right:auto; 
61. } 
62. </style> 
63. </head> 
64. <body> 
65. <script src="jquery-1.6.2.min.js" type="text/javascript"></script> 
66. <script type="text/javascript"> 
67. function crossLine(container,option,callback){ 
68. var lineX=$("<div style='width:2000px;height:4px;overflow:hidden;position:absolute;background:#FACC41;left:0;top:0;z-index:1'></div>"); 
69. var lineY=$("<div style='width:4px;height:2000px;overflow:hidden;position:absolute;background:#FACC41;left:0;top:0;z-index:1'></div>"); 
70. var _option={ 
71. "display":"none", 
72. "targetPosX":container.width()/2-2, 
73. "targetPosY":container.height()/2-2, 
74. "time":500, 
75. "freq":10 
76. }; 
77. $.extend(_option,option); 
78. option=_option; 
79. var targetPosX=option.targetPosX; 
80. var targetPosY=option.targetPosY; 
81. var time=option.time; 
82. var freq=option.freq; 
83. times=time/freq; 
84. container.append(lineX).append(lineY); 
85. //开始运动 
86. var lxt=lineX.position().top; 
87. var lyl=lineY.position().left; 
88. xPerTime=targetPosX/times; 
89. yPerTime=targetPosY/times; 
90. var count=0; 
91. var si=setInterval(function(){ 
92. count++; 
93. if(count>=times){ 
94. clearInterval(si); 
95. if(typeof(callback)=="function"){ 
96. callback(); 
97. } 
98. if(option.display=="none"){ 
99. lineX.remove(); 
100. lineY.remove(); 
101. } 
102. } 
103. if(lxt+yPerTime<=targetPosY){ 
104. lxt += yPerTime; 
105. lineX.css("top",lxt); 
106. }else{ 
107. lxt=targetPosY; 
108. lineX.css("top",targetPosY); 
109. } 
110. if(lyl+xPerTime<=targetPosX){ 
111. lyl += xPerTime; 
112. lineY.css("left",lyl); 
113. }else{ 
114. lyl=targetPosX; 
115. lineY.css("left",targetPosX); 
116. } 
117. },freq); 
118. } 
119. function picSplit(line1,line2,container,option){ 
120. //begin 
121. line1.css("z-index",2); 
122. /* 
123. var targetX=282; 
124. var targetY=147; 
125. */ 
126. var _option={ 
127. "targetX":container.width()/2, 
128. "targetY":container.height()/2, 
129. "time":500, 
130. "freq":10 
131. }; 
132. $.extend(_option,option); 
133. option=_option; 
134. var targetX=option.targetX; 
135. var targetY=option.targetY; 
136. var containerWidth=container.width(); 
137. var containerHeight=container.height(); 
138. /* 
139. *复制四个，放入四个容器，置于四角，然后移动 
140. */ 
141. //div0-4 容器，放置于四角 
142. var div0=$("<div></div>").css({"position":"absolute","left":0,"top":0,"right":"auto","bottom":"auto","width":targetX,"height":targetY,"z-index":"2","overflow":"hidden"}).appendTo(container); 
143. var div1=$("<div></div>").css({"position":"absolute","left":targetX,"top":0,"right":"auto","bottom":"auto","width":containerWidth-targetX,"height":targetY,"z-index":"2","overflow":"hidden"}).appendTo(container); 
144. var div2=$("<div></div>").css({"position":"absolute","left":targetX,"top":targetY,"right":"auto","bottom":"auto","width":targetX,"height":containerHeight-targetY,"z-index":"2","overflow":"hidden"}).appendTo(container); 
145. var div3=$("<div></div>").css({"position":"absolute","left":0,"top":targetY,"right":"auto","bottom":"auto","width":targetX,"height":containerHeight-targetY,"z-index":"2","overflow":"hidden"}).appendTo(container); 
146. //tempL0-4复制出来的层 
147. var tempL0=line1.clone().css({"position":"absolute","left":0,"top":0,"right":"auto","bottom":"auto","z-index":"2"}).appendTo(div0); 
148. var tempL1=line1.clone().css({"position":"absolute","left":-targetX,"top":0,"right":"auto","bottom":"auto","z-index":"2"}).appendTo(div1); 
149. var tempL2=line1.clone().css({"position":"absolute","left":-targetX,"top":-targetY,"right":"auto","bottom":"auto","z-index":"2"}).appendTo(div2); 
150. var tempL3=line1.clone().css({"position":"absolute","left":0,"top":-targetY,"right":"auto","bottom":"auto","z-index":"2"}).appendTo(div3); 
151. line1.css("display","none"); 
152. line2.css("display","block"); 
153. //开始运动 
154. var time=option.time; 
155. var freq=option.freq; 
156. var times=time/freq; 
157. var count=0; 
158. var xLeftPerTime=3; 
159. var xRightPerTime=3; 
160. var yTopPerTime=3; 
161. var yBottomPerTime=3; 
162. var l0=div0.position().left; 
163. var t0=div0.position().top; 
164. var l1=div1.position().left; 
165. var t1=div1.position().top; 
166. var l2=div2.position().left; 
167. var t2=div2.position().top; 
168. var l3=div3.position().left; 
169. var t3=div3.position().top; 
170. var si=setInterval(function(){ 
171. count++; 
172. if(count>=times){ 
173. clearInterval(si); 
174. div0.remove(); 
175. div1.remove(); 
176. div2.remove(); 
177. div3.remove(); 
178. } 
179. l0=l0-xLeftPerTime; 
180. t0=t0-yTopPerTime; 
181. l1=l1+xRightPerTime; 
182. t1=t1-yTopPerTime; 
183. l2=l2+xRightPerTime; 
184. t2=t2+yBottomPerTime; 
185. l3=l3-xLeftPerTime; 
186. t3=t3+yBottomPerTime; 
187. div0.css("left",(l0-xLeftPerTime)+"px"); 
188. div0.css("top",(t0-yTopPerTime)+"px"); 
189. div1.css("left",(l1+xRightPerTime)+"px"); 
190. div1.css("top",(t1-yTopPerTime)+"px"); 
191. div2.css("left",(l2+xRightPerTime)+"px"); 
192. div2.css("top",(t2+yBottomPerTime)+"px"); 
193. div3.css("left",(l3-xLeftPerTime)+"px"); 
194. div3.css("top",(t3+yBottomPerTime)+"px"); 
195. },freq); 
196. } 
197. </script> 
198. <div class="container" id="container"> 
199. <div class="line" id="line1"><img src="http://static.house.sina.com.cn/apileju/cms/110819/1820432103.jpg" alt="" /></div> 
200. <div class="line" id="line2"><img src="http://static.house.sina.com.cn/apileju/cms/110819/1110183294.jpg" alt="" /></div> 
201. </div> 
202. <input type="button" value="GO" onclick="javascript:go()" /> 
203. <script type="text/javascript"> 
204. var line1=$("#line1"); 
205. var line2=$("#line2"); 
206. line1.css("display","block"); 
207. var container=$("#container"); 
208. function go(){ 
209. var option={"display":"none"}; 
210. crossLine(container,option,gopicSplit); 
211. } 
212. var container=$("#container"); 
213. function gopicSplit(){ 
214. picSplit(line1,line2,container); 
215. } 
216. </script> 
217. </body> 
218. </html> 

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