jQuery插件实现控制网页元素动态居中显示

这篇文章主要介绍了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程序设计有所帮助。