您的位置:首页 > Web前端 > jquery > 正文

js右下角提示框

更多 时间:2014-11-6 类别:Web前端 浏览量:1552

js右下角提示框

js右下角提示框

一、Jquery右下角提示框效果如图

 

二、实现右下角提示框的Jquery插件 (popup。js)

  •  
  •  
  • JScript 代码   复制
  • 
    //兼容ie6的fixed代码 
    //jQuery(function($j){
    //    $j('#pop').positionFixed()
    //})
    (function($j){
        $j.positionFixed = function(el){
            $j(el).each(function(){
                new fixed(this)
            })
            return el;                  
        }
        $j.fn.positionFixed = function(){
            return $j.positionFixed(this)
        }
        var fixed = $j.positionFixed.impl = function(el){
            var o=this;
            o.sts={
                target : $j(el).css('position','fixed'),
                container : $j(window)
            }
            o.sts.currentCss = {
                top : o.sts.target.css('top'),              
                right : o.sts.target.css('right'),              
                bottom : o.sts.target.css('bottom'),                
                left : o.sts.target.css('left')             
            }
            if(!o.ie6)return;
            o.bindEvent();
        }
        $j.extend(fixed.prototype,{
            ie6 : $.browser.msie && $.browser.version < 7.0,
            bindEvent : function(){
                var o=this;
                o.sts.target.css('position','absolute')
                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=this;
                var relative = o.sts.target.parents().filter(function(){
                    if($j(this).css('position')=='relative')return this;
                })
                if(relative.size()>0)relative.after(o.sts.target)
                return o;
            },
            initBasePos : function(){
                var o=this;
                o.sts.basePos = {
                    top: o.sts.target.offset().top - (o.sts.currentCss.top=='auto'?o.sts.container.scrollTop():0),
                    left: o.sts.target.offset().left - (o.sts.currentCss.left=='auto'?o.sts.container.scrollLeft():0)
                }
                return o;
            },
            setPos : function(){
                var o=this;
                o.sts.target.css({
                    top: o.sts.container.scrollTop() + o.sts.basePos.top,
                    left: o.sts.container.scrollLeft() + o.sts.basePos.left
                })
            },
            scrollEvent : function(){
                var o=this;
                return function(){
                    o.setPos();
                }
            },
            resizeEvent : function(){
                var o=this;
                return function(){
                    setTimeout(function(){
                        o.sts.target.css(o.sts.currentCss)      
                        o.initBasePos();
                        o.setPos()
                    },1)    
                }           
            }
        })
    })(jQuery)
    
    jQuery(function($j){
        $j('#footer').positionFixed()
    })
    
    //pop右下角弹窗函数
    function Pop(title,url,intro){
        this.title=title;
        this.url=url;
        this.intro=intro;
        this.apearTime=1000;
        this.hideTime=500;
        this.delay=10000;
        //添加信息
        this.addInfo();
        //显示
        this.showli();
        //关闭
      this.closeli();
    }
    Pop.prototype={
      addInfo:function(){
        $("#popTitle a").attr('href',this.url).html(this.title);
        $("#popIntro").html(this.intro);
        $("#popMore a").attr('href',this.url);
      },
      showli:function(time){
            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(function($j){
                    $j('#pop').positionFixed()
                })
        }
      },
      closeli:function(){
          $("#popClose").click(function(){
                $('#pop').hide();
              }
        );
      }
    }
    
    		
  •  

    三、右下角提示框实例

  •  
  •  
  • HTML 代码   复制
  • 
    <!DOCTYPE HTML>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>jquery右下角pop弹窗</title>
    </head>
    <body>
    <h2>请看浏览器有下角</h2>
    <!--jquery右下角pop弹窗start -->
    <script type="text/javascript" >
      
    标签:提示框