Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk melaksanakan kotak gesaan di sudut kanan bawah dengan kemahiran js_javascript

Bagaimana untuk melaksanakan kotak gesaan di sudut kanan bawah dengan kemahiran js_javascript

WBOY
WBOYasal
2016-05-16 16:16:03993semak imbas

Contoh dalam artikel ini menerangkan cara melaksanakan kotak gesaan di penjuru kanan sebelah bawah dengan js. Kongsikan dengan semua orang untuk rujukan anda. Kaedah pelaksanaan khusus adalah seperti berikut:

Pemalam Jquery (popup.js) untuk melaksanakan kotak gesaan di penjuru kanan sebelah bawah

Salin kod Kod adalah seperti berikut:
//兼容ie6的fixed代码  
//jQuery(fungsi($j){ 
//    $j('#pop').positionFixed() 
//}) 
(fungsi($j){ 
    $j.positionFixed = function(el){ 
        $j(el).setiap(fungsi(){ 
            baharu tetap(ini) 
        }) 
        kembali el;                   
    } 
    $j.fn.positionFixed = function(){ 
        kembalikan $j.positionFixed(this) 
    } 
    var fixed = $j.positionFixed.impl = function(el){ 
        var o=ini; 
        o.sts={ 
            sasaran : $j(el).css('kedudukan','tetap'), 
            bekas : $j(tingkap) 
        } 
        o.sts.currentCss = { 
            atas : o.sts.target.css('atas'),               
            kanan : o.sts.target.css('right'),               
            bawah : o.sts.target.css('bawah'),                 
            kiri : o.sts.target.css('kiri')              
        } 
        jika(!o.ie6)kembali; 
        o.bindEvent(); 
    } 
    $j.extend(fixed.prototype,{ 
        ie6 : $.browser.msie && $.browser.version < 7.0, 
        bindEvent : function(){ 
            var o=ini; 
            o.sts.target.css('kedudukan','mutlak') 
            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=ini; 
            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) 
            kembali o; 
        }, 
        initBasePos : function(){ 
            var o=ini; 
            o.sts.basePos = { 
                atas: o.sts.target.offset().atas - (o.sts.currentCss.top=='auto'?o.sts.container.scrollTop():0), 
                kiri: o.sts.target.offset().left - (o.sts.currentCss.left=='auto'?o.sts.container.scrollLeft():0) 
            } 
            kembali o; 
        }, 
        setPos : function(){ 
            var o=ini; 
            o.sts.target.css({ 
                atas: o.sts.container.scrollTop() o.sts.basePos.top, 
                kiri: o.sts.container.scrollLeft() o.sts.basePos.left 
            }) 
        }, 
        scrollEvent : function(){ 
            var o=ini; 
            kembalikan fungsi(){ 
                o.setPos(); 
            } 
        }, 
        resizeEvent : function(){ 
            var o=ini; 
            kembalikan fungsi(){ 
                setTimeout(function(){ 
                    o.sts.target.css(o.sts.currentCss)       
                    o.initBasePos(); 
                    o.setPos() 
                },1)     
            }            
        } 
    }) 
})(jQuery) 
 
jQuery(fungsi($j){ 
    $j('#footer').positionFixed() 
}) 
 
//pop右下角弹窗函数 
fungsi Pop(tajuk,url,pengenalan){ 
    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(ini.intro); 
    $("#popMore a").attr('href',this.url); 
  }, 
  showDiv:function(masa){ 
        if (!($.browser.msie && ($.browser.version == "6.0") && !$.support.style)) { 
      $('#pop').slideDown(this.apearTime).delay(this.delay).fadeOut(400);; 
    } else{//调用jquery.fixed.js,解决ie6不能用tetap 
      $('#pop').show(); 
            jQuery(fungsi($j){ 
                $j('#pop').positionFixed() 
            }) 
    } 
  }, 
  closeDiv:function(){ 
        $("#popClose").klik(function(){ 
               $('#pop').hide();                                                                                                       );
}  
}

Contoh kotak gesaan di penjuru kanan sebelah bawah

Salin kod Kod adalah seperti berikut:
 
 
 
     
    jquery右下角pop弹窗 
 
 

请看浏览器有下角

 
 
 
 
 
 
 








< br/>























< br/>























< br/>








jquery右下角弹窗  
 

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

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn