[置顶] jquerry实现9种弹出层的效果

Jquerry功能强大，可以实现很多特效。下面我将介绍利用Jqueery弹出层的9种做法，供大家学习和参考。首先要引用jqueery框架需要引用jquery.min.js文件或者jquery-1.3.2.js文件。没有可以网上下载一个。

  <script type="text/javascript" src="../../Scripts/jquery-1.3.2.min.js"></script>

    <script src="../../Scripts/popup_layer.js" type="text/javascript"></script>

    <script src="../../Scripts/jquery-1.3.2.js" type="text/javascript"></script>

<script type ="text/javascript" language ="javascript">

      //点击弹出层
        $(document).ready(function() {
                //弹出层效果一
            //        new PopupLayer({ trigger: "#abc", popupBlk: "#wl", closeBtn: "#btc" });

            //弹出层效果2--可设置弹出层位置偏移量
            new PopupLayer({ trigger: "#abc", popupBlk: "#wl", closeBtn: "#btc", offsets: { x: 102, y: -41} });

           //弹出层效果3--弹出默认弹出层
            /  new PopupLayer({ trigger: "#abc", popupBlk: "#wl", closeBtn: "#btc", useFx: true });
            //弹出层效果4--重载特效函数来完成自定义特效
             new PopupLayer({ trigger: "#abc", popupBlk: "#wl", closeBtn: "#btc", useFx: true });
                  var t4 = new PopupLayer({ trigger: "#abc", popupBlk: "#wl", closeBtn: "#btc", useFx: true });
            t4.doEffects = function(way){
            way == "open"?this.popupLayer.slideDown("slow"):this.popupLayer.slideUp("slow");
            }

            //弹出层效果5--在弹出层容器上加上自定义的class

            new PopupLayer({ trigger: "#abc", popupBlk: "#wl", closeBtn: "#btc", popupLayerClass: "t5" });

            //弹出层效果6-useOverlay设置为true即可在弹出层后使用遮罩

            new PopupLayer({ trigger: "#abc", popupBlk: "#wl", closeBtn: "#btc", useOverlay: true });

            //        //弹出层效果7-- eventType为事件触发类型，表示以何种方式触发弹出层
            new PopupLayer({ trigger: "#abc", popupBlk: "#wl", closeBtn: "#btc", eventType: "mouseover" });
            //        //弹出层效果8
                 new PopupLayer({ trigger: "#abc", popupBlk: "#wl", closeBtn: "#btc",
                     onBeforeStart: function() {
                         this.isDoPopup = false;
         setTimeout(function() { this.isDoPopup = true } .binding(this), 5000);
                    }
                  }); 
                
            //弹出层效果8   示例9：综合效果
                var t9 = new PopupLayer({ trigger: "#abc", popupBlk: "#wl", closeBtn: "#btc",
           useOverlay:true,useFx:true,offsets:{x:0,y:-41}});
          t9.doEffects = function(way){
             if(way == "open"){
                   this.popupLayer.css({opacity:0.3}).show(400,function(){
                     this.popupLayer.animate({
                        left:($(document).width() - this.popupLayer.width())/2,
                     top:(document.documentElement.clientHeight -
                          this.popupLayer.height())/2 + $(document).scrollTop(),
                          opacity:0.8
               },1000,function(){this.popupLayer.css("opacity",1)}.binding(this));
                   }.binding(this));
            }
           else{
               this.popupLayer.animate({
                      left:this.trigger.offset().left,
                   top:this.trigger.offset().top,
                      opacity:0.1
                 },{duration:500,complete:function(){
          this.popupLayer.css("opacity",1);this.popupLayer.hide()}.binding(this)});
            }
       }

        });
 </script>
//测试的div

<input type="text"  value="测试弹出层效果" id="abc" />
   <div  style="background:red  ;height:100px;width:100px;margin:6px; display:none" id="wl">
  <input type ="button" id="btc"  value ="关闭"/>
   <P> AAAAAAAAAAAA</P> 
   <P>BBBBBBBB</P>

   </div>