這篇文章主要介紹了jQuery插件實現控制網頁元素動態居中顯示,實例分析了jQuery插件的實現與元素動態顯示的技巧,需要的朋友可以參考下

本文實例講述了jQuery插件實現控制網頁元素動態居中顯示的方法。分享給大家供大家參考。具體實現方法如下：

1. (function($) 
2. { 
3. $.fn._center = function(self, parent, dimension) 
4. { 
5. if(!dimension.vertical && !dimension.horizontal) 
6. return; //won't do anything anyway 
7. if(parent) 
8. parent = self.parent(); 
9. else 
10. parent = window 
11. self.css("position", "absolute"); 
12. if(dimension.vertical) 
13. { 
14. self.css("top", Math.max(0, (($(parent).height() - $(self).outerHeight()) / 2) + 
15. $(parent).scrollTop()) + "px"); 
16. } 
17. if(dimension.horizontal) 
18. { 
19. self.css("left", Math.max(0, (($(parent).width() - $(self).outerWidth()) / 2) + 
20. $(parent).scrollLeft()) + "px"); 
21. } 
22. return self; 
23. }; 
24. $.fn.center = function(parent, args) 
25. { 
26. if(!args) 
27. { 
28. args = {horizontal: true, vertical: true}; 
29. } 
30. return this.each(function() 
31. { 
32. var obj = $(this); 
33. obj._center(obj, parent, args); 
34. function callback() 
35. { 
36. obj._center(obj, parent, args); 
37. } 
38. callback(); 
39. $(window).resize(callback); 
40. }); 
41. }; 
42. })(jQuery); 

希望本文所述對大家的jQuery程序設計有所幫助。