1顶

基于jquery在网页窗口不同位置分别弹出层特效演示

稿源：互联网 2022-04-02 21:40:12 点击： 11574 撤稿纠错

之前写的效果，无意中翻出来，放上来共享一下，大家觉得有用就拿去用。基于jquery在网页窗口不同位置分别弹出层特效演示

以下讨论的是和jquery 弹出层相关的基于jquery在网页窗口不同位置分别弹出层特效演示教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>弹出框特效 _ 阿里西西网页特效演示页 js.alixixi.com</title>
<style type="text/css">

</style>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
var Pop = function(options){
 this.isIE = (document.all) ? true : false;
 this.isIE6 = this.isIE && (navigator.userAgent.indexOf('MSIE 6.0') != -1);
 this.isIE6 ? this.position = "absolute" : this.position = "fixed";
 this.SetOptions(options);
 this.mode = this.options.mode;
 this.zIndex = this.options.zIndex;
 this.left = this.options.left;
 this.right = this.options.right;
 this.top = this.options.top;
 this.bottom = this.options.bottom;
 this.oPop = $("#" + this.options.oPop);
 this.oPop.css({ position:this.position, "z-index":this.zIndex });
 
 //页面载入时是否显示遮盖层
 if(this.options.beCover){
  this.Start();
  this.Initialization();
  this.FullScreen(this.heightDocument, this.widthDocument);
 }
 
 //是否添加浮动层收缩
 if(!!this.options.idShrink) this.Shrink(this.options.idShrink);
 
 /*关闭、打开浮动层*/
 if(this.options.idClose.length != 0) this.Close(this.options.idClose);
 !!this.options.idOpen ? this.Open(this.options.idOpen) : this.Start();
 
};
Pop.prototype = {
 SetOptions: function(options){
  this.options = {
   /*浮动框相关属性*/
   oPop: "idPop",            //浮动框id
   zIndex: "999",            //浮动框的z-index
   left: 0,                  //距离左边多少像素
   right: 0,                 //距离右边多少像素
   top: 0,                   //距离顶部多少像素
   bottom: 0,                //距离底部多少像素
   mode: ["left", "top"],    //浮动层默认定位左上
   
   /*遮罩层相关属性*/
   beCover: false,           //页面载入时是否显示遮盖层
   cover: false,             //是否显示遮盖层(遮盖层显示的必须条件)
   zIndexCover: 888,         //遮盖层的z-index
   colorCover: "#000",       //遮盖层的背景颜色
   opactiyCover: 0.5,        //遮盖层的透明度
   
   /*浮动框收缩相关属性*/
   idShrink: null,           //收缩按钮id
   minHeight: 0,            //收缩后的高度
   maxHeight: 0,       //展开后的高度
   classOne: null,           //切换用的class
   classTwo: null,           //切换用的class
   
   /*关闭、打开浮动层相关属性*/
   idOpen: null,             //打开按钮
   idClose: []               //关闭按钮
  };
  $.extend(this.options, options || {});
 },
 Initialization: function(){
  this.widthPop = this.oPop.width();
  this.heightPop = this.oPop.height();
  this.heightDocument = $(document).height();
  this.widthDocument = Math.min($(document).width(), $("body").width()); //避免ie6下加上滚动条的宽度
  this.heightWindow = $(window).height();
  this.widthWindow = $(window).width();
  this.topScroll = $(window).scrollTop();
  this.leftScroll = $(window).scrollLeft();
 },
 Start: function(){
  switch(this.mode[0].toLowerCase()) {
   case "left":
    this.LeftRightLocation();
    break;
   case "right":
    this.LeftRightLocation();
    break;
   default:
    this.CenterLocation();
  }
 },
 //mark等于false为水平垂直居中定位
 GetValue: function(mark){
  if(this.oPop.css("display") == "none") return; //浮动层显示时才动态计算其坐标(解决一个效率问题)
  var level = this.mode[0].toLowerCase(), vertical = this.mode[1].toLowerCase();
  this.Initialization();
  if(mark){
   if(!this.isIE6){
    level == "left" ? this.oPop.css({ left: this.left }) : this.oPop.css({ right: this.right });
    vertical == "top" ? this.oPop.css({ top: this.top }) : this.oPop.css({ bottom: this.bottom });
   }else{
    var x_final = level == "left" ? this.leftScroll + this.left : this.widthWindow + this.leftScroll - this.widthPop - this.right;
    var y_final = vertical == "top" ? this.topScroll + this.top : this.heightWindow + this.topScroll - this.heightPop - this.bottom;
    this.oPop.css({ top: y_final, left: x_final });
   }
  }else{
   if(!this.isIE6){
    var x_final = parseInt((this.widthWindow - this.widthPop) / 2);
    var y_final = parseInt((this.heightWindow - this.heightPop) / 2);
   }else{
    var x_final = (this.widthWindow - this.widthPop) / 2 + this.leftScroll;
    var y_final = (this.heightWindow - this.heightPop) / 2 + this.topScroll;
   }
   this.oPop.css({ top: y_final, left: x_final });
  }
  
  //IE6在浮动层中添加iframe
  if(this.isIE6){ this.AddIframe(this.oPop, this.heightPop, this.widthPop); }
 },
 LeftRightLocation: function(){
  this.GetValue(true);
  var _this = this;
  $(window).bind("scroll."+this.options.oPop, function(){
   _this.GetValue(true);
  }).bind("resize."+this.options.oPop, function(){
   _this.GetValue(true);
  })
 },
 CenterLocation: function(){
  this.GetValue(false);
  var _this = this;
  $(window).bind("scroll."+this.options.oPop, function(){
   _this.GetValue(false); 
  }).bind("resize."+this.options.oPop, function(){
   _this.GetValue(false); if(_this.oPop.css("display") != "none") _this.FullScreen(_this.heightDocument, _this.widthDocument);
  });
 },
 FullScreen: function(oHeight, oWidth){
  if(!this.options.cover) return;
  
  //遮盖层参数
  this.zIndexCover = this.options.zIndexCover;
  this.colorCover = this.options.colorCover;
  this.opactiyCover = this.options.opactiyCover;
  
  if($("#popMask").length == 0) $("body").append("<div id="popMask"></div>");
  
  //ie6遮罩层定位absolute,非ie6遮罩层定位fixed
  if(this.isIE6){
   $("#popMask").css({ position: "absolute", "z-index": this.zIndexCover, top: 0, left: 0, height: oHeight, width: oWidth, opacity: this.opactiyCover, background: this.colorCover }); 
   //IE6在浮动层中添加iframe
   this.AddIframe($("#popMask"), oHeight, oWidth);
  }else{
   $("#popMask").css({ position: "fixed", "z-index": this.zIndexCover, top: 0, left: 0, height: "100%", width: "100%", opacity: this.opactiyCover, background: this.colorCover }); 
  }
 },
 //IE6覆盖select控件
 AddIframe: function(iElement, iHeight, iWidth){
  iElement.append("<iframe></iframe>");
  var oIframe = iElement.children("iframe");
  oIframe.css({ position: "absolute", top: 0, left: 0, opacity: 0, "z-index": -1, height: iHeight, width: iWidth, border: 0 });
 },
 //浮动层收缩
 Shrink: function(iShrink){
  this.minHeight = this.options.minHeight;
  this.maxHeight = this.options.maxHeight;
  this.classOne = this.options.classOne;
  this.classTwo = this.options.classTwo;
  var _this = this;
  $("#" + iShrink).toggle(
   function(){
    _this.oPop.height(_this.minHeight);
    $(this).removeClass();
    $(this).addClass(_this.classOne);
    if(_this.isIE6) _this.GetValue(true);
   },
   function(){
    _this.oPop.height(_this.maxHeight);
    $(this).removeClass();
    $(this).addClass(_this.classTwo);
    if(_this.isIE6) _this.GetValue(true);
   }
  );
 },
 Close: function(iClose){
  var _this = this;
  $.each(iClose, function(index, name){
   $("#" + name).click(function(){
    _this.oPop.css({ display: "none" });
    if(!!$("#popMask")[0]) { $("#popMask").remove(); }
    $(window).unbind("scroll."+_this.options.oPop);
    $(window).unbind("resize."+_this.options.oPop);
   })
  });
 },
 Open: function(iOpen){
  var _this = this;
  var oOpen = $("#" + iOpen);
  oOpen.click(function(){
   _this.oPop.css({ display: "block" });
   
   _this.Start();
   
   //遮罩层初始化
   _this.FullScreen(_this.heightDocument, _this.widthDocument);
  });
 }
};
</script>
<script type="text/javascript">

