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


Posted in Javascript onMay 24, 2011

效果图:
capacityFixed 基于jquery的类似于新浪微博新消息提示的定位框
当浏览器滚动的时候,要浮层要移除浏览器界面视区的时候,修改其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://3water.com/">查看私信</a></p> 
<p id="WB_unread_msg_1303891276972">10条新消息,<a href="https://3water.com/">查看消息</a></p> 
<p id="WB_unread_msg_1303891276973">108个新粉丝,<a href="https://3water.com/">查看粉丝</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);
Javascript 相关文章推荐
关于取不到由location.href提交而来的上级页面地址的解决办法
Jul 30 Javascript
JavaScript 的方法重载效果
Aug 07 Javascript
!DOCTYPE声明对JavaScript的影响分析
Apr 12 Javascript
javascript按位非运算符的使用方法
Nov 14 Javascript
jQuery插件ajaxFileUpload实现异步上传文件效果
Apr 14 Javascript
Node.js环境下编写爬虫爬取维基百科内容的实例分享
Jun 12 Javascript
flexslider.js实现移动端轮播
Feb 05 Javascript
webstorm和.vue中es6语法报错的解决方法
May 08 Javascript
JS实现图片转换成base64的各种应用场景实例分析
Jun 22 Javascript
在vue中获取微信支付code及code被占用问题的解决方法
Apr 16 Javascript
使用webpack搭建vue环境的教程详解
Dec 31 Javascript
js实现整体缩放页面适配移动端
Mar 31 Javascript
基于jquery的从一个页面跳转到另一个页面的指定位置的实现代码(带平滑移动的效果)
May 24 #Javascript
三级下拉菜单的js实现代码
May 23 #Javascript
js与jquery中获取当前鼠标的x、y坐标位置的代码
May 23 #Javascript
在Javascript里访问SharePoint列表数据的实现方法
May 22 #Javascript
SharePoint 客户端对象模型 (一) ECMA Script
May 22 #Javascript
JQuery里选择超链接的实现代码
May 22 #Javascript
改善用户体验的五款jQuery插件分享
May 22 #Javascript
You might like
PHP实现域名whois查询的代码(数据源万网、新网)
2010/02/22 PHP
PHP+mysql+ajax轻量级聊天室实现方法详解
2016/10/17 PHP
PHP多种序列化/反序列化的方法详解
2017/06/23 PHP
PHP+redis实现的限制抢购防止商品超发功能详解
2019/09/19 PHP
javascript offsetX与layerX区别
2010/03/12 Javascript
JavaScript使用HTML5的window.postMessage实现跨域通信例子
2014/04/11 Javascript
javascript将数字转换整数金额大写的方法
2015/01/27 Javascript
有效提高JavaScript执行效率的几点知识
2015/01/31 Javascript
JavaScript实现带箭头标识的多级下拉菜单效果
2015/08/27 Javascript
JavaScript操作XML/HTML比较常用的对象属性集锦
2015/10/30 Javascript
JavaScript编程学习技巧汇总
2016/02/21 Javascript
jquery实现倒计时小应用
2017/09/19 jQuery
微信小程序 scroll-view实现锚点滑动的示例
2017/12/06 Javascript
JavaScript时间日期操作实例小结【5个示例】
2018/12/22 Javascript
送你43道JS面试题(收藏)
2019/06/17 Javascript
layui使用表格渲染获取行数据的例子
2019/09/13 Javascript
解决layer 动态加载select 失效的问题
2019/09/18 Javascript
Vue组件间数据传递的方式(3种)
2020/07/13 Javascript
Django1.7+python 2.78+pycharm配置mysql数据库教程
2014/11/18 Python
解决Python pandas df 写入excel 出现的问题
2018/07/04 Python
Flask框架通过Flask_login实现用户登录功能示例
2018/07/17 Python
Selenium的使用详解
2018/10/19 Python
pytorch 彩色图像转灰度图像实例
2020/01/13 Python
使用pytorch搭建AlexNet操作(微调预训练模型及手动搭建)
2020/01/18 Python
mac 上配置Pycharm连接远程服务器并实现使用远程服务器Python解释器的方法
2020/03/19 Python
python实现udp聊天窗口
2020/03/31 Python
Python爬取你好李焕英豆瓣短评生成词云的示例代码
2021/02/24 Python
党支部公开承诺书
2014/03/28 职场文书
知识竞赛拉拉队口号
2014/06/16 职场文书
英语课外活动总结
2014/08/27 职场文书
销售助理岗位职责
2015/02/11 职场文书
初中家长意见
2015/06/03 职场文书
关于运动会的宣传稿
2015/07/23 职场文书
学生会任命书范本
2015/09/21 职场文书
使用opencv-python如何打开USB或者笔记本前置摄像头
2022/06/21 Python
SQL语句中EXISTS的详细用法大全
2022/06/25 MySQL