利用jQuery實現底部頁面滾動彈出在線客服



69 274 92



特效描述:利用jQuery實現 底部頁面滾動 彈出在線客服,利用jQuery實現底部頁面滾動彈出在線客服

代碼結構

1. 引入JS

<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>

2. HTML代碼

<div class="c_meau">
  <div class="fl">
    <h4>彈出&amp;咨詢<br>
      鼠標滾動</h4>
    <div class="fl_o">
      <dl class="fl_o_o">
        <dt> <a href="http://www.cqetom.live//" target="_blank"> <img src="images/c_meau_1.png"></a></dt>
        <dd>QQ咨詢</dd>
      </dl>
      <dl class="fl_o_o">
        <dt> <a href="http://www.cqetom.live//" target="_blank"> <img src="images/c_meau_2.png"> </a> </dt>
        <dd>新浪微博</dd>
      </dl>
      <dl class="fl_o_o">
        <dt><img src="images/c_meau_3.png"></dt>
        <dd>微信公眾號</dd>
      </dl>
      <dl class="fl_o_o">
        <dt><a href="http://www.cqetom.live/" target="_blank"><img src="images/c_meau_7.gif"></a></dt>
        <dd>建站幫助</dd>
      </dl>
    </div>
    <img src="images/c_meau_7.png"> </div>
  <div class="fr">
    <div class="fr_o"><img src="images/c_meau_5.png"></div>
    <div class="fr_t"><img src="images/c_meau_6.png"></div>
  </div>
  <div class="clear"></div>
</div>
<script type="text/javascript">
    $(window).scroll(function () {
        if ($(this).scrollTop() > 100) {
            $(".c_meau").stop().show().animate({ bottom: '100px' }, 300);
        }
        else {
            $(".c_meau").stop().animate({ bottom: '-430px' }, 300);
        }
    });
    $('.c_meau .fr_t').click(function () {
        $('body,html').animate({ scrollTop: 0 }, 500);
        $(".c_meau").animate({ bottom: '-380px', opacity: '0' }, 500);
        return false;
    });
</script>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 浮動 懸浮 懸浮層 懸浮框 浮動層 浮動框 浮動插件 懸浮插件 彈出層拖動 窗口 彈出 彈窗 彈出層 提示框 對話框 遮罩 遮罩層 彈窗插件 滑動星星打分 浮動提示框 在線客服 其他 浮動菜單 浮動導航 二維碼 qq在線客服 qq客服 在線客服插件 提示框/彈出層
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子