本文实例讲述了JS实现从顶部下拉显示的带动画QQ客服特效代码。分享给大家供大家参考，具体如下：
这是一款动画版QQ在线客服代码，从网页顶部下拉出来的QQ客服，下滑结束后有弹性缓冲效果。在世界地图的映衬下，似乎一下子上升了品位。动画效果是由jq实现的，QQ客服的一些信息自己修改下，换成你自己的QQ，上传到网页就可用啦。注：在火狐台chrome浏览器中测试效果会更好。
运行效果截图如下：
在线演示地址如下：
http://demo.jb51.net/js/2015/js-top-show-down-dh-qq-online-codes/
具体代码如下：
<!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="images/bgbg.png"/></div>
</div>
<div id="btn"><span>联系我们</span></div>
</body>
</html>
希望本文所述对大家JavaScript程序设计有所帮助。
您可能感兴趣的文章:
- 顶部缓冲下拉菜单导航特效的JS代码
- 原生js实现网页顶部自动下拉/收缩广告效果
