这篇文章主要介绍了 js 实现右下角提示框的方法, 实例分析了 Jquery 插件 popup.js 的具体用法, 需要的朋友可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本文实例讲述了 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 程序设计有所帮助。
来源: