この記事の例では、右下隅にあるプロンプト ボックスを 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();
);
}
}
右下隅のプロンプトボックスの例
コードをコピー コードは次のとおりです:
jquery右下角pop弹窗
请看浏览器有下角
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 プログラムの設計が役立つことを望みます。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
