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

 更新时间:2011年05月24日 23:14:32   作者:  
公司项目需求中有一个类似于新浪微博新消息提示的定位框的效果,需要的朋友可以参考下。
效果图:

当浏览器滚动的时候,要浮层要移除浏览器界面视区的时候,修改其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);

相关文章

  • jQuery实现带延迟的二级tab切换下拉列表效果

    jQuery实现带延迟的二级tab切换下拉列表效果

    这篇文章主要介绍了jQuery实现带延迟的二级tab切换下拉列表效果,涉及jquery鼠标事件及页面元素样式动态变换的实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-09-09
  • jQuery多个input求和的实现方法

    jQuery多个input求和的实现方法

    这篇文章主要介绍了jQuery多个input求和的实现方法,涉及jQuery获取input表单元素值及运算的相关技巧,需要的朋友可以参考下
    2015-02-02
  • jquery each()源代码

    jquery each()源代码

    jquery文档说 each(callback)作用是以每一个匹配的元素作为上下文来执行一个函数。就是用each来遍历数组,来执行同一个方法
    2011-02-02
  • jQuery 一个图片切换的插件

    jQuery 一个图片切换的插件

    B/S开发的朋友,首页常常需要一些新闻图片切换的特效,鉴于jQuery良好的插件开发机制,我也常常自己写一些实用的小插件,这里分享一个新闻图片切换插件
    2011-10-10
  • Jquery插件分享之气泡形提示控件grumble.js

    Jquery插件分享之气泡形提示控件grumble.js

    grumble.js 是一个很特别的气泡形状提示控件,最开始是为 Huddle.com 网站开发的, 它没有通常的north/east/south/west的定位限制。
    2014-05-05
  • jquery实现下拉框多选方法介绍

    jquery实现下拉框多选方法介绍

    本文是利用EasyUI实现下拉框多选功能,在ComboxTree其原有的基础上对样式进行了改进,样式表已上传demo,下面跟着小编一起来看下吧
    2017-01-01
  • JQuery常见节点操作实例分析

    JQuery常见节点操作实例分析

    这篇文章主要介绍了JQuery常见节点操作,结合实例形式分析了jQuery针对元素节点的添加、删除常见操作函数使用技巧与相关注意事项,需要的朋友可以参考下
    2019-05-05
  • jquery实现动态创建form并提交的方法示例

    jquery实现动态创建form并提交的方法示例

    这篇文章主要介绍了jquery实现动态创建form并提交的方法,结合实例形式分析了jQuery form表单创建与提交相关操作技巧,需要的朋友可以参考下
    2019-05-05
  • jquery点赞功能实现代码 点个赞吧!

    jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现,如何实现爱心点赞功能,这篇文章主要为大家详细介绍了jquery点赞功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05
  • jQuery图片播放8款精美插件分享

    jQuery图片播放8款精美插件分享

    与大家一起分享8款精美的jQuery图片播放插件,有兴趣的朋友可以下载使用和研究;废话不多说了,直接上这些插件,希望这些插件对你有所帮助
    2013-02-02

最新评论