【jQuery插件】capacityFixed-类似于新浪微博新消息提示的定位框

公司项目需求中有一个类似于新浪微博新消息提示的定位框的效果，例如：

这个在很早以前其实已经写过，请移步：http://www.css88.com/archives/1943

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

具体代码如下：

01 /**
02  * @author 愚人码头
03  * 类似于新浪微博新消息提示的定位框
04  * 更多http://www.css88.com/archives/3515
05  */
06 (function($){
07     $.fn.capacityFixed = function(options) {
08         var opts = $.extend({},$.fn.capacityFixed.deflunt,options);
09  
10         var FixedFun = function(element) {
11             var top = opts.top;
12             var right = ($(window).width()-opts.pageWidth)/2+opts.right;
13             element.css({
14                 "right":right,
15                 "top":top
16             });
17             $(window).resize(function(){
18                 var right = ($(window).width()-opts.pageWidth)/2+opts.right;
19                 element.css({
20                     "right":right
21                 });
22             });
23             $(window).scroll(function() {
24                 var scrolls = $(this).scrollTop();
25                 if (scrolls > top) {
26  
27                     if (window.XMLHttpRequest) {
28                         element.css({
29                             position: "fixed",
30                             top: 0
31                         });
32                     } else {
33                         element.css({
34                             top: scrolls
35                         });
36                     }
37                 }else {
38                     element.css({
39                         position: "absolute",
40                         top: top
41                     });
42                 }
43             });
44             element.find(".close-ico").click(function(event){
45                 element.remove();
46                 event.preventDefault();
47             })
48         };
49         return $(this).each(function() {
50             FixedFun($(this));
51         });
52     };
53     $.fn.capacityFixed.deflunt={
54     right : 100,//相对于页面宽度的右边定位
55         top:100,
56         pageWidth : 960
57     };
58 })(jQuery)

调用：

1 $("#float").capacityFixed({
2     right : 100,//相对于页面宽度的右边定位
3         top:100,
4         pageWidth : 960
5     });

查看demo：http://www.css88.com/demo/capacityFixed/
posted @ 2011-05-24 09:08  likozhang  阅读(697)  评论(0)    收藏  举报