jquery网页qq在线客服带微信二维码的在线客服代码


jquery网页qq在线客服带微信二维码的在线客服代码
jquery网页qq在线客服带微信二维码的在线客服代码以及jquery网页、qq在线客服、带微信二维码的、在线客服等js/jquery网页特效代码下载。
特效描述:jquery网页 qq在线客服 带微信二维码的 在线客服,带微信二维码在线客服

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/index.css" type="text/css" media="screen" />

2. 引入JS

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>

3. HTML代码

<div style="height:1000px;"></div>
<div class="service_box">
	<ul class="tab_nav">
		<li><a href="http://www.dijiuzhanzhang.com"><i class="icon icon_1"></i>在线客服</a></li>
		<li><a href="http://www.dijiuzhanzhang.com"><i class="icon icon_3"></i></a></li>
	</ul>
	<div class="tab_content">
		<div class="tab_plan">
			<p class="fs14">在线客服1:<br />
			<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&amp;uin=123456789&amp;site=qq&amp;menu=yes" class="qq_link"><img border="0" src="http://wpa.qq.com/pa?p=2:2833026848:51" alt="点击这里给我发消息" title="点击这里给我发消息"></a></p>
			<p class="fs14 mt10">在线客服2:<br />
			<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&amp;uin=123456789&amp;site=qq&amp;menu=yes" class="qq_link"><img border="0" src="http://wpa.qq.com/pa?p=2:123456789:51" alt="点击这里给我发消息" title="点击这里给我发消息"></a></p>
			<p class="fs14 mt10">商务客服:<br />
			<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&amp;uin=123456789&amp;site=qq&amp;menu=yes" class="qq_link"><img border="0" src="http://wpa.qq.com/pa?p=2:2833026848:51" alt="点击这里给我发消息" title="点击这里给我发消息"></a></p>
			<p class="mt10">服务时间:<br />
			9:00-18:00(工作日)<br />
			</p>
		</div>
		<div class="tab_plan" style="display: none;"><img src="images/weixin.jpg" alt="官方微信自助客服" width="130" height="130">
			<p>扫一扫关注站长素材</p>
		</div>
	</div>
</div>
<script type="text/javascript">
$(".service_box .tab_nav li").hover(function(){
	var i=$(this).index();
	$(this).addClass("active").siblings().removeClass("active");
	$(".service_box .tab_plan:eq("+i+")").show().siblings().hide();
});
$(function(){
	var t;
	$(".service_box").hover(function(){
		$(".service_box").animate({right:0},300)
		clearTimeout(t);
	},function(){
		t=setTimeout(function(e){
			$(".service_box").animate({right:"-146px"},300);
			$(".service_box").find(".tab_nav li").removeClass("active");
		},1000);
	});
});
var isTransition=true;
$(".m_logo").hover(function(){
	var r=0;
	if(isTransition){
		animateTime = setInterval(function(){
			if (r>=153){
				clearInterval(animateTime);
				isTransition=true;
			}else{
				isTransition=false;
				r++;
				$(".m_logo a").attr("style","-webkit-mask:-webkit-gradient(radial, 45 25, "+r+", 45 25, "+(r+15)+", from(rgb(0, 0, 0)), color-stop(0.5, rgba(0, 0, 0, 0.2)), to(rgb(0, 0, 0)));")
			};
		},5);
	}
},function(){
	return;
});
</script> 
<!--[if lt IE 7]>
<script type="text/javascript">
	window.onscroll = function(){
		doc_scroll();
	};
	var doc_scroll = function(){
		var height = document.documentElement.clientHeight - 90 ;
		var scroll_top = $(document).scrollTop() ;
		$(".service_box").css({
			"top" : height + scroll_top - 74
		});
	};
	doc_scroll();
</script> 
<![endif]-->

相关推荐

发表评论

相关文章

JS悬浮在线客服插件

2020-07-27 浏览:0