</script>
</head>
<body>
<div class="con"> <br />
    <br />
    <h1>浮动层：4方向+水平垂直居中定位（支持遮罩效果）</h1>
    <h3 class="red">IE6下是用absolute模拟fixed定位，其他浏览器都是以fixed来定位。</h3>
    <h2>参数说明：</h2>
    <p><strong>========浮动框相关属性============</strong></p>
    <p>oPop：浮动框ID<span>（默认值：idPop）</span></p>
    <p>zIndex:浮动框的z-index<span>（默认值：999）</span></p>
    <p>left:距离左边多少像素<span>（默认值：0）</span></p>
    <p>right:距离右边多少像素<span>（默认值：0）</span></p>
    <p>top:距离顶部多少像素<span>（默认值：0）</span></p>
    <p>bottom:距离底部多少像素<span>（默认值：0）</span></p>
    <p>mode:浮动层默认定位左上<span>（默认值：["left", "top"]）</span></p>
    <br />
    <p><strong>========遮罩层相关属性============</strong></p>
    <p>beCover:页面载入时是否显示遮盖层<span>（默认值：false）</span></p>
    <p>cover：是否显示遮盖层（遮盖层显示的必须条件）<span>（默认值：false）</span></p>
    <p>zIndexCover：遮盖层的z-index<span>（默认值：888）</span></p>
    <p>colorCover：遮盖层的背景颜色<span>（默认值："#000"）</span></p>
    <p>opactiyCover:遮盖层的透明度<span>（默认值：0.5）</span></p>
    <br />
    <p><strong>========浮动框收缩相关属性============</strong></p>
    <p>idShrink:收缩按钮ID<span>（默认值：null）</span></p>
    <p>minHeight:收缩后的高度<span>（默认值：0）</span></p>
    <p>maxHeight:展开后的高度<span>（默认值：0）</span></p>
    <p>classOne:切换用的class<span>（默认值：null）</span></p>
    <p>classTwo:切换用的class<span>（默认值：null）</span></p>
    <p><strong>========关闭、打开浮动层相关属性============</strong></p>
    <p>idOpen:打开按钮ID<span>（默认值：null）</span></p>
    <p>idClose:关闭按钮ID（支持多关闭按钮）<span>（默认值：[]）</span></p>
    <br />
    <h2>结构如下：</h2>
    <p class="red">浮动层的position类型已在脚本里面写好，用的时候只需定义浮动层的高、宽、是否显示（display）即可</p>
    <p> <div id="idPop"><br />
    ........... <br />
    </div><br />
    </p>
    <br />
    <h2>例一：左下</h2>
    <p><a href="#blank" id="open_a">打开</a></p>
    <p><a href="#blank" id="close_a">关闭</a></p>
    <br /><br />
    <h2>例二：右下</h2>
    <p><a href="#blank" id="open_b">打开</a></p>
    <p><a href="#blank" id="close_b">关闭</a></p>
    <br /><br />
    <h2>例三：左上</h2>
    <p><a href="#blank" id="open_c">打开</a></p>
    <p><a href="#blank" id="close_c">关闭</a></p>
    <br /><br />
    <h2>例四：右上</h2>
    <p><a href="#blank" id="open_d">打开</a></p>
    <p><a href="#blank" id="close_d">关闭</a></p>
    <br /><br />
    <h2>例五：中间</h2>
    <p><a href="#blank" id="open_e">打开</a></p>
    <p><a href="#blank" id="close_e">关闭</a></p>
    <br /><br />
    <h2>例六：中间(刷新页面直接显示)</h2>
    <p><a href="#blank" id="open_f">打开</a></p>
    <p><a href="#blank" id="close_f">关闭</a></p> 
