鼠标中键滚动事件案例：向下滚动弹出div层，向上滚动实现隐藏功能

html 部分

< div  id ="m-tb" > 
   <!-- 容器  -->
   < div  class ="box" >家长专线：028-66009003、教员专线：028-66725630  /   &nbsp;   &nbsp;  &nbsp; < a  target ="_blank"  href ="http://wpa.qq.com/msgrd?v=3&uin=1928030088&site=qq&menu=yes"  title ="思问家教网-家长咨询"  class ="cs_online_qq" >< font  color ="#FFFFFF" >家长咨询： </ font >< img  border ="0"  src ="http://wpa.qq.com/pa?p=2:1928030088:51"  alt ="思问家教网-家长咨询"  title ="思问家教网-家长咨询"  align ="absmiddle"   />  </ a >  &nbsp;  &nbsp;  &nbsp; < a  target ="_blank"  href ="http://wpa.qq.com/msgrd?v=3&uin=1928040088&site=qq&menu=yes"  title ="思问家教网-教员咨询"   class ="cs_online_qq"   >< font  color ="#FFFFFF" >教员咨询： </ font >< img  border ="0"  src ="http://wpa.qq.com/pa?p=2:1928040088:51"  alt ="思问家教网-教员咨询"  title ="思问家教网-教员咨询"  align ="absmiddle"   />  </ a ></ div ></ div >
   <!-- /容器  --> 
</ div >
<!-- /A  -->
< div  id ="kefu1" >
     < div  class ="cs_close" >< a  href ="javascript:;"  onClick ="$('#kefu1').fadeOut()" >< span >关闭 </ span ></ a ></ div >
     < div  class ="cs_tel" ></ div >
     < div  class ="cs_tel_ct" >
         < p  style ="margin-bottom: 0" >< font  size ="3"  face ="微软雅黑"  color ="#000000" >家长专线 </ font ></ p >
         < p  style ="margin-top: 0" >< span  class ="cs_tel_num" >028-6600 9003 </ span ></ p >
         < p  style ="margin-bottom: 0" >< font  size ="3"  face ="微软雅黑"  color ="#000000" >教员专线 </ font ></ p >
         < p  style ="margin-top: 0" >< span  class ="cs_tel_num" >028-6672 5630 </ span ></ p >
     </ div >
     < div  class ="cs_spr" ></ div >
     < div  class ="cs_online" ></ div >
     < div  class ="cs_online_ct" >
         < div  class ="cs_online_qq" >< a  target ="_blank"  href ="http://wpa.qq.com/msgrd?v=3&uin=1928030088&site=qq&menu=yes"  title ="思问家教网-家长咨询" >家长咨询 < img  border ="0"  src ="http://wpa.qq.com/pa?p=2:1928030088:51"  alt ="思问家教网-家长咨询"  title ="思问家教网-家长咨询"  align ="absmiddle"   /></ a ></ div >
         < div  class ="cs_online_qq" >< a  target ="_blank"  href ="http://wpa.qq.com/msgrd?v=3&uin=1928040088&site=qq&menu=yes"  title ="思问家教网-教员咨询"   >教员咨询 < img  border ="0"  src ="http://wpa.qq.com/pa?p=2:1928040088:51"  alt ="思问家教网-教员咨询"  title ="思问家教网-教员咨询"  align ="absmiddle"   /></ a ></ div >

 css 部分

 

<style>  *html #kefu1 {   /* --IE6 Hack - Fixed Positioning to the Bottom-- */
    margin-top:  50px;   /* --Prevents IE6 from having an infinity scroll bar - due to 1px border on #footpanel-- */
    position:  absolute;
    top: expression(eval(document.compatMode &&document.compatMode=='CSS1Compat') ?documentElement.scrollTop+50 : document.body.scrollTop +50);
}

