jQuery实现仿Google首页拖动效果的方法

这篇文章主要介绍了jQuery实现仿Google首页拖动效果的方法,涉及jQuery操作鼠标事件及div层的相关技巧,非常具有实用价值,需要的朋友可以参考下

本文实例讲述了jQuery实现仿Google首页拖动效果的方法。分享给大家供大家参考。具体如下：

这里用jQuery.js库写了一个仿Google首页拖动的特效代码

1. <!DOCTYPE html> 
2. <html> 
3. <head> 
4. <meta http-equiv="content-type" content="text/html; charset=utf-8"/> 
5. <title>用JQUERY实现的仿Google首页拖动特效</title> 
6. <style type="text/css"> 
7. #div_width{ 
8. width:98%; 
9. margin:0 auto; 
10. } 
11. *{ 
12. margin:0px; 
13. padding:0px; 
14. } 
15. #div_left,#div_right,#div_center{ 
16. float:left; 
17. width:28%; 
18. height:900px; 
19. margin:0 3px; 
20. } 
21. #div_center{ 
22. width:38%; 
23. } 
24. .can_move{ 
25. border:1px solid blue; 
26. width:100%; 
27. margin:5px 0; 
28. min-height:150px; 
29. } 
30. .center_width{ 
31. height:200px; 
32. } 
33. p{ 
34. height:30px; 
35. color:#fff; 
36. line-height:30px; 
37. background:#000; 
38. cursor:move; 
39. } 
40. #xuxian{ /*虚线框*/ 
41. border:1px dashed #000; 
42. margin:5px 0; 
43. } 
44. </style> 
45. <script src="js/jquery.js"></script> 
46. <script> 
47. //<![CDATA[ 
48. window.onload=function(){ 
49. var mouse_down=false; //鼠标时候按下 
50. var x_old=null; //按下鼠标时鼠标的坐标 
51. var y_old=null; 
52. var div_move=null; //正在移动的div 
53. var div_move_width=null; //正在移动的div的宽 
54. var div_move_height=null; //正在移动的div的高 
55. var xuxian="<div id='xuxian'></div>"; //虚线框 
56. document.oncontextmenu=new Function('event.returnValue=false;'); 
57. //禁止右键 
58. document.onselectstart=new Function('event.returnValue=false;'); 
59. //禁止选中 
60. //当鼠标按下的时候 
61. $("p").mousedown(function(e){ 
62. mouse_down=true; //鼠标按下 
63. div_move=$(this).parent(); //指定当前div为正在移动的div 
64. div_move_width=div_move.width(); 
65. div_move_height=div_move.height(); 
66. x_old=e.pageX-$(this).offset().left; //获取鼠标坐标 
67. y_old=e.pageY-$(this).offset().top; 
68. //把当前div的position改成absolute 
69. div_move.css({ 
70. position:'absolute', 
71. zIndex:'10', 
72. width:div_move_width, 
73. height:div_move_height, 
74. top:div_move.offset().top, 
75. left:div_move.offset().left 
76. }); 
77. //将虚线框添加到正在移动的div之前的位置 
78. div_move.before(xuxian); 
79. $("#xuxian").css({ 
80. width:'100%', 
81. height:div_move_height 
82. }); 
83. }); 
84. //移动鼠标 
85. $(document).mousemove(function(e){ 
86. if(!mouse_down) return false; 
87. var _x=e.pageX; 
88. var _y=e.pageY; 
89. var div_right_div=$("#div_right>div").not(div_move).not("#xuxian"); 
90. div_move.css({ //改变正在移动div的top和left 
91. top:_y-y_old, 
92. left:_x-x_old 
93. }); 
94. /*注意,因为鼠标当前始终在正在移动的div上面, 
95. 所以,鼠标移动不会触发其他元素的mouseenter,mouseleave,mouseover 
96. 和mouseout事件,要想达到同样的效果, 
97. 只能根据鼠标的坐标来判断鼠标是否进入其他元素*/ 
98. var left_left=$("#div_left").offset().left; 
99. //确定左边div_left容器的位置 
100. var left_width=$("#div_left").width(); 
101. var right_left=$("#div_right").offset().left; 
102. //确定右边div_right容器的位置 
103. var right_width=$("#div_right").width(); 
104. var center_left=$("#div_center").offset().left; 
105. //确定中间div_center容器的位置 
106. var center_width=$("#div_center").width(); 
107. //判断鼠标坐标是否进入左边div_left容器 
108. if(_x>left_left&&_x<(left_left+left_width)){ 
109. /*选定左边div_left容器下的最后一个可移动div, 
110. 不包含当前正在移动的div元素和虚线框*/ 
111. var div_left_last=$("#div_left>div").not(div_move).not("#xuxian").filter(":last"); 
112. if(div_left_last.length>=1){ 
113. //判断时候左边div_left容器下时候有可移动div元素 
114. if(_y>(div_left_last.offset().top+div_left_last.height())){ 
115. //判断鼠标是否在左边div_left容器最后一个元素的下边 
116. $("#xuxian").remove(); //如果是,移除之前添加的虚线框 
117. div_left_last.after(xuxian); 
118. //把虚线框添加为左边div_left容器的最后一个子元素 
119. $("#xuxian").css({ //设定虚线框的高和宽 
120. width:'100%', 
121. height:div_move_height 
122. }); 
123. }else{ 
124. //如果鼠标不在左边div_left容器最后一个元素的下边, 
125. //那么,循环判定鼠标是否进入左边div_left容器下的可移动div元素里面 
126. var div_left_div=$("#div_left>div").not(div_move).not("#xuxian"); 
127. for(var i=0;i<div_left_div.length;i++){ 
128. if(_y>div_left_div.eq(i).offset().top&&(_y<div_left_div.eq(i).offset().top+div_left_div.eq(i).height())){ 
129. $("#xuxian").remove(); 
130. //如果是,删除之前添加的虚线框 
131. div_left_div.eq(i).before(xuxian); 
132. //把虚线框添加到当前鼠标进入的div元素的前面 
133. $("#xuxian").css({ //设定虚线框的高和宽 
134. width:'100%', 
135. height:div_move_height 
136. }); 
137. break; //退出循环 
138. } 
139. } 
140. } 
141. }else{//如果左边div_left容器下面没有任何可移动div元素 
142. var div_left_div=$("#div_left>div").not(div_move).not("#xuxian"); 
143. if(div_left_div.length==0){ 
144. $("#xuxian").remove(); //移除之前添加的虚线框 
145. $("#div_left").append(xuxian); 
146. //把虚线框添加为左边div_left容器的子元素 
147. $("#xuxian").css({ 
148. width:'100%', 
149. height:div_move_height 
150. }); 
151. } 
152. } 
153. }else if(_x>center_left&&_x<(center_left+center_width)){ 
154. //判断鼠标是否进入中间div_center容器 
155. /*选定中间div_center容器下的最后一个可移动div, 
156. 不包含当前正在移动的div元素和虚线框*/ 
157. var div_center_last=$("#div_center>div").not(div_move).not("#xuxian").filter(":last"); 
158. if(div_center_last.length>=1){ 
159. //判断中间div_center容器的下面时候有可移动div子元素 
160. if(_y>(div_center_last.offset().top+div_center_last.height())){ 
161. //判断鼠标是否在中间div_center容器的最后一个可移动div子元素的下边 
162. $("#xuxian").remove(); 
163. //如果是,删除之前添加的虚线框 
164. div_center_last.after(xuxian); 
165. //把虚线框添加为中间div_center容器的最后一个div子元素 
166. $("#xuxian").css({ //设定虚线框的宽和高 
167. width:'100%', 
168. height:div_move_height 
169. }); 
170. }else{ 
171. //如果鼠标不在中间div_center容器最后一个可移动div子元素的下边, 
172. //则循环判断鼠标进入的是哪一个iv子元素 
173. var div_center_div=$("#div_center>div").not(div_move).not("#xuxian"); 
174. for(var i=0;i<div_center_div.length;i++){ 
175. if(_y>div_center_div.eq(i).offset().top&&(_y<div_center_div.eq(i).offset().top+div_center_div.eq(i).height())){ 
176. $("#xuxian").remove(); 
177. //找到鼠标进入的div子元素,删除之前添加的虚线框 
178. div_center_div.eq(i).before(xuxian); 
179. //把虚线框添加到当前鼠标进入的div子元素的前面 
180. $("#xuxian").css({ 
181. //设定虚线框的宽度和高度 
182. width:'100%', 
183. height:div_move_height 
184. }); 
185. break; //退出循环 
186. } 
187. } 
188. } 
189. }else{ 
190. //如果中间div_center容器的中间没有可移动的div子元素 
191. var div_center_div=$("#div_center>div").not(div_move).not("#xuxian");  
192. if(div_center_div.length==0){ 
193. $("#xuxian").remove(); 
194. //删除之前添加的虚线框 
195. $("#div_center").append(xuxian); 
196. //把虚线框添加为中间div_center的最后一个div元素 
197. $("#xuxian").css({ 
198. width:'100%', 
199. height:div_move_height 
200. }); 
201. } 
202. } 
203. }else if(_x>right_left&&_x<(right_left+right_width)){ 
204. //判断鼠标是否进入右边div_right容器 
205. /*选定右边div_right容器下的最后一个可移动div, 
206. 不包含当前正在移动的div元素和虚线框*/ 
207. var div_right_last=$("#div_right>div").not(div_move).not("#xuxian").filter(":last"); 
208. if(div_right_last.length>=1){ 
209. //判断右边div_right容器下边是否有可移动的div子元素 
210. if(_y>(div_right_last.offset().top+div_right_last.height())){ 
211. //判断鼠标时候在右边div_right容器最后一个可移动div元素的下边 
212. $("#xuxian").remove(); 
213. //如果是,删除之前添加的虚线框 
214. div_right_last.after(xuxian); 
215. //添加虚线框为右边div_right容器的最后一个元素 
216. $("#xuxian").css({ 
217. //设定虚线框的宽和高 
218. width:'100%', 
219. height:div_move_height 
220. }); 
221. }else{ 
222. //如果鼠标不在右边div_right容器最后一个可移动div元素的下边, 
223. //则循环判断鼠标进入到右边div_right容器下哪个可移动div元素里面 
224. for(var i=0;i<div_right_div.length;i++){ 
225. if(_y>div_right_div.eq(i).offset().top&&(_y<div_right_div.eq(i).offset().top+div_right_div.eq(i).height())){ 
226. $("#xuxian").remove(); 
227. //找到鼠标进入的div元素,删除之前添加的虚线框 
228. div_right_div.eq(i).before(xuxian); 
229. //把虚线框添加到鼠标进入的div元素的前面 
230. $("#xuxian").css({ 
231. //设定宽和高 
232. width:'100%', 
233. height:div_move_height 
234. }); 
235. break; 
236. //退出循环 
237. } 
238. } 
239. } 
240. }else{ 
241. //如果右边div_right元素的下边没有可移动的div子元素 
242. if(div_right_div.length==0){ 
243. $("#xuxian").remove(); 
244. //删除之前添加的虚线框 
245. $("#div_right").append(xuxian); 
246. //把虚线框添加为右边div_right容器的子元素 
247. $("#xuxian").css({ 
248. //设定虚线框的宽和高 
249. width:'100%', 
250. height:div_move_height 
251. }); 
252. } 
253. } 
254. } 
255. }).mouseup(function(){ 
256. mouse_down=false; //鼠标松开 
257. $("#xuxian").before(div_move); 
258. //将当前正在移动的div元素添加到虚线框的前面 
259. div_move.css({ 
260. //更改正在移动div元素的position和宽 
261. position:'static', 
262. width:'100%' 
263. }); 
264. $("#xuxian").remove(); 
265. //删除虚线框 
266. return false; 
267. }); 
268. } 
269. //]]> 
270. </script> 
271. </head> 
272. <body> 
273. <div id="div_width"> 
274. <div id="div_left"> 
275. <div class="can_move"> 
276. <p>音乐</p> 
277. </div> 
278. <div class="can_move"> 
279. <p>活动</p> 
280. </div> 
281. </div> 
282. <div id="div_center"> 
283. <div class="can_move center_width"> 
284. <p>科技</p> 
285. </div> 
286. </div> 
287. <div id="div_right"> 
288. <div class="can_move"> 
289. <p>新闻</p> 
290. </div> 
291. <div class="can_move"> 
292. <p>元素</p> 
293. </div> 
294. </div> 
295. </div> 
296. </body> 
297. </html> 

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