js_javascript スキルを使用して右下隅にプロンプ​​ト ボックスを実装する方法

この記事の例では、右下隅にあるプロンプト ボックスを js で実装する方法を説明します。皆さんの参考に共有してください。具体的な実装方法は以下の通りです。

右下隅にプロンプ​​トボックスを実装するための Jquery プラグイン (popup.js)

コードをコピー コードは次のとおりです:

//兼容ie6の固定代価
//jQuery(function($j){
// $j('#pop').positionFixed()
//})
(関数($j){
    $j.positionFixed = function(el){
        $j(el).each(function(){
            新しい修正済み(これ)
        })
        エルを返します。                   
    }
    $j.fn.positionFixed = function(){
        $j.positionFixed(this) を返す
    }
    var fixed = $j.positionFixed.impl = function(el){
        var o=this; 
        o.sts={
            ターゲット : $j(el).css('position','fixed'),
            コンテナ: $j(ウィンドウ)
        }
        o.sts.currentCss = {
            トップ : o.sts.target.css('top'),
            right : o.sts.target.css('right'),
            底部 : o.sts.target.css('bottom'),
            左: 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相対 = o.sts.target.parents().filter(function(){
                if($j(this).css('position')=='relative')return this; 
            })
            if(relative.size()>0)relative.after(o.sts.target)
            を返します。 
        }、
        initBasePos : function(){
            var o=this; 
            o.sts.basePos = {
                トップ: 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)
            }
            を返します。 
        }、
        setPos : function(){
            var o=this; 
            o.sts.target.css({
                トップ: o.sts.container.scrollTop() o.sts.basePos.top,
                左: o.sts.container.scrollLeft() o.sts.basePos.left
            })
        }、
        スクロールイベント : function(){
            var o=this; 
            return function(){
                o.setPos(); 
            }
        }、
        sizeEvent : 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右下角弹窗関数数
関数 Pop(タイトル,URL,イントロ){
    this.title=タイトル; 
    this.url=url; 
    this.intro=イントロ; 
    this.apearTime=1000; 
    this.hideTime=500; 
    この.遅延=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.lay).fadeOut(400);; 
    } else{///调用jquery.fixed.js、解决ie6 は修正できません
      $('#pop').show(); 
            jQuery(function($j){
                $j('#pop').positionFixed()
            })
    }
  }、
  closeDiv:function(){
$("#popClose").click(function(){
$('#pop').hide();                                                                                                  );
}
}

右下隅のプロンプトボックスの例

コードをコピー コードは次のとおりです:

 
 
 
     
     
 
 

请看浏览器有下角

 
 
 
 
 

 
     
   

 
    关闭 
   

温馨提示

 
   

 
   

 
   

 
       

这里是标题

 
       

这里是内容简介

 
   

 
   

查看 »

 
   

 

 
 

gt;
gt;
gt;
gt;
gt;
gt;
gt;

br/>gt;
gt;
gt;
gt;
gt;
gt;
gt;

gt;
gt;
gt;
gt;
gt;
gt;
gt;

br/>gt;
gt;
gt;
gt;
gt;
gt;
gt;

gt;
gt;
gt;
gt;
gt;
gt;
gt;

br/>gt;
gt;
gt;
gt;
gt;
gt;
gt;

 

ここで説明されている大家向けの JavaScript プログラムの設計が役立つことを望みます。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。