特效描述:利用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.cxvn.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.cxvn.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.cxvn.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>

下载地址

立即下载

1.《底部页面滚动弹出在线客服代码》援引自互联网,旨在传递更多网络信息知识,仅代表作者本人观点,与本网站无关,侵删请联系页脚下方联系方式。

2.《底部页面滚动弹出在线客服代码》仅供读者参考,本网站未对该内容进行证实,对其原创性、真实性、完整性、及时性不作任何保证。

3.文章转载时请保留本站内容来源地址,https://www.cxvn.com/code/kf/769.html