简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
집 > 웹 프론트엔드 > JS 튜토리얼 > 본문

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

WBOY
풀어 주다： 2016-05-16 15:35:19
원래의
1227명이 탐색했습니다.

이 기사의 예에서는 상단 드롭다운 디스플레이의 애니메이션을 사용하여 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 border="0" src="http://wpa.qq.com/pa&#63;p=2:123456789:52" 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 border="0" src="http://wpa.qq.com/pa&#63;p=2:123456789:52" 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 border="0" src="http://wpa.qq.com/pa&#63;p=2:123456789:52" 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 border="0" src="http://wpa.qq.com/pa&#63;p=2:123456789:52" 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 border="0" src="http://wpa.qq.com/pa&#63;p=2:123456789:52" 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 border="0" src="http://wpa.qq.com/pa&#63;p=2:123456789:52" alt="JS는 상단 드롭다운_javascript 기술에 표시되는 애니메이션 QQ 고객 서비스 특수 효과 코드를 구현합니다." title="您的站名"/> 售前咨询</a></li>
  </ul>
 </div>
 <div id="bg"><img  src="images/bgbg.png"/ alt="JS는 상단 드롭다운_javascript 기술에 표시되는 애니메이션 QQ 고객 서비스 특수 효과 코드를 구현합니다." ></div>
</div>
<div id="btn"><span>联系我们</span></div>
</body>
</html>
로그인 후 복사

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

관련 라벨：
js qq客服 动画 맨 위
원천：php.cn
이전 기사：자바스크립트 즉시실행 기능_자바스크립트 스킬 심층 분석 다음 기사：javaScript를 사용하여 Js 파일 및 Css 파일을 동적으로 로드_javascript 팁
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
여러 경로에 선언된 작업자 풀이 임계값을 고려하지 않고 여전히 CPU 사용량을 유지할 수 있습니까? CPU 집약적인 작업을 처리하기 위해 작업자 풀이 있는 node.js 시스템을 찾고 있지만 여러 경로에서의 CPU 사용량에 대해 약간 혼란스럽습니다. 시나리오는 ...
에서 2024-04-06 19:54:23
0
1
444
d3.js를 확대할 때 산점도 값이 유지되지 않습니다. d3.js를 처음 사용하는 것이므로 양해해 주시기 바랍니다. vue.js 파일에 순수 JavaScript로 구현했습니다. 확대/축소 기능을 사용하여 산점도를 만들...
에서 2024-04-06 18:16:26
0
1
403
숨겨진 측면 패널 표시: 선택됨 애니메이션 햄버거 메뉴를 통해 보기로 전환할 수 있는 탐색 메뉴를 측면 패널에 갖고 싶습니다. JS 없이 CSS만 사용하여 만들고 싶습니다. :checked 의사...
에서 2024-04-06 15:49:33
0
1
319
Nuxt.js로 생성된 대시보드를 배포하기 위해 SSG를 사용해야 합니까? Nuxt.js를 사용하여 내부용 대시보드를 개발하겠습니다. 내부 대시보드이므로 범용 스키마가 필요하지 않습니다. 일반적으로 대부분의 대시보드는 SPA에서 개발됩니...
에서 2024-04-06 13:17:44
0
1
493
Electron은 사전 로드 시 AppData를 가져옵니다. 사전 로드된 AppData 디렉터리를 얻는 방법은 무엇입니까? Background.js[...]asyncfunctioncreateWindow(){constwin=...
에서 2024-04-06 11:05:31
0
1
417
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트：공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！