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

所属分类：网络编程 / JavaScript 阅读数： 1325

收藏 0赞 0分享

效果图:

当浏览器滚动的时候，要浮层要移除浏览器界面视区的时候，修改其position属性，让其浮动在窗口的上沿显示就可以了，position：fixed，可以在IE7+和其他浏览器下浮动层平滑固定定位，由于IE6前辈不支持fixed属性，使用position：absolute属性代替，重新计算top值。
具体代码如下：
HTML代码：

复制代码代码如下:

 
<div class="float" id="float"> 
<p id="WB_unread_msg_1303891276971">1条新私信，<a href="https://www.jb51.net/">查看私信</a></p> 
<p id="WB_unread_msg_1303891276972">10条新消息，<a href="https://www.jb51.net/">查看消息</a></p> 
<p id="WB_unread_msg_1303891276973">108个新粉丝，<a href="https://www.jb51.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); 