热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

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

公司项目需求中有一个类似于新浪微博新消息提示的定位框的效果,需要的朋友可以参考下。
效果图:

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


1条新私信,查看私信


10条新消息,查看消息


108个新粉丝,查看粉丝


关闭


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);

推荐阅读
  • 前言--页数多了以后需要指定到某一页(只做了功能,样式没有细调)html ... [详细]
  • 使用Bootstrap创建响应式渐变固定头部导航栏的方法
    本文详细介绍了如何利用Bootstrap框架构建一个具有渐变效果的固定顶部响应式导航栏,包括HTML结构、CSS样式以及JavaScript交互的完整实现过程。适合前端开发者和学习者参考。 ... [详细]
  • 如何清空Layui树结构
    本文将详细介绍如何使用Layui框架清空树形结构,包括创建树、添加节点以及实现清空功能的具体步骤。通过本文,您将能够掌握Layui树的管理技巧。 ... [详细]
  • QUIC协议:快速UDP互联网连接
    QUIC(Quick UDP Internet Connections)是谷歌开发的一种旨在提高网络性能和安全性的传输层协议。它基于UDP,并结合了TLS级别的安全性,提供了更高效、更可靠的互联网通信方式。 ... [详细]
  • 深入理解Cookie与Session会话管理
    本文详细介绍了如何通过HTTP响应和请求处理浏览器的Cookie信息,以及如何创建、设置和管理Cookie。同时探讨了会话跟踪技术中的Session机制,解释其原理及应用场景。 ... [详细]
  • 本文详细介绍了如何使用Python编写爬虫程序,从豆瓣电影Top250页面抓取电影信息。文章涵盖了从基础的网页请求到处理反爬虫机制,再到多页数据抓取的全过程,并提供了完整的代码示例。 ... [详细]
  • 本文详细介绍了W3C标准盒模型和IE传统盒模型的区别,探讨了CSS3中box-sizing属性的使用方法及其在布局中的重要性。通过实例分析,帮助读者更好地理解和应用这一关键概念。 ... [详细]
  • 如何在WPS Office for Mac中调整Word文档的文字排列方向
    本文将详细介绍如何使用最新版WPS Office for Mac调整Word文档中的文字排列方向。通过这些步骤,用户可以轻松更改文本的水平或垂直排列方式,以满足不同的排版需求。 ... [详细]
  • Web App vs Native App:未来的移动应用趋势
    随着移动互联网的发展,Web App和Native App之间的竞争日益激烈。对于开发者而言,选择哪一种技术路径更为明智?本文将深入探讨两种应用模式的特点及未来趋势。 ... [详细]
  • 利用CSS3和React实现数字滚动动画组件
    在前端开发中,数字滚动动画是一个常见的需求。本文将详细介绍如何使用CSS3和React构建一个数字滚动动画组件,包括组件的代码实现和样式设计。如果您对HTML版本感兴趣,欢迎留言获取。 ... [详细]
  • select下拉箭头改变,兼容ie8/9
    各个浏览器下select默认的下拉箭头差别较大,通常会清除默认样式,重新设计<html><head><metacharsetutf-8> ... [详细]
  • HTML5实现逼真树叶飘落动画详解
    本文详细介绍了如何利用HTML5技术创建一个逼真的树叶飘落动画,包括HTML、CSS和JavaScript的代码实现及优化技巧。 ... [详细]
  • 使用 NDB 提升 Node.js 应用调试体验
    本文介绍了由 Google Chrome 实验室推出的新一代 Node.js 调试工具 NDB,旨在为开发者提供更加高效和便捷的调试解决方案。 ... [详细]
  • 本文介绍如何使用Python编写一个简单的爬虫程序,从知乎问题页面抓取美腿图片。环境配置包括Windows 10操作系统,Python语言及其相关库。 ... [详细]
  • 本文介绍如何在Windows 7操作系统中配置支持HTML5多点触控功能的设备,同时探讨了HTML5在开发Windows桌面应用程序中的可能性。 ... [详细]
author-avatar
ccer
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有