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 相关文章推荐
Stop SQL Server
Jun 21 Javascript
js处理json以及字符串的比较等常用操作
Sep 08 Javascript
Javasipt:操作radio标签详解
Dec 30 Javascript
探寻Javascript执行效率问题
Nov 12 Javascript
jquery实现平滑的二级下拉菜单效果
Aug 26 Javascript
开启Javascript中apply、call、bind的用法之旅模式
Oct 28 Javascript
实例讲解Jquery中隐藏hide、显示show、切换toggle的用法
May 13 Javascript
简单实现js悬浮导航效果
Feb 05 Javascript
Angular实现表单验证功能
Nov 13 Javascript
详解如何用typescript开发koa2的二三事
Nov 13 Javascript
一文了解Vue中的nextTick
May 06 Javascript
解决Ant Design Modal内嵌Form表单initialValue值不动态更新问题
Oct 29 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 preg_filter执行一个正则表达式搜索和替换
2012/02/27 PHP
PHP实现显示照片exif信息的方法
2014/07/11 PHP
ThinkPHP在新浪SAE平台的部署实例
2014/10/31 PHP
PHP 使用 Imagick 裁切/生成缩略图/添加水印自动检测和处理 GIF
2016/02/19 PHP
php调用自己java程序的方法详解
2016/05/13 PHP
PHP实现批量重命名某个文件夹下所有文件的方法
2017/09/04 PHP
PHP封装的page分页类定义与用法完整示例
2018/12/24 PHP
PHP开发的文字水印,缩略图,图片水印实现类与用法示例
2019/04/12 PHP
JS在IE和FF下attachEvent,addEventListener学习笔记
2009/11/26 Javascript
form.submit()不能提交表单的错误原因及解决方法
2014/10/13 Javascript
JavaScript运算符小结
2015/06/03 Javascript
js图片上传前预览功能(兼容所有浏览器)
2016/08/24 Javascript
JavaScript数组和对象的复制
2017/03/21 Javascript
微信公众号菜单配置微信小程序实例详解
2017/03/31 Javascript
JavaScript简单计算人的年龄示例
2017/04/15 Javascript
详解使用nvm管理多版本node的方法
2017/08/30 Javascript
使用Fullpage插件快速开发整屏翻页的页面
2017/09/13 Javascript
基于vue cli重构多页面脚手架过程详解
2018/01/23 Javascript
angular4笔记系列之内置指令小结
2018/11/09 Javascript
Tornado协程在python2.7如何返回值(实现方法)
2017/06/22 Python
django创建自定义模板处理器的实例详解
2017/08/14 Python
Python中的asyncio代码详解
2019/06/10 Python
解决webdriver.Chrome()报错:Message:'chromedriver' executable needs to be in Path
2019/06/12 Python
TensorFlow tf.nn.conv2d实现卷积的方式
2020/01/03 Python
什么是Python变量作用域
2020/06/03 Python
python 30行代码实现蚂蚁森林自动偷能量
2021/02/08 Python
工作违纪检讨书
2014/02/17 职场文书
超市开学活动方案
2014/03/01 职场文书
触电现场处置方案
2014/05/14 职场文书
学生干部培训方案
2014/06/12 职场文书
2015年安全生产目标责任书
2015/01/29 职场文书
安全知识竞赛主持词
2015/06/30 职场文书
感恩教育主题班会
2015/08/12 职场文书
爱护环境建议书
2015/09/14 职场文书
优秀新员工事迹材料
2019/05/13 职场文书
浅析python中特殊文件和特殊函数
2022/02/24 Python