首先非常感谢网友牛奶的无私分享，此Jquery插件虽然很简单，但功能非常实用，为了方便网友们学习，把固定在上中左3种方位的功能代码都写了一个通用的插件，使用非常简单，参数也很少，posfix插件经测试兼容ie,谷歌,火狐等浏览器。。。
插件支持以下功能：
1、固定上方位置
2、固定中间位置
3、固定左边位置
4、支持窗体改变事件调整
5、支持滚动条事件
本次演示页面只有中间位置，其它两个网友们下载之后就可以看到。
主要代码如下：
function center(self){
var mwidth=self.width();
var mheight=self.height();
var outerwidth=self.outerWidth();
var outerheight=self.outerHeight();
var leftpy=outerwidth-mwidth;
var toppy=outerheight-mheight;
var bl=outerwidth/outerheight;
var init=true;
self.css({"position":"absolute"});
self.find("img").css({"width":mwidth, "height":mheight});
function fixresize(){
if($(window).width()<=$(window).height()+((outerwidth-outerheight)*0.7)){
var width=($(window).width()*0.9)<outerwidth?$(window).width()*0.9:outerwidth;
var height=width/bl;
var left=($(window).width()-width)/2;
var top=($(window).height()-height)/2 + $(document).scrollTop();
self.stop().animate({"width":width-leftpy, "height":height-toppy, "left": left, "top": top},options.time);
self.find("img").stop().animate({"width":width-leftpy, "height":height-toppy, "left": left, "top": top},options.time);
}
else{
var height=($(window).height()*0.9)<outerheight?$(window).height()*0.9:outerheight;
var width=height*bl;
var left=($(window).width()-width)/2;
var top=($(window).height()-height)/2 + $(document).scrollTop();
self.stop().animate({"width":width-leftpy, "height":height-toppy, "left": left, "top": top},options.time);
self.find("img").stop().animate({"width":width-leftpy, "height":height-toppy, "left": left, "top": top},options.time);
}
}
$(window).ready(function() {
self.css({"top":top-mheight*0.2});
fixresize();
});
$(window).scroll(function(){
var top=($(window).height() - self.outerHeight())/2 + $(document).scrollTop();
if(init){
self.css({"top":top-mheight*0.2});
fixresize();
init=false;
}
else{
self.stop(true,false).animate({top: top},370);
}
});
$(window).resize(function(){
fixresize();
})
}
效果如下：
如果您觉得本作品对您的学习有所帮助：
关键字：
posfix 网友牛奶 弹出层 滚动特效 滑动插件 返回顶部