JS实现从顶部下拉显示的带动画QQ客服特效代码


Posted in Javascript onOctober 24, 2015

本文实例讲述了JS实现从顶部下拉显示的带动画QQ客服特效代码。分享给大家供大家参考,具体如下:

这是一款动画版QQ在线客服代码,从网页顶部下拉出来的QQ客服,下滑结束后有弹性缓冲效果。在世界地图的映衬下,似乎一下子上升了品位。动画效果是由jq实现的,QQ客服的一些信息自己修改下,换成你自己的QQ,上传到网页就可用啦。注:在火狐台chrome浏览器中测试效果会更好。

运行效果截图如下:

JS实现从顶部下拉显示的带动画QQ客服特效代码

在线演示地址如下:

具体代码如下:

<!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程序设计有所帮助。

Javascript 相关文章推荐
js 表单验证方法(实用)
Apr 28 Javascript
基于jquery的滑动样例代码
Nov 20 Javascript
JS自动适应的图片弹窗实例
Jun 29 Javascript
Javascript 中创建自定义对象的方法汇总
Dec 04 Javascript
javascript数据类型示例分享
Jan 19 Javascript
jQuery+AJAX实现网页无刷新上传
Feb 22 Javascript
JavaScript数组常用方法
Mar 02 Javascript
8 行 Node.js 代码实现代理服务器
Dec 05 Javascript
实现JavaScript高性能的数据存储
Dec 11 Javascript
video.js使用改变ui过程
Mar 05 Javascript
学前端,css与javascript重难点浅析
Jun 11 Javascript
详解js创建对象的几种方式和对象方法
Mar 01 Javascript
js获取表格的行数和列数的方法
Oct 23 #Javascript
js行号显示的文本框实现效果(兼容多种浏览器 )
Oct 23 #Javascript
js中对函数设置默认参数值的3种方法
Oct 23 #Javascript
js窗口关闭提示信息(兼容IE和firefox)
Oct 23 #Javascript
javascript跨域的方法汇总
Oct 23 #Javascript
通过Jquery.cookie.js实现展示浏览网页的历史记录超管用
Oct 23 #Javascript
jQuery实现分章节锚点“回到顶部”动画特效代码
Oct 23 #Javascript
You might like
C# Assembly类访问程序集信息
2009/06/13 PHP
PHP的静态方法与普通方法用法实例分析
2019/09/26 PHP
你真的了解JavaScript吗?
2007/02/24 Javascript
JavaScript中使用replace结合正则实现replaceAll的效果
2010/06/04 Javascript
iframe 父窗口和子窗口相互的调用方法集锦
2010/12/15 Javascript
JS远程获取网页源代码实例
2013/09/05 Javascript
JavaScript中instanceof运算符的用法总结
2013/11/19 Javascript
jquery ajax jsonp跨域调用实例代码
2013/12/11 Javascript
js对图片base64编码字符串进行解码并输出图像示例
2014/03/17 Javascript
jquery插件冲突(jquery.noconflict)解决方法分享
2014/03/20 Javascript
浅析javascript中function 的 length 属性
2014/05/27 Javascript
javascript学习笔记(八)正则表达式
2014/10/08 Javascript
jQuery简单设置文本框回车事件的方法
2016/08/01 Javascript
jQuery通过ajax快速批量提交表单数据
2016/10/25 Javascript
VUE实现一个分页组件的示例
2017/09/13 Javascript
让bootstrap的carousel支持滑动滚屏的实现代码
2017/11/27 Javascript
layui实现table加载的示例代码
2018/08/14 Javascript
vue-cli项目中使用echarts图表实例
2018/10/22 Javascript
利用Electron简单撸一个Markdown编辑器的方法
2019/06/10 Javascript
浅探express路由和中间件的实现
2019/09/30 Javascript
python生成指定长度的随机数密码
2014/01/23 Python
浅谈python抛出异常、自定义异常, 传递异常
2016/06/20 Python
Python实现的根据IP地址计算子网掩码位数功能示例
2018/05/23 Python
Python高级特性与几种函数的讲解
2019/03/08 Python
python xlsxwriter模块的使用
2020/12/24 Python
python uuid生成唯一id或str的最简单案例
2021/01/13 Python
详解CSS3中nth-child与nth-of-type的区别
2017/01/05 HTML / CSS
伦敦眼门票在线预订:London Eye
2018/05/31 全球购物
马歇尔耳机官网:Marshall Headphones
2020/02/04 全球购物
C++程序员求职信范文
2014/04/14 职场文书
树转促学习心得体会
2014/09/10 职场文书
教师节主持词开场白
2015/05/29 职场文书
python如何获取网络数据
2021/04/11 Python
Oracle 数据仓库ETL技术之多表插入语句的示例详解
2021/04/12 Oracle
PL350与SW11的比较
2021/04/22 无线电
浅析Python实现DFA算法
2021/06/26 Python