富贵资源网 Design By www.hznty.com
本文实例讲述了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"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"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"><img border="0" src="/UploadFiles/2021-04-02/pa">
希望本文所述对大家JavaScript程序设计有所帮助。
富贵资源网 Design By www.hznty.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
富贵资源网 Design By www.hznty.com
暂无评论...
P70系列延期，华为新旗舰将在下月发布
3月20日消息，近期博主@数码闲聊站 透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。
而博主@定焦数码 爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。