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简单实现登陆验证附效果图
Nov 19 Javascript
js中的for如何实现foreach中的遍历
May 31 Javascript
jQuery手机拨号界面特效代码分享
Aug 27 Javascript
javaScript事件学习小结(四)event的公共成员(属性和方法)
Jun 09 Javascript
JS中使用FormData上传文件、图片的方法
Aug 07 Javascript
浅谈jQuery中的$.extend方法来扩展JSON对象
Feb 12 Javascript
AngularJS实现自定义指令与控制器数据交互的方法示例
Jun 19 Javascript
使用JS实现气泡跟随鼠标移动的动画效果
Sep 16 Javascript
js中apply和Math.max()函数的问题及区别介绍
Mar 27 Javascript
JS实现将对象转化为数组的方法分析
Jan 21 Javascript
详解项目升级到vue-cli3的正确姿势
Jan 28 Javascript
微信小程序常见页面跳转操作简单示例
May 01 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
5.PHP的其他功能
2006/10/09 PHP
SSI指令
2006/11/25 PHP
表格展示无限级分类(PHP版)
2012/08/21 PHP
ThinkPHP文件上传实例教程
2014/08/22 PHP
WordPress开发中用于获取近期文章的PHP函数使用解析
2016/01/05 PHP
初识PHP中的Swoole
2016/04/05 PHP
利用PHPExcel实现Excel文件的写入和读取
2017/04/26 PHP
php ZipArchive实现多文件打包下载实例
2019/10/31 PHP
PHP执行linux命令6个函数代码实例
2020/11/24 PHP
对象特征检测法判断浏览器对javascript对象的支持
2009/07/25 Javascript
js 字符串操作函数
2009/07/25 Javascript
jquery中dom操作和事件的实例学习 下拉框应用
2011/12/01 Javascript
extjs表格文本启用选择复制功能具体实现
2013/10/11 Javascript
javascript 模拟坦克大战游戏(html5版)附源码下载
2014/04/08 Javascript
jquery根据name取得select选中的值实例(超简单)
2018/01/25 jQuery
React Native 图片查看组件的方法
2018/03/01 Javascript
解决Vue 通过下表修改数组,页面不渲染的问题
2018/03/08 Javascript
p5.js入门教程之平滑过渡(Easing)
2018/03/16 Javascript
vue.js中toast用法及使用toast弹框的实例代码
2018/08/27 Javascript
jquery实现垂直无限轮播的方法分析
2019/07/16 jQuery
js实现无限瀑布流实例方法
2019/09/16 Javascript
Echarts地图添加引导线效果(labelLine)
2019/09/30 Javascript
JavaScript Canvas编写炫彩的网页时钟
2019/10/16 Javascript
es6中new.target的作用和使用场景简单示例分析
2020/03/14 Javascript
利用python GDAL库读写geotiff格式的遥感影像方法
2018/11/29 Python
Python之lambda匿名函数及map和filter的用法
2019/03/05 Python
Python 生成器,迭代,yield关键字,send()传参给yield语句操作示例
2019/10/12 Python
pytorch:model.train和model.eval用法及区别详解
2020/02/20 Python
keras实现theano和tensorflow训练的模型相互转换
2020/06/19 Python
护士的自我鉴定
2014/02/07 职场文书
八一慰问活动方案
2014/02/07 职场文书
搬迁通知
2015/04/20 职场文书
圣诞晚会主持词
2015/07/01 职场文书
读《钢铁是怎样炼成的》有感:百炼方成钢
2019/11/05 职场文书
Python道路车道线检测的实现
2021/06/27 Python
腾讯云服务器部署前后分离项目之前端部署
2022/06/28 Servers