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

 这篇文章主要介绍了jQuery插件实现控制网页元素动态居中显示,实例分析了jQuery插件的实现与元素动态显示的技巧,需要的朋友可以参考下

 
 

本文实例讲述了jQuery插件实现控制网页元素动态居中显示的方法。分享给大家供大家参考。具体实现方法如下:

?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

(function($)
{
$.fn._center = function(self, parent, dimension)
{
if(!dimension.vertical && !dimension.horizontal)
return; //won't do anything anyway
if(parent)
parent = self.parent();
else
parent = window
self.css("position", "absolute");
if(dimension.vertical)
{
self.css("top", Math.max(0, (($(parent).height() - $(self).outerHeight()) / 2) +
$(parent).scrollTop()) + "px");
}
if(dimension.horizontal)
{
self.css("left", Math.max(0, (($(parent).width() - $(self).outerWidth()) / 2) +
$(parent).scrollLeft()) + "px");
}
return self;
};
$.fn.center = function(parent, args)
{
if(!args)
{
args = {horizontal: true, vertical: true};
}
return this.each(function()
{
var obj = $(this);
obj._center(obj, parent, args);
function callback()
{
obj._center(obj, parent, args);
}
callback();
$(window).resize(callback);
});
};
})(jQuery);

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

时间: 2025-01-20 19:34:40

jQuery插件实现控制网页元素动态居中显示的相关文章

jQuery插件jRumble实现网页元素抖动_jquery

jRumble,它能让网页上的任意元素抖动起来,在你的网站中使用这个效果会有很大的机率吸引用户的注意力.此插件的效果可以用在链接上,或者div上,你可以设置抖动的范围.XY坐标.抖动幅度等.可设置为当鼠标移动上去抖动或者默认一直抖动,插件可定制性还是蛮高的.PS:此插件在IE中还存在一些小问题 jQuery jRumble是使用方法 <script type="text/javascript" src="js/jquery-jrumble.js"><

jQuery插件jRumble实现网页元素抖动

  jRumble,它能让网页上的任意元素抖动起来,在你的网站中使用这个效果会有很大的机率吸引用户的注意力.此插件的效果可以用在链接上,或者div上,你可以设置抖动的范围.XY坐标.抖动幅度等.可设置为当鼠标移动上去抖动或者默认一直抖动,插件可定制性还是蛮高的.PS:此插件在IE中还存在一些小问题 jQuery jRumble是使用方法 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

jQuery插件StickUp实现网页导航置顶_jquery

实用的jQuery网页元素固定导航置顶插件StickUp,简单的jQuery插件,实现网页元素固定,如导航固定让其总是保持在视图中可见,在one-page页面中就可以看出效果,大家可以研究研究. 使用方法: 1.加载插件和jQuery <script src="js/jquery.js">script> <script src="js/stickUp.min.js">script> <link href="stic

VC++6.0如何控制网页元素实现自动操作?

问题描述 VC++6.0如何控制网页元素实现自动操作? VC++6.0如何控制网页元素实现自动操作?如自动选择,点选,读取数据 解决方案 通过webbrowser控件来操作页面 解决方案二: CHtmlView类在文档/视图结构的上下文中提供WebBrowser控件的功能.WebBrowser控件是客户可浏览网址以及本地文件系统和网络文件夹的窗口.具体情况,请参阅"WebBrowser风格的应用".希望能帮助你 解决方案三: Das ist stimmt via

jQuery插件实现屏蔽单个元素使用户无法点击_jquery

复制代码 代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="http

完美实现浮动元素横排居中显示_基础教程

经常会遇到这样的页面布局:在一排显示几个不同的区域内容,但它们相对于页面是居中对齐的.注意这些区域内容不只是文字,也许还有图片或者其它元素混合而成.一般这样的布局我们很容易想到要用浮动float,但是怎么样居中对齐而又兼容低端浏览器哪?请接着往下看. 首先看html代码: <div class="webFooter"> <div class="wrap"> <div class="tabs"> <ul&g

jquery插件hiAlert实现网页对话框美化

  hiAlert是一款基于jQuery的信息提示插件,它支持操作成功.操作失败和操作提醒三种信息提示方式.hiAlert浏览器兼容性非常好,支持更改提示内容,支持定位提示框的位置,可配置插件参数. 厌烦了IE浏览器的警告窗,伴随着"咚"恐惧的一声,让人感觉好像有一种坏事情即将来临.而如今各浏览器对网页的弹出警告框(alert).确认对话框(confirm).输入框(prompt)显示效果不一,本文借助hiAlert插件来为您统一网页的对话框风格. hiAlert插件是根据 jquer

强大的jquery插件jqeuryUI做网页对话框效果!简单_jquery

我们先来最简单的,网页的登录窗口: 不过开始之前,大家先下载jquery的插件本人习惯用了vs2008来做网页了,先添加一个空白页 这是最简单的的做法...先在body里面插入 <body><div id="div1"><table><tr><td>用户名</td><td><input type="text" style="width:100px" />

jquery插件hiAlert实现网页对话框美化_jquery

厌烦了IE浏览器的警告窗,伴随着"咚"恐惧的一声,让人感觉好像有一种坏事情即将来临.而如今各浏览器对网页的弹出警告框(alert).确认对话框(confirm).输入框(prompt)显示效果不一,本文借助hiAlert插件来为您统一网页的对话框风格. hiAlert插件是根据 jquery.alerts 改进得来,包括了常用的几种提示框,还提供了渐变提示条效果,弹出网页层效果,它目前兼容各主流浏览器. 使用方法 hiAlert提供了五种方法可以使用: 1.hiAlert hiAler