首頁 > web前端 > js教程 > js實作右下角提示框的方法_javascript技巧

js實作右下角提示框的方法_javascript技巧

WBOY
發布: 2016-05-16 16:16:03
原創
1044 人瀏覽過

本文實例講述了js實作右下角提示框的方法。分享給大家供大家參考。具體實作方法如下:

實作右下角提示框的Jquery外掛 (popup.js)

複製程式碼 程式碼如下:
//相容ie6的固定程式碼  
//jQuery(函數($j){ 
//    $j('#pop').positionFixed() 
//}) 
(函數($j){ 
    $j.positionFixed = 函數(el){ 
        $j(el).each(function(){ 
            新修復(此)
        }) 
        回 el;                   
    } 
    $j.fn.positionFixed = function(){ 
        返回 $j.positionFixed(this)
    } 
    var 固定 = $j.positionFixed.impl = 函數(el){ 
        var o=此; 
        o.sts={ 
            目標:$j(el).css('position','fixed'), 
            容器:$j(窗口)
        } 
        o.sts.currentCss = { 
            上方 : o.sts.target.css('top'),               
            右:o.sts.target.css('右'),               
            底部 : o.sts.target.css('bottom'),                 
            左:o.sts.target.css('左')              
        } 
        if(!o.ie6)返回; 
        o.bindEvent(); 
    } 
    $j.extend(fixed.prototype,{ 
        ie6 : $.browser.msie && $.browser.version         綁定事件:函數(){ 
            var o=此; 
            o.sts.target.css('位置','絕對') 
            o.overRelative().initBasePos(); 
            o.sts.target.css(o.sts.basePos) 
            o.sts.container.scroll(o.scrollEvent()).resize(o.resizeEvent()); 
            o.setPos(); 
        }, 
        overRelative : function(){ 
            var o=此; 
            varrelative = o.sts.target.parents().filter(function(){ 
                if($j(this).css('position')=='relative')return this; 
            }) 
            if(relative.size()>0)relative.after(o.sts.target) 
            返回o; 
        }, 
        initBasePos : 函數(){ 
            var o=此; 
            o.sts.basePos = { 
                上方:o.sts.target.offset().top - (o.sts.currentCss.top=='auto'?o.sts.container.scrollTop():00),
                左:o.sts.target.offset().left - (o.sts.currentCss.left=='auto'?o.sts.container.scrollLeft():0 
            } 
            返回o; 
        }, 
        setPos : 函數(){ 
            var o=此; 
            o.sts.target.css({ 
                上方:o.sts.container.scrollTop() o.sts.basePos.top,
                左: o.sts.container.scrollLeft() o.sts.basePos.left
            }) 
        }, 
        滾動事件:函數(){ 
            var o=此; 
            返回函數(){ 
                o.setPos(); 
            } 
        }, 
        resizeEvent : function(){ 
            var o=此; 
            返回函數(){ 
                setTimeout(函數(){ 
                    o.sts.target.css(o.sts.currentCss)       
                    o.initBasePos(); 
                    o.setPos()
                },1)     
            }            
        } 
    }) 
})(jQuery) 
 
jQuery(函數($j){ 
    $j('#footer').positionFixed() 
}) 
 
//pop右下角彈窗函數
函數 Pop(標題、網址、簡介){ 
    this.title=標題; 
    這個.url=url; 
    this.intro=簡介; 
    this.aearTime=1000; 
    this.hideTime=500; 
    this.delay=10000; 
    // 新增資訊
    this.addInfo(); 
    // 顯示
    this.showDiv(); 
    //關閉
  this.closeDiv(); 

Pop.prototype={ 
  addInfo:function(){ 
    $("#popTitle a").attr('href',this.url).html(this.title); 
    $("#popIntro").html(this.intro); 
    $("#popMore a").attr('href',this.url); 
  }, 
  showDiv:函數(時間){ 
        if (!($.browser.msie && ($.browser.version == "6.0") && !$.support.style)) { 
      $('#pop').slideDown(this.apearTime).delay(this.delay).fadeOut(400);; 
    } else{//呼叫jquery.fixed.js,解為ie6不能用fixed
      $('#pop').show(); 
            jQuery(函數($j){ 
                $j('#pop').positionFixed()
            }) 
    } 
  }, 
  closeDiv:function(){ 
      $("#popClose").click(function(){ 
            $('#pop').hide(); 
          } 
    ); 
  } 
}

右下角提示框實例

複製程式碼 程式碼如下:
 
 
 
     
    jquery右下角pop弹窗 
 
 

请看浏览器有下角

 
 
 
 
 
 
 




>


>



gt;








;
;
;
>
;



>


>




gt;








;
;
;

>
;



>


>



gt;





>jquery右下角彈跳視窗  
正文> 
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板