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 相关文章推荐
很全的显示阴历(农历)日期的js代码
Jan 01 Javascript
javascript延时加载之defer测试
Dec 28 Javascript
利用cookie记住背景颜色示例代码
Nov 04 Javascript
JS实现表格数据各种搜索功能的方法
Mar 03 Javascript
JavaScript面向对象编写购物车功能
Aug 19 Javascript
JavaScript reduce和reduceRight详解
Oct 24 Javascript
详解vue父子模版嵌套案例
Mar 04 Javascript
详解在vue-cli项目中安装node-sass
Jun 21 Javascript
vue实现表格数据的增删改查
Jul 10 Javascript
Vue 2.5 Level E 发布了: 新功能特性一览
Oct 24 Javascript
vue 对axios get pust put delete封装的实例代码
Jan 05 Javascript
在webstorm中配置less的方法详解
Sep 25 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
json的键名为数字时的调用方式(示例代码)
2013/11/15 PHP
php判断两个浮点数是否相等的方法
2015/03/14 PHP
PHP获取二维数组中某一列的值集合
2015/12/25 PHP
YiiFramework入门知识点总结(图文教程)
2015/12/28 PHP
PHP 500报错的快速解决方法
2016/12/14 PHP
PHP排序算法之直接插入排序(Straight Insertion Sort)实例分析
2018/04/20 PHP
xml 与javascript结合的问题解决方法
2007/03/24 Javascript
JavaScript中switch判断容易犯错的一个细节
2014/08/27 Javascript
基于jquery实现等比缩放图片
2014/12/03 Javascript
浅谈重写window对象的方法
2014/12/29 Javascript
javascript删除数组重复元素的方法汇总
2015/06/24 Javascript
JavaScript实现自动弹出窗口并自动关闭窗口的方法
2015/08/06 Javascript
js实现select下拉框菜单
2015/12/08 Javascript
javascript经典特效分享 手风琴、轮播图、图片滑动
2016/09/14 Javascript
AngularJS深入探讨scope,继承结构,事件系统和生命周期
2016/11/02 Javascript
js中new一个对象的过程
2017/02/20 Javascript
js/jq仿window文件夹框选操作插件
2017/03/08 Javascript
JavaScript数组和对象的复制
2017/03/21 Javascript
基于D3.js实现时钟效果
2018/07/17 Javascript
JS实现根据数组对象的某一属性排序操作示例
2019/01/14 Javascript
vue学习笔记之给组件绑定原生事件操作示例
2020/02/27 Javascript
[52:20]VP vs VG Supermajor小组赛 B组胜者组决赛 BO3 第一场 6.2
2018/06/03 DOTA
python通过索引遍历列表的方法
2015/05/04 Python
在Django的模型中添加自定义方法的示例
2015/07/21 Python
Python中optparser库用法实例详解
2018/01/26 Python
Flask框架重定向,错误显示,Responses响应及Sessions会话操作示例
2019/08/01 Python
Python图片的横坐标汉字实例
2019/12/04 Python
英国时尚优质的女装:Hope Fashion
2018/08/14 全球购物
表扬信格式
2014/01/12 职场文书
优秀毕业生就业推荐信
2014/05/22 职场文书
投标诚信承诺书
2014/05/26 职场文书
党的群众路线教育实践活动个人整改方案
2014/10/25 职场文书
优秀共青团员事迹材料
2014/12/25 职场文书
董事长岗位职责
2015/02/13 职场文书
常住证明范本
2015/06/23 职场文书
php 获取音视频时长,PHP 利用getid3 获取音频文件时长等数据
2021/04/01 PHP