利用jQuery实现底部页面滚动弹出在线客服



64 253 85



特效描述:利用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.51qianduan.com//" 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.51qianduan.com//" 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.51qianduan.com/" 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

加群请备注:从官网了解到