jQuery实现仿新浪微博浮动的消息提示框(可智能定位)


Posted in Javascript onOctober 10, 2015

本文实例讲述了jQuery实现仿新浪微博浮动的消息提示框。分享给大家供大家参考。具体如下:

这是一款jQuery实现的仿新浪微博新消息提示框效果,支持智能浮动定位框,新浪微博用来提示消息时候的智能定位框,可以适时关闭窗口,你完全可以将其应用到你网页的其它地方。

运行效果截图如下:

jQuery实现仿新浪微博浮动的消息提示框(可智能定位)

在线演示地址如下:

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>仿新浪微博新消息提示的智能浮动定位框</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type="text/css"> 
*{margin:0;padding:0;}
body{font:12px/1.8 Arial;color:#666;}
h1.tit-h1{font-size:38px;text-align:center;margin:30px 0 15px;color:#f60;}
.go-back{text-align:center;border-top:1px dashed #ccc;padding:10px;margin-top:20px;font-size:40px;}
.wrap{border:1px dashed #ccc;background:#f8f8f8;padding:20px;}
.demo{height:1500px;}
.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;}
/* Head Fixed */
.fixed-top{position:fixed;bottom:auto;top:0px;}
/* Foot Fixed */
.fixed-bottom{position:fixed;bottom:0px;top:auto;}
/* Left Fixed */
.fixed-left{position:fixed;right:auto;left:0px;}
/* RIGHT Fixed */
.fixed-right{position:fixed;right:0px;left:auto;}
* html,* html body{background-attachment:fixed;}
/* IE6 Head Fixed */
* html .fixed-top{position:absolute;bottom:auto;top:expression(eval(document.documentElement.scrollTop));}
/* IE6 RIGHT Fixed */
* html .fixed-right{position:absolute;right:auto;left:expression(eval(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth)-(parseInt(this.currentStyle.marginLeft,10)||0)-(parseInt(this.currentStyle.marginRight,10)||0));}
/* IE6 Foot Fixed */
* html .fixed-bottom{position:absolute;bottom:auto;top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));}
/* IE6 Left Fixed */
* html .fixed-left{position:absolute;right:auto;left:expression(eval(document.documentElement.scrollLeft));}
</style> 
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
/**
 * @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:150,
 pageWidth : 960
 };
})(jQuery);
</script>
</head>
<body>
<div style="height:2000px;"></div>
<div class="wrap">
 <div class="float" id="float">
  <p>1条新私信,<a href="#">查看私信</a></p>
  <p>108个新粉丝,<a href="#">查看粉丝</a></p>
  <a href="#" title="关闭" id="" class="close-ico">×</a>
 </div>
</div>
<script type="text/javascript">
$("#float").capacityFixed();
</script>
</body>
</html>

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
获取URL地址中的文件名和参数的javascript代码
Sep 02 Javascript
页面中iframe相互传值传参
Dec 13 Javascript
javascript 不间断的图片滚动并可点击
Jan 15 Javascript
关于img的href和src取变量及赋值的方法
Apr 28 Javascript
node.js中的buffer.fill方法使用说明
Dec 14 Javascript
node.js中的fs.futimes方法使用说明
Dec 17 Javascript
JavaScript模拟实现继承的方法
Mar 30 Javascript
JavaScript实现单击下拉框选择直接跳转页面的方法
Jul 02 Javascript
js select实现省市区联动选择
Apr 17 Javascript
深入理解AngularJS中的ng-bind-html指令和$sce服务
Sep 08 Javascript
Vue组件Draggable实现拖拽功能
Dec 01 Javascript
springboot+vue+对接支付宝接口+二维码扫描支付功能(沙箱环境)
Oct 15 Javascript
JS+DIV+CSS排版布局实现美观的选项卡效果
Oct 10 #Javascript
JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)
Oct 10 #Javascript
JavaScript实现的浮动层框架用法实例分析
Oct 10 #Javascript
表单验证插件Validation应用的实例讲解
Oct 10 #Javascript
JS实现的车标图片提示效果代码
Oct 10 #Javascript
jqTransform美化表单
Oct 10 #Javascript
clipboard.js无需Flash无需依赖任何JS库实现文本复制与剪切
Oct 10 #Javascript
You might like
PHP循环获取GET和POST值的代码
2008/04/09 PHP
PHP 八种基本的数据类型小结
2011/06/01 PHP
php支付宝手机网页支付类实例
2015/03/04 PHP
PHP实现支持SSL连接的SMTP邮件发送类
2015/03/05 PHP
thinkphp命名空间用法实例详解
2015/12/30 PHP
NodeJs中的非阻塞方法介绍
2012/06/05 NodeJs
Js 导出table内容到Excel的简单实例
2013/11/19 Javascript
JS连连看源码完美注释版(推荐)
2013/12/09 Javascript
window.onload追加函数使用示例
2014/03/03 Javascript
jQuery Validate验证框架经典大全
2015/09/23 Javascript
JS基于面向对象实现的拖拽库实例
2015/09/24 Javascript
基于javascript实现页面加载loading效果
2020/09/15 Javascript
BootStrap的alert提示框的关闭后再显示怎么解决
2016/05/17 Javascript
jQuery简单实现彩色云标签效果示例
2016/08/01 Javascript
一个超简单的jQuery回调函数例子(分享)
2016/08/08 Javascript
详解nodejs爬虫程序解决gbk等中文编码问题
2017/04/06 NodeJs
jquery网页加载进度条的实现
2017/06/01 jQuery
vue项目中使用axios上传图片等文件操作
2017/11/02 Javascript
ES6之模版字符串的具体使用
2018/05/17 Javascript
JS实现的简单tab切换功能完整示例
2019/06/20 Javascript
jquery多级树形下拉菜单的实例代码
2019/07/09 jQuery
JS实现点击发送验证码 xx秒后重新发送功能
2019/07/30 Javascript
Element 默认勾选表格 toggleRowSelection的实现
2019/09/04 Javascript
python动态监控日志内容的示例
2014/02/16 Python
Scrapy框架介绍之Puppeteer渲染的使用
2020/06/19 Python
Python中flatten( ),matrix.A用法说明
2020/07/05 Python
使用CSS3制作饼状旋转载入效果的实例
2015/06/23 HTML / CSS
HTML5页面无缝闪开的问题及解决方案
2020/06/11 HTML / CSS
白兰氏健康Mall:BRAND’S
2017/11/13 全球购物
骨干教师培训制度
2014/01/13 职场文书
读书伴我成长演讲稿
2014/05/07 职场文书
企业承诺书怎么写
2014/05/24 职场文书
初中学校对照检查材料
2014/08/19 职场文书
泸县召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
2014年销售内勤工作总结
2014/12/01 职场文书
mysql中DCL常用的用户和权限控制
2022/03/31 MySQL