侧边客服效果

价格:免费

网站侧边栏客服,简单易用。

QQ截图20200111215216.jpg

定义CSS:

   
		body{height: 2000px;}     /*********正式运用中当删除此行代码**********/    
			
.izl-rmenu{position:fixed;right:0; bottom:25%;padding-bottom:73px;background:url(images/r_b.png) 0px bottom no-repeat;z-index:999; width:50px; }    
.izl-rmenu .btn{width:160px;height:50px;margin-bottom:1px;cursor:pointer;position:relative;}    
.izl-rmenu .btn img{width:50px; height:50px;}    
.izl-rmenu .btn-wx{background:url(weixin.jpg) 0px 0px no-repeat;background-color:#0188ca;}    
.izl-rmenu .btn-wx:hover{background-color:#0188ca;}    
.izl-rmenu .btn-wx .pic{position:absolute;left:-160px;top:0px;display:none;width:160px!important;height:160px;}    
.izl-rmenu .btn-top{background:url(r_top.png) 0px 0px no-repeat;background-color:#000;display:none;}    
.izl-rmenu .btn-top:hover{background-color:#000;}


HTML代码

<div id="top">    
<div id="izl_rmenu" class="izl-rmenu">    
 	<a href="{label:shangqiao}" target="_blank"  class="btn "  rel="nofollow"><img src="right1.jpg"  ></a>      
<a href="{label:youtube}" target="_blank"  class="btn "  rel="nofollow"><img src="youtube.jpg"></a>     
<a href="{label:facebook}" target="_blank"   class="btn " rel="nofollow"><img src="linkin.jpg"></a>    
<a href="{label:linkedin}" target="_blank"   class="btn " rel="nofollow"><img src="facebook.jpg"></a>    
<div class="btn btn-wx"><img   class="pic" src="2WM.jpg" alt="{pboot:companyname}"  style="display: none; width:160px!impotrant; height:160px; z-index: 9999;"></div>    
<div class="btn btn-top" style="display: none;"></div>    
</div>    
</div>


JS代码

引入JQ,注意版本,

<script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script>


写  JS代码

<script type="text/javascript">    
$(function(){    
	$("#izl_rmenu").each(function(){    
		$(this).find(".btn-wx").mouseenter(function(){    
			$(this).find(".pic").fadeIn("fast");    
		});    
		$(this).find(".btn-wx").mouseleave(function(){    
			$(this).find(".pic").fadeOut("fast");    
		});    
		$(this).find(".btn-top").click(function(){    
			$("html, body").animate({    
				"scroll-top":0    
			},"fast");    
		});    
	});    
	var lastRmenuStatus=false;    
	$(window).scroll(function(){//bug    
		var _top=$(window).scrollTop();    
		if(_top>200){    
			$("#izl_rmenu").data("expanded",true);    
		}else{    
			$("#izl_rmenu").data("expanded",false);    
		}    
		if($("#izl_rmenu").data("expanded")!=lastRmenuStatus){    
			lastRmenuStatus=$("#izl_rmenu").data("expanded");    
			if(lastRmenuStatus){    
				$("#izl_rmenu .btn-top").slideDown();    
			}else{    
				$("#izl_rmenu .btn-top").slideUp();    
			}    
		}    
	});    
});    
</script>


本文关键词:
相关文章
通用联系方式带地图2.0上一篇文章
下一篇文章响应式手机手机底部悬浮代码
COPYRIGHT (©) 2019 企业极速建站-高端风格模板建站-高端网站定制设计-黑马建站专业网站建设公司.
粤ICP备16086975号-1   本站风格包括: 风格云库【132套】 欧美风【98套】 FLASH风格【53套】