js实现右下角提示框的方法

本文实例讲述了js实现右下角提示框的方法。分享给大家供大家参考。具体实现方法如下：

实现右下角提示框的Jquery插件 （popup.js）

代码如下:

//兼容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.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: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() 
            }) 
    } 
  }, 
  closeDiv:function(){ 
      $("#popClose").click(function(){ 
            $('#pop').hide(); 
          } 
    ); 
  } 
}

右下角提示框实例

代码如下:

<!DOCTYPE HTML> 
<html> 
<head> 
    <meta charset="UTF-8"> 
    <title>jquery右下角pop弹窗</title> 
</head> 
<body> 
<h2>请看浏览器有下角</h2> 
<!--jquery右下角pop弹窗start --> 
<script type="text/javascript" > 
      window.onload=function(){ 
            var pop=new Pop("这里是标题，哈哈", 
            "URL超链接", 
            "请输入你的内容简介，这里是内容简介.请输入你的内容简介，这里是内容简介.请输入你的内容简介，这里是内容简介"); 
        } 
</script> 
<script type="text/javascript" src="jquery.min.js"></script> 
<script type="text/javascript" src="popup.js"></script> 
<div id="pop" style="display:none;"> 
    <style type="text/css"> 
    *{}{margin:0;padding:0;} 
    #pop{}{background:#fff;width:260px;border:1px solid #e0e0e0;font-size:12px;position: fixed;right:10px;bottom:10px;} 
    #popHead{}{line-height:32px;background:#f6f0f3;border-bottom:1px solid #e0e0e0;position:relative;font-size:12px;padding:0 0 0 10px;} 
    #popHead h2{}{font-size:14px;color:#666;line-height:32px;height:32px;} 
    #popHead #popClose{}{position:absolute;right:10px;top:1px;} 
    #popHead a#popClose:hover{}{color:#f00;cursor:pointer;} 
    #popContent{}{padding:5px 10px;} 
    #popTitle a{}{line-height:24px;font-size:14px;font-family:'微软雅黑';color:#333;font-weight:bold;text-decoration:none;} 
    #popTitle a:hover{}{color:#f60;} 
    #popIntro{}{text-indent:24px;line-height:160%;margin:5px 0;color:#666;} 
    #popMore{}{text-align:right;border-top:1px dotted #ccc;line-height:24px;margin:8px 0 0 0;} 
    #popMore a{}{color:#f60;} 
    #popMore a:hover{}{color:#f00;} 
    </style> 
    <div id="popHead"> 
    <a id="popClose" title="关闭">关闭</a> 
    <h2>温馨提示</h2> 
    </div> 
    <div id="popContent"> 
    <dl> 
        <dt id="popTitle">这里是标题</dt> 
        <dd id="popIntro">这里是内容简介</dd> 
    </dl> 
    <p id="popMore">查看 »</p> 
    </div> 
</div> 
<!--右下角pop弹窗 end--> 
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>jquery右下角弹窗  
</body> 
</html>

希望本文所述对大家的javascript程序设计有所帮助。