带动画QQ客服特效-从顶部下拉显示

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>网页顶部下拉的jquery在线客服</title>
<style>
*{margin: 0px;padding: 0px;list-style: none;}
#qqlist a{text-decoration: none;color: black;font-size: 12px;display: block;line-height: 28px;vertical-align: middle;}
img{line-height: 28px;vertical-align: middle;text-align: center;padding-bottom: 6px;}
#cs{width: 100%;height: 0px;border-bottom: 3px solid red;-webkit-box-shadow: 2px 2px 2px #999;position: relative;top: 0px;-moz-box-shadow: 2px 2px 2px #999;box-shadow: 2px 2px 2px #999;}
#qqlist{position: absolute;left: -200px;top: 150px;z-index: 1;}
#qqlist ul li{width: 80px;height: 28px;margin: 10px;}
#bg{width: 918px;height: 500px;position: absolute;right: 10px;display: none;filter: alpha(opacity: 0);opacity: 0;}
#btn{width: 100px;height: 20px;margin: auto;background: red;-webkit-box-shadow: 2px 2px 2px #999;border-radius: 0 0 8px 8px;position: relative;top: 0px;-moz-box-shadow: 2px 2px 2px #999;box-shadow: 2px 2px 2px #999;}
#btn span{display: block;color: white;text-align: center;line-height: 20px;cursor: pointer;font-size: 12px;}
#foot_bm a, #foot_bm, p, p a{color: #666;position: relative;}
</style>
<script>
function startMove(obj,json,fnEnd)
{
	clearInterval(obj.timer);
	obj.timer=setInterval(function()
	{
		var bStop=true;
		for (var attr in json)
		{
			var now=0;
			if(attr=="opacity")
			{
				now=Math.round(parseFloat(getStyle(obj,attr))*100);
			}
			else
			{
				now=parseInt(getStyle(obj,attr));
			}
			var speed=(json[attr]-now)/10;
			speed=speed>0?Math.ceil(speed):Math.floor(speed);
			if(now!=json[attr])bStop=false;
			if(attr=="opacity")
			{
				obj.style.filter="alpha(opacity:"+(now+speed)+")";
				obj.style.opacity=(now+speed)/100;
			}
			else
			{
				obj.style[attr]=(now+speed)+"px";
			}
		}
		if(bStop)
		{
			clearInterval(obj.timer);
			if(fnEnd)fnEnd();
		}
	}, 30)
}
function startFlex(obj,json,fnEnd)
{
	clearInterval(obj.timer);
	obj.timer=setInterval(function()
	{
		var bStop=true;
		var cur=0;
		for(var attr in json)
		{
			if(!obj.oSpeed)obj.oSpeed={};
			if(!obj.oSpeed[attr])obj.oSpeed[attr]=0;
			cur=parseInt(getStyle(obj,attr));
			if(Math.abs(json[attr]-cur)>1 || Math.abs(obj.oSpeed[attr])>1)
			{
				bStop=false;
				
				obj.oSpeed[attr]+=(json[attr]-cur)/5;
				obj.oSpeed[attr]*=0.7;
				var maxSpeed=65;
				if(Math.abs(obj.oSpeed[attr])>maxSpeed)
				{
					obj.oSpeed[attr]=obj.oSpeed[attr]>0?maxSpeed:-maxSpeed;
				}
				obj.style[attr]=cur+obj.oSpeed[attr]+"px";
			}
		}	
		if(bStop)
		{
			clearInterval(obj.timer);
			if(fnEnd)fnEnd();
		}		
	}, 30);
}
function getStyle(obj,name)
{
	if(obj.currentStyle)
	{
		return obj.currentStyle[name];
	}
	else
	{
		return getComputedStyle(obj,false)[name];
	}
}
window.onload=function()
{
	var oCs=document.getElementById('cs');
	var oBtn=document.getElementById('btn').getElementsByTagName('span')[0];
	var oImg=document.getElementById('bg');
	var oLi=document.getElementById('qqlist').getElementsByTagName('li');
	var on=0;
	
	for(var i=0; i<oLi.length; i++)
	{
		oLi[i].style.left=oLi[i].offsetLeft+"px";
		oLi[i].style.top=oLi[i].offsetTop+"px";
	}
	for(var i=0; i<oLi.length; i++)
	{
		oLi[i].style.position="absolute";
		oLi[i].style.margin=0;
	}
	function showImg()
	{
		oImg.style.display="block";
		startMove(oImg,{opacity:80},function()
		{
			showQQ(350);
		});
	}
	function showQQ(iTarget)
	{
		var i=1;
		startFlex(oLi[0],{left:iTarget});
		timer=setInterval(function()
		{
			startFlex(oLi[i],{left:iTarget});
			i++;
			if(i>=oLi.length)
			{
				clearInterval(timer);
			}
		}, 20);			
	}
	oBtn.onclick=function()
	{
		if(on==0)
		{
			startFlex(oCs,{height:500},function()
			{
				showImg();
				oBtn.innerHTML="CLOSE";
			});
			on=1;
		}
		else
		{
			showQQ(-200);
			timer2=setInterval(function()
			{
				startMove(oImg,{opacity:0},function()
				{
					oImg.style.display="none";
					startMove(oCs,{height:0});
				})
				if(oCs.style.height==0+"px")
				{
					clearInterval(timer2);
					oBtn.innerHTML="CONTACT US";
				}
			},500);	
			on=0;
		}
	}
}
</script>
</head>
<body>
<div id="cs">
	<div id="qqlist">
		<ul>
			<li><a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=123456789&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:123456789:52" alt="点这里发消息" title="您的网站"/> 售前咨询</a></li>
			<li><a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=123456789&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:123456789:52" alt="点这里发消息" title="您的站名"/> 售前咨询</a></li>
			<li><a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=123456789&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:123456789:52" alt="点这里发消息" title="您的站名"/> 售前咨询</a></li>
			<li><a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=123456789&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:123456789:52" alt="点这里发消息" title="您的站名"/> 售前咨询</a></li>
			<li><a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=123456789&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:123456789:52" alt="点这里发消息" title="您的站名"/> 售前咨询</a></li>
			<li><a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=123456789&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:123456789:52" alt="点这里发消息" title="您的站名"/> 售前咨询</a></li>
		</ul>
	</div>
	<div id="bg"><img src="//ku.shouce.ren/files/images/201601/56a31fd28e470.png"/></div>
