本文實例講述了js實作右下角提示框的方法。分享給大家供大家參考。具體實作方法如下:
實作右下角提示框的Jquery外掛 (popup.js)
//相容ie6的固定程式碼
//jQuery(函數($j){
// $j('#pop').positionFixed()
//})
(函數($j){
$j.positionFixed = 函數(el){
$j(el).each(function(){
新修復(此)
})
回 el;
}
$j.fn.positionFixed = function(){
返回 $j.positionFixed(this)
}
var 固定 = $j.positionFixed.impl = 函數(el){
var o=此;
o.sts={
目標:$j(el).css('position','fixed'),
容器:$j(窗口)
}
o.sts.currentCss = {
上方 : o.sts.target.css('top'),
右:o.sts.target.css('右'),
底部 : o.sts.target.css('bottom'),
左:o.sts.target.css('左')
}
if(!o.ie6)返回;
o.bindEvent();
}
$j.extend(fixed.prototype,{
ie6 : $.browser.msie && $.browser.version
綁定事件:函數(){
var o=此;
o.sts.target.css('位置','絕對')
o.overRelative().initBasePos();
o.sts.target.css(o.sts.basePos)
o.sts.container.scroll(o.scrollEvent()).resize(o.resizeEvent());
o.setPos();
},
overRelative : function(){
var o=此;
varrelative = o.sts.target.parents().filter(function(){
if($j(this).css('position')=='relative')return this;
})
if(relative.size()>0)relative.after(o.sts.target)
返回o;
},
initBasePos : 函數(){
var o=此;
o.sts.basePos = {
上方:o.sts.target.offset().top - (o.sts.currentCss.top=='auto'?o.sts.container.scrollTop():00),
左:o.sts.target.offset().left - (o.sts.currentCss.left=='auto'?o.sts.container.scrollLeft():0
}
返回o;
},
setPos : 函數(){
var o=此;
o.sts.target.css({
上方:o.sts.container.scrollTop() o.sts.basePos.top,
左: o.sts.container.scrollLeft() o.sts.basePos.left
})
},
滾動事件:函數(){
var o=此;
返回函數(){
o.setPos();
}
},
resizeEvent : function(){
var o=此;
返回函數(){
setTimeout(函數(){
o.sts.target.css(o.sts.currentCss)
o.initBasePos();
o.setPos()
},1)
}
}
})
})(jQuery)
jQuery(函數($j){
$j('#footer').positionFixed()
})
//pop右下角彈窗函數
函數 Pop(標題、網址、簡介){
this.title=標題;
這個.url=url;
this.intro=簡介;
this.aearTime=1000;
this.hideTime=500;
this.delay=10000;
// 新增資訊
this.addInfo();
// 顯示
this.showDiv();
//關閉
this.closeDiv();
}
Pop.prototype={
addInfo:function(){
$("#popTitle a").attr('href',this.url).html(this.title);
$("#popIntro").html(this.intro);
$("#popMore a").attr('href',this.url);
},
showDiv:函數(時間){
if (!($.browser.msie && ($.browser.version == "6.0") && !$.support.style)) {
$('#pop').slideDown(this.apearTime).delay(this.delay).fadeOut(400);;
} else{//呼叫jquery.fixed.js,解為ie6不能用fixed
$('#pop').show();
jQuery(函數($j){
$j('#pop').positionFixed()
})
}
},
closeDiv:function(){
$("#popClose").click(function(){
$('#pop').hide();
}
);
}
}
右下角提示框實例
jquery右下角pop弹窗
请看浏览器有下角
>
>
gt;
;
;
;
>
;
>
>
gt;
;
;
;
>
;
>
>
gt;
>jquery右下角彈跳視窗
正文>