</div>
 
<div class="pop" id="idPop_a" style="background:#D7006C"><a href="#blank" id="close_a_1">关闭</a></div>
<div class="pop" id="idPop_b" style="background:#FF6900"><p><a href="#blank" id="shrink">收缩</a></p><a href="#blank" id="close_b_1">关闭</a></div>
<div class="pop" id="idPop_c" style="background:#4FA600"><a href="#blank" id="close_c_1">关闭</a></div>
<div class="pop" id="idPop_d" style="background:#007770"><a href="#blank" id="close_d_1">关闭</a></div>
<div class="pop" id="idPop_e" style="background:#f00;"><a href="#blank" id="close_e_1">关闭</a></div>
<div class="pop pop_a" id="idPop_f" style="background:#668;"><a href="#blank" id="close_f_1">关闭</a></div>
<br /><br /><br /><br />
<h1>测试代码</h1>
<p><select></select><select></select>hello world!hello world!hello world!hello world!hello world!hello world!hello world!hello world!hello world!<select></select><select></select><select></select><select></select><select></select><select></select></p><p>hello world!</p><p>hello world!</p><p>hello world!</p><p>hello world!</p><p>hello world!</p><p>hello world!</p><p>hello world!</p><p>hello world!</p><p>hello world!</p><p>hello world!</p><p>hello world!</p><p>hello world!</p><p>hello world!</p><p>hello world!</p><p>hello world!</p><p>hello world!</p><p>hello world!</p><p>hello world!</p><p>hello world!</p><p>hello world!</p><p>hello world!</p><p>hello world!</p><p>hello world!</p><p>hello world!</p><p>hello world!</p><p>hello world!</p><p>hello world!</p><p>hello world!</p><p>hello world!</p><p>hello world!</p><p>hello world!</p><p>hello world!</p>
</body>
</html>

关于基于jquery在网页窗口不同位置分别弹出层特效演示的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2011031868703.shtml方便下次再访问哦。

·上一篇： 模仿日本地震海啸 ABC图片对比效果
·下一篇： 再点击一次，图片又换回来的效果

文章分类LIST >>返回首页

排行总榜

避免你的邮箱地址被自动收集的代码
有趣的按钮
控制用按钮打开新窗口的属性
单击按钮或图片打开IE首页
点击按钮打印该页
仿软件浮动按钮
在规定时间内方有效的按钮
一个按钮完成对文本框内容的复制
按钮选中文本框内所有内容
Windows式样的按钮

基于jquery在网页窗口不同位置分别弹出层特效演示

文章分类LIST >>返回首页

最新游戏

最新新闻