</div>
<div id="btn"><span>联系我们</span></div>
</body>
</html>

AخA
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>网页顶部下拉的jquery在线客服</title>
<style>
*{margin: 0px;padding: 0px;list-style: none;}
#qqlist a{text-decoration: none;color: black;font-size: 12px;display: block;line-height: 28px;vertical-align: middle;}
img{line-height: 28px;vertical-align: middle;text-align: center;padding-bottom: 6px;}
#cs{width: 100%;height: 0px;border-bottom: 3px solid red;-webkit-box-shadow: 2px 2px 2px #999;position: relative;top: 0px;-moz-box-shadow: 2px 2px 2px #999;box-shadow: 2px 2px 2px #999;}
#qqlist{position: absolute;left: -200px;top: 150px;z-index: 1;}
#qqlist ul li{width: 80px;height: 28px;margin: 10px;}
#bg{width: 918px;height: 500px;position: absolute;right: 10px;display: none;filter: alpha(opacity: 0);opacity: 0;}
#btn{width: 100px;height: 20px;margin: auto;background: red;-webkit-box-shadow: 2px 2px 2px #999;border-radius: 0 0 8px 8px;position: relative;top: 0px;-moz-box-shadow: 2px 2px 2px #999;box-shadow: 2px 2px 2px #999;}
#btn span{display: block;color: white;text-align: center;line-height: 20px;cursor: pointer;font-size: 12px;}
#foot_bm a, #foot_bm, p, p a{color: #666;position: relative;}

CSS代码

复制格式化注释注释颜色清空

放大

CSS代码...​x
 
​

JS代码

复制格式化注释注释清空

放大

JS代码...xxxxxxxxxx
 
​

运行代码

简介

请输入代码名称！

名称

带动画QQ客服特效-从顶部下拉显示

分类

网站常用

描述

jquery动画版QQ在线客服代码，从网页顶部下拉出来的QQ客服，下滑结束后有弹性缓冲效果。在世界地图的映衬下，似乎一下子上升了品位。动画效果是由jq实现的，QQ客服的一些信息自己修改下，换成你自己的QQ，上传到网页就可用啦。注：在火狐...