简洁的客服代码
下午在做开发的时候,需要用到一个客服代码,就随手找了一个,用着还不错。
希望大家能够喜欢。
html代码
<!-- kf start --> <div class="yb_conct"> <div class="yb_bar"> <ul> <li class="yb_top">返回顶部</li> <li class="yb_phone">4008-123-456</li> <li class="yb_QQ"> <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=123456&site=qq&menu=yes&from=message&isappinstalled=0" title="即刻发送您的需求">在线咨询</a> </li> <li class="yb_ercode" style="height:53px;">微信二维码 <br> <img class="hd_qr" src="static/images/weixin.jpg" width="125" alt="关注你附近"> </li> </ul> </div> </div> <!-- kf end -->
css代码
/*固定的悬浮窗*/ .yb_conct{position:fixed;z-index:9999999;top:200px;right:-127px;cursor:pointer;transition:all .3s ease;} .yb_bar ul li{width:180px;height:53px;font:16px/53px 'Microsoft YaHei';color:#fff;text-indent:54px;margin-bottom:3px;border-radius:3px;transition:all .5s ease;overflow:hidden;} .yb_bar .yb_top{background:#ff4a00 url(../images/fixCont.png) no-repeat 0 0;} .yb_bar .yb_phone{background:#ff4a00 url(../images/fixCont.png) no-repeat 0 -57px;} .yb_bar .yb_QQ{text-indent:0;background:#ff4a00 url(../images/fixCont.png) no-repeat 0 -113px;} .yb_bar .yb_ercode{background:#ff4a00 url(../images/fixCont.png) no-repeat 0 -169px;} .hd_qr{padding:0 29px 25px 29px; display: inline; width: 125px;} .yb_QQ a{display:block;text-indent:54px;width:100%;height:100%;color:#fff;}
js代码
$(document).ready(function(){ // 悬浮窗口 $(".yb_conct").hover(function() { $(".yb_conct").css("right", "5px"); $(".yb_bar .yb_ercode").css('height', '200px'); }, function() { $(".yb_conct").css("right", "-127px"); $(".yb_bar .yb_ercode").css('height', '53px'); }); // 返回顶部 $(".yb_top").click(function() { $("html,body").animate({ 'scrollTop': '0px' }, 300) }); });
ok,大家可以自己试试。
效果图如下:
默认样式和展开样式:
over,谢谢大家。
发布时间:2017-10-09,17:11:00
这是一段客服代码的展示。包括js和css