#kefu1{ position: fixed;  right: 0px;  top: 280px;  z-index: 10008;  width:  132px;  padding:  10px;  background:  #fff;  border:  1px solid #ddd;  box-shadow:  1px 1px 1px #d4d4d4;  font-size:  12px;}
.cs_tel{ height: 25px;  background:  url(images/img.gif?v=1) no-repeat 0px 0px;}
.cs_tel_ct{ color:  #666;  line-height:  150%;}
.cs_tel_num{ color:  #c00;  font-size:  18px;  font-family:  Arial,Verdana;  font-style:  italic;  font-weight:  bold;  display:  block;  padding:  5px 0px;}

.cs_online{ height: 30px;  background:  url(images/img.gif?v=1) no-repeat 0px -50px;}
.cs_online_qq{ height:  25px;}
.cs_online_qq a:link, .cs_online_qq a:active, .cs_online_qq a:visited, .cs_online_qq a:hover{ text-decoration:  none;  color:  #666;}

.cs_qcode{ padding:  10px 0px 0px 0px;}

.cs_free{ height: 32px;  background:  url(images/img.gif?v=1) no-repeat 0px -100px;}
.cs_free a{ display:  block;  height:  32px;}
.cs_free a span{ display:  none;}

.cs_baidu{ height: 32px;  background:  url(images/img.gif?v=1) no-repeat 0px -200px;}
.cs_baidu a{ display:  block;  height:  32px;}
.cs_baidu a span{ display:  none;}

.cs_spr{ border-bottom:  1px dashed #c0c0c0;  margin:  8px 0px;}
.cs_space{ clear: both;  overflow: hidden;  height: 8px;}
.cs_close{ position:  absolute;  right:  5px;  top:  5px;  width:  12px;  height:  12px;  background:  url(images/img.gif?v=1) no-repeat 0px -150px;}
.cs_close a{ display:  block;  height:  10px;}
.cs_close a span{ display:  none;}

#m-tb{ _display: none; width: 100%;  height: 40px; line-height: 40px; position: fixed;  bottom: -40px; left: 0; _bottom: 0; _position: absolute;  _bottom: expression(documentElement.scrollTop); -moz-box-shadow:  0 2px 3px rgba(0,0,0,.12); z-index: 999999; border-bottom: 1px solid #dfe3e6; background: url(images/bottom_bg.png)0px 0px repeat-x;}
#m-tb .box{ width: 930px; margin: 0 auto; padding-left: 50px; background: url(images/tel-logo.png)5px 1px no-repeat; position: relative; font-size: 20px; color: #fff; font-weight: bold;  font-family: Arial, 微软雅黑, 'Microsoft YaHei';}

#g-hd{ width: 980px; height: 130px; margin: 0 auto;  text-align: center;}
#g-hd .m-logo{ width: 200px;  height: 130px;  text-indent: -9999px;  background: url(/2014/images/logo.png) center left no-repeat}
#g-hd .m-logo a{ width: 200px;  height: 130px; display: block}
#g-hd .m-box{ width: 780px;  height: 130px;  background: url(/2014/images/tdcq.gif) center center no-repeat}

</style>

 

 js 部分

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript">
$( function(){
    $(window).scroll( function() {
         var topToolbar = $("#m-tb");
         var headerH = $("#g-hd").outerHeight();
         var scrollTop = $(document).scrollTop();
         if ($.browser.msie && ($.browser.version == "6.0") && !$.support.style) {
             if( scrollTop >= headerH ){
                topToolbar.show();
            } else  if( scrollTop < headerH ){
                topToolbar.hide();
            }
        } else{
             if( scrollTop >= headerH ){
                topToolbar.stop( false, true).animate({ 'bottom':0 });
            } else  if( scrollTop < headerH ){
                topToolbar.stop( false, true).animate({ 'bottom':-40 });
            }
        };
    });
});
</script>

View Code

 具体效果可看 www.xtyjiajiao.com

转载于:https://www.cnblogs.com/demoworld/p/3850357.html