찾다

집 >웹 프론트엔드 >JS 튜토리얼 >JS는 상단 드롭다운_javascript 기술에 표시되는 애니메이션 QQ 고객 서비스 특수 효과 코드를 구현합니다.

JS는 상단 드롭다운_javascript 기술에 표시되는 애니메이션 QQ 고객 서비스 특수 효과 코드를 구현합니다.

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB원래의
2016-05-16 15:35:191383검색

이 기사의 예에서는 상단 드롭다운 디스플레이의 애니메이션을 사용하여 QQ 고객 서비스 특수 효과 코드의 JS 구현을 설명합니다. 참고하실 수 있도록 모든 사람과 공유하세요. 자세한 내용은 다음과 같습니다.

QQ 온라인 고객 서비스 코드의 애니메이션 버전입니다. QQ 고객 서비스 코드는 슬라이드가 끝난 후 유연한 버퍼링 효과를 제공합니다. 세계지도를 배경으로 보니 맛이 갑자기 좋아진 것 같습니다. 애니메이션 효과는 jq에 의해 구현됩니다. QQ 고객 서비스에서 일부 정보를 수정하고 이를 자신의 QQ로 대체한 다음 웹페이지에 업로드하면 사용할 수 있습니다. 참고: 테스트 효과는 Firefox 및 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&#63;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&#63;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&#63;v=3&uin=123456789&site=qq&menu=yes"><img src="/static/imghwm/default1.png"  data-src="http://wpa.qq.com/pa&#63;p=2:123456789:52?x-oss-process=image/resize,p_40"  class="lazy"  border="0" alt="JS는 상단 드롭다운_javascript 기술에 표시되는 애니메이션 QQ 고객 서비스 특수 효과 코드를 구현합니다." title="您的网站"/> 售前咨询</a></li>
   <li><a target="_blank" href="http://wpa.qq.com/msgrd&#63;v=3&uin=123456789&site=qq&menu=yes"><img src="/static/imghwm/default1.png"  data-src="http://wpa.qq.com/pa&#63;p=2:123456789:52?x-oss-process=image/resize,p_40"  class="lazy"  border="0" alt="JS는 상단 드롭다운_javascript 기술에 표시되는 애니메이션 QQ 고객 서비스 특수 효과 코드를 구현합니다." title="您的站名"/> 售前咨询</a></li>
   <li><a target="_blank" href="http://wpa.qq.com/msgrd&#63;v=3&uin=123456789&site=qq&menu=yes"><img src="/static/imghwm/default1.png"  data-src="http://wpa.qq.com/pa&#63;p=2:123456789:52?x-oss-process=image/resize,p_40"  class="lazy"  border="0" alt="JS는 상단 드롭다운_javascript 기술에 표시되는 애니메이션 QQ 고객 서비스 특수 효과 코드를 구현합니다." title="您的站名"/> 售前咨询</a></li>
   <li><a target="_blank" href="http://wpa.qq.com/msgrd&#63;v=3&uin=123456789&site=qq&menu=yes"><img src="/static/imghwm/default1.png"  data-src="http://wpa.qq.com/pa&#63;p=2:123456789:52?x-oss-process=image/resize,p_40"  class="lazy"  border="0" alt="JS는 상단 드롭다운_javascript 기술에 표시되는 애니메이션 QQ 고객 서비스 특수 효과 코드를 구현합니다." title="您的站名"/> 售前咨询</a></li>
   <li><a target="_blank" href="http://wpa.qq.com/msgrd&#63;v=3&uin=123456789&site=qq&menu=yes"><img src="/static/imghwm/default1.png"  data-src="http://wpa.qq.com/pa&#63;p=2:123456789:52?x-oss-process=image/resize,p_40"  class="lazy"  border="0" alt="JS는 상단 드롭다운_javascript 기술에 표시되는 애니메이션 QQ 고객 서비스 특수 효과 코드를 구현합니다." title="您的站名"/> 售前咨询</a></li>
   <li><a target="_blank" href="http://wpa.qq.com/msgrd&#63;v=3&uin=123456789&site=qq&menu=yes"><img src="/static/imghwm/default1.png"  data-src="http://wpa.qq.com/pa&#63;p=2:123456789:52?x-oss-process=image/resize,p_40"  class="lazy"  border="0" alt="JS는 상단 드롭다운_javascript 기술에 표시되는 애니메이션 QQ 고객 서비스 특수 효과 코드를 구현합니다." title="您的站名"/> 售前咨询</a></li>
  </ul>
 </div>
 <div id="bg"><img  src="/static/imghwm/default1.png"  data-src="images/bgbg.png"  class="lazy"/ alt="JS는 상단 드롭다운_javascript 기술에 표시되는 애니메이션 QQ 고객 서비스 특수 효과 코드를 구현합니다." ></div>
</div>
<div id="btn"><span>联系我们</span></div>
</body>
</html>

이 기사가 JavaScript 프로그래밍에 종사하는 모든 사람에게 도움이 되기를 바랍니다.

성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：자바스크립트 즉시실행 기능_자바스크립트 스킬 심층 분석다음 기사：자바스크립트 즉시실행 기능_자바스크립트 스킬 심층 분석

관련 기사

더보기