欢迎来到六久阁织梦模板网!
您的位置: 主页 > 网页特效 > 客服代码 >

jQuery页面滚动自动弹出客服特效

六久阁织梦模板网客服代码 浏览:0

jQuery页面滚动自动弹出客服特效演示图: 代码: 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.lol9.cn/" target="_blank" img src="images/c_meau_1.png"/a/dt ddQQ咨询/dd

jQuery页面滚动自动弹出客服特效演示图:

jQuery页面滚动自动弹出客服特效

代码:


<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.lol9.cn/" 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.lol9.cn/" 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.lol9.cn" 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客服特效
下一篇 » 2017年06月25日
有问题在这里提问,阁主会为你解决!
  • 全部评论(0
    还没有评论,快来抢沙发吧!