jQuery implémente une boîte de message flottante imitant Sina Weibo (avec positionnement intelligent)

jQuery implémente une boîte de message flottante imitant Sina Weibo (avec positionnement intelligent)_jquery

WBOY

Libérer： 2016-05-16 15:36:57

original

1811 Les gens l'ont consulté

L'exemple de cet article décrit l'implémentation jQuery d'une boîte de message flottante imitant Sina Weibo. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

Il s'agit d'un nouvel effet de boîte de message Sina Weibo de type jQuery. Il prend en charge les boîtes de positionnement flottantes intelligentes. Sina Weibo utilise des boîtes de positionnement intelligentes lors de l'invite des messages. La fenêtre peut être fermée en temps opportun. vers d’autres parties de votre page.

La capture d'écran de l'effet en cours d'exécution est la suivante :

L'adresse de la démo en ligne est la suivante :

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

Le code spécifique est le suivant :

<!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>

Copier après la connexion

J'espère que cet article sera utile à la programmation jQuery de chacun.