能做对联广告,QQ客服等多样化浮动窗的jquery插件

时间: 2013-12-9 分类: Javascript 作者: SAI

TAGS:

插件名称:oFixed,完全兼容ie6,6,8,9,10,firefox,chrome等主流浏览器;

这是一个很小巧的jquery插件,可以做网页上比较常见的浮动框,就好像css的fixed效果,可以跟随页面滚动:例如:QQ客服,对联广告,视频广告,返回顶部等效果

使用前先引入jquery库,例如:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript"></script>

(当然也可以用自己的地址)插件代码如下:

; (function($) {
$.fn.extend({
oFixed: function(o) {
o = $.extend({
posTB: 1,
posLR: 1,
posHSize: 0,
posVSize: 0,
close: null,
wrap: null,
vSize: 0,
beforeStart:null
},
o || {});
var obj = this,
posVSize = o.posVSize,
vSize = o.vSize,
objH = obj.outerHeight(),
pH = $(document).height(),
win = $(window).on('load resize',function() {
var posHSize = o.wrap && ((win.width() - (isNaN(o.wrap) && $(o.wrap).outerWidth() || o.wrap)) / 2 - obj.outerWidth() - o.posHSize) || o.posHSize;
!o.posTB && (posVSize = win.height() - objH - o.posVSize);
obj.css({top:win.scrollTop() < vSize&&o.posTB&& vSize || posVSize +  win.scrollTop() ,position: 'absolute'}).css(!o.posLR && 'right' || 'left', posHSize);
}).scroll(function() {
o.beforeStart&&o.beforeStart.call(this);
var st = win.scrollTop();
(!o.posTB || st > vSize-posVSize) && (st <= pH - objH - posVSize && obj.stop(true, false).animate({
top: posVSize + st
}))||obj.stop(true, false).animate({
top: vSize
})
});
$(o.close).click(function() {obj.hide()})
}
})
})(jQuery);

参数说明:

/***
$('.floatDiv').oFixed({
posTB:1,//对象的css top or bottom
posLR:1,//对象的css left or right
posHSize:0,//水平距离
posVSize:0,//垂直距离
close:null,//关闭按钮 close:'.close'
wrap:null,//被附着的对象or宽度;wrap:'.wrap' or wrap:960
vSize:0,//对象初始的top值,不常用
})
***/

调用方法为:

$(".fixediv1").oFixed({close:'.close',posHSize:20,posVSize:20});
Javin

本文作者: SAI

推崇以用户为中心的设计理念,专注于用户体验设计,游走在视觉设计与前端开发之间。我要投稿

除非特殊注明,本文版权归原作者所有,欢迎转载!转载请注明版权以及本文地址,谢谢。
转载保留版权:塞纳» 前端技术 » Javascript » 能做对联广告,QQ客服等多样化浮动窗的jquery插件
本文地址:http://www.saiody.com/?p=1031

返回顶部