Archive for 十一月, 2013

自制jquery绝对居中插件

0

目的:温习一下jquery插件的简单制作方法,此插件没有编写自定义参数部分,因为功能较小,没这个必要。
文件名:posCenten.js
代码如下:

/**

 * 脚本
 * @copyright   Copyright(c) 2013
 * @author      AllanBian <bxdsanmao@gmail.com/www.allanbian.com>
 * @github https://github.com/AllanBian/public_html.git
 * @version     1.0
 绝对居中插件,提供伴随滚动条滚动的绝对居中
 如果容器宽高小于屏幕显示的最大宽高则认为是可以用来绝对居中的容器
*/
jQuery.fn.posCenten = function(){
if(this.height()<jQuery(window).height() && this.width()<jQuery(window).width()){
this.css({“position”:”absolute”,”top”:”50%”,”left”:”50%”,”margin-left”:-(this.width()/2),”margin-top”:-(this.height()/2)});
}else{
if(this.attr(‘class’)){
alert(“不适合进行绝对居中的容器class:” + this.attr(‘class’));
return false;
}
if(this.attr(‘id’)){
alert(“不适合进行绝对居中的容器id:” + this.attr(‘id’));
return false;
}
}
var n = this;
jQuery(document).scroll(function(){
n.stop().animate({“margin-top”:$(document).scrollTop()-(n.height()/2)});
});

}

//页面调用
假设页面中有个class为myDiv的容器,只需要做如下调用方可使用本插件。
jQuery(“.myDiv”).posCenten();


Post navigation