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 相关文章推荐
firefo xml 读写实现js代码
Jun 11 Javascript
javascript中的self和this用法小结
Feb 08 Javascript
浅谈layer的iframe弹窗给里面的标签赋值的问题
Nov 10 Javascript
详解Vue2.x-directive的学习笔记
Jul 17 Javascript
在一般处理程序(ashx)中弹出js提示语
Aug 16 Javascript
微信小程序开发之好友列表字母列表跳转对应位置
Sep 26 Javascript
vue router demo详解
Oct 13 Javascript
解决vue中虚拟dom,无法实时更新的问题
Sep 15 Javascript
Vue 实现把表单form数据 转化成json格式的数据
Oct 29 Javascript
原生js实现随机点餐效果
Dec 10 Javascript
微信小程序实现购物车小功能
Dec 30 Javascript
javascript进阶篇深拷贝实现的四种方式
Jul 07 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设计模式 Visitor 访问者模式
2011/06/28 PHP
简单的PHP缓存设计实现代码
2011/09/30 PHP
php实现斐波那契数列的简单写法
2014/07/19 PHP
PHP中两个float(浮点数)比较实例分析
2015/09/27 PHP
PHP实现的MD5结合RSA签名算法实例
2017/10/07 PHP
BOOM vs RR BO5 第三场 2.14
2021/03/10 DOTA
javascript 写类方式之十
2009/07/05 Javascript
基于jquery的inputlimiter 实现字数限制功能
2010/05/30 Javascript
JavaScript中也使用$美元符号来代替document.getElementById
2010/06/19 Javascript
jQuery 名称冲突的解决方法
2011/04/08 Javascript
js中parseInt函数浅谈
2013/07/31 Javascript
用JavaScript来美化HTML的select标签的下拉列表效果
2015/11/17 Javascript
jQuery获取字符串中出现最多的数
2016/02/22 Javascript
JavaScript重定向URL参数的两种方法小结
2016/10/19 Javascript
Jquery 整理元素选取、常用方法一览表
2016/11/26 Javascript
十分钟带你快速了解React16新特性
2017/11/10 Javascript
vue实现商城购物车功能
2017/11/27 Javascript
JavaScript async/await原理及实例解析
2020/12/02 Javascript
Python3中内置类型bytes和str用法及byte和string之间各种编码转换 问题
2018/09/27 Python
在python中利用GDAL对tif文件进行读写的方法
2018/11/29 Python
python 控制Asterisk AMI接口外呼电话的例子
2019/08/08 Python
python基于plotly实现画饼状图代码实例
2019/12/16 Python
Python scrapy增量爬取实例及实现过程解析
2019/12/24 Python
python计算二维矩形IOU实例
2020/01/18 Python
python GUI库图形界面开发之PyQt5信号与槽的高级使用技巧装饰器信号与槽详细使用方法与实例
2020/03/06 Python
django admin后管定制-显示字段的实例
2020/03/11 Python
Python创建自己的加密货币的示例
2021/03/01 Python
客服端调用EJB对象的几个基本步骤
2012/01/15 面试题
新闻专业应届生求职信
2013/10/31 职场文书
物业管理员岗位职责范文
2013/11/25 职场文书
黄河象教学反思
2014/02/10 职场文书
专业技术职务聘任书
2014/03/29 职场文书
安全横幅标语
2014/06/09 职场文书
我爱幼儿园演讲稿
2014/09/11 职场文书
幼师自荐信范文
2015/03/06 职场文书
python自动化测试之Selenium详解
2022/03/13 Python