capacityFixed 基于jquery的類似于新浪微博新消息提示的定位框

更新時間：2011年05月24日 23:14:32 作者：

公司項目需求中有一個類似于新浪微博新消息提示的定位框的效果，需要的朋友可以參考下。

效果圖:

當瀏覽器滾動的時候，要浮層要移除瀏覽器界面視區(qū)的時候，修改其position屬性，讓其浮動在窗口的上沿顯示就可以了，position：fixed，可以在IE7+和其他瀏覽器下浮動層平滑固定定位，由于IE6前輩不支持fixed屬性，使用position：absolute屬性代替，重新計算top值。
具體代碼如下：
HTML代碼：

復制代碼代碼如下:

 
<div class="float" id="float"> 
<p id="WB_unread_msg_1303891276971">1條新私信，<a href="http://www.fzitv.net/">查看私信</a></p> 
<p id="WB_unread_msg_1303891276972">10條新消息，<a href="http://www.fzitv.net/">查看消息</a></p> 
<p id="WB_unread_msg_1303891276973">108個新粉絲，<a href="http://www.fzitv.net/">查看粉絲</a></p> 
<a href="#" title="關閉" id="" class="close-ico">關閉</a> 
</div> 

CSS代碼：

復制代碼代碼如下:

 
.float { width:200px; padding:5px 10px; border:1px solid #ffecb0; font-size:12px; background-color:#fffee0; -moz-box-shadow:1px 1px 2px rgba(0,0,0,.2); -webkit-box-shadow:1px 1px 2px rgba(0,0,0,.2); box-shadow:1px 1px 2px rgba(0,0,0,.2); position:absolute; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; } 
.float .close-ico{ position:absolute; top:5px; right:5px; display:block; width:16px; height:16px; background-image:url(img/close-ico.png); text-indent:-900px; overflow:hidden; } 
.float .close-ico:hover{ background-position:0 -16px;} 
.float p{ line-height:22px} 

JS代碼：

復制代碼代碼如下:

 
/** 
* @author 愚人碼頭 
* 類似于新浪微博新消息提示的定位框 
* 更多 
*/ 
(function($){ 
$.fn.capacityFixed = function(options) { 
var opts = $.extend({},$.fn.capacityFixed.deflunt,options); 

var FixedFun = function(element) { 
var top = opts.top; 
var right = ($(window).width()-opts.pageWidth)/2+opts.right; 
element.css({ 
"right":right, 
"top":top 
}); 
$(window).resize(function(){ 
var right = ($(window).width()-opts.pageWidth)/2+opts.right; 
element.css({ 
"right":right 
}); 
}); 
$(window).scroll(function() { 
var scrolls = $(this).scrollTop(); 
if (scrolls > top) { 

if (window.XMLHttpRequest) { 
element.css({ 
position: "fixed", 
top: 0 
}); 
} else { 
element.css({ 
top: scrolls 
}); 
} 
}else { 
element.css({ 
position: "absolute", 
top: top 
}); 
} 
}); 
element.find(".close-ico").click(function(event){ 
element.remove(); 
event.preventDefault(); 
}) 
}; 
return $(this).each(function() { 
FixedFun($(this)); 
}); 
}; 
$.fn.capacityFixed.deflunt={ 
right : 100,//相對于頁面寬度的右邊定位 
top:100, 
pageWidth : 960 
}; 
})(jQuery); 