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

前端技术 2023/09/09 JavaScript

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

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

运行效果截图如下：

在线演示地址如下：

http://demo.phpstudy.net/js/2015/js-f-sina-weibo-info-dlg-demo/

具体代码如下：

<!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程序设计有所帮助。

本文地址：https://www.stayed.cn/item/25404

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案