웹 프론트엔드 JS 튜토리얼 JS는 Taobao Alipay website_javascript 기술의 콘솔 메뉴 효과를 구현합니다.

JS는 Taobao Alipay website_javascript 기술의 콘솔 메뉴 효과를 구현합니다.

May 16, 2016 pm 03:37 PM
js 알리페이 타오바오

이 기사의 예에서는 Taobao Alipay 웹사이트의 콘솔 메뉴 효과를 JS로 구현하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 내용은 다음과 같습니다.

애니메이션 효과 표시를 구현할 수 있는 Alipay 웹사이트의 콘솔 메인 메뉴입니다. 아름답고 간단하며 실용적입니다. 텍스트 위에 마우스를 올리면 메뉴 레이어가 슬라이드되어 사라집니다. 현재 가장 인기 있는 메뉴이기도 합니다.

런닝 효과 스크린샷은 다음과 같습니다.

온라인 데모 주소는 다음과 같습니다.

http://demo.jb51.net/js/2015/js-taobao-alipay-ctrl-menu-demo/

구체적인 코드는 다음과 같습니다.

<!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" lang="zh" xml:lang="zh">
<HEAD>
<TITLE>支付宝的控制台菜单</TITLE>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<STYLE type="text/css"> 
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
body{font-size:12px;}
#MyMenu{ margin: 10px auto; width: 760px;background: url(images/Account_Title_BgC.gif) repeat-x; height: 36px;}
.MyMenubg{background: url(images/Account_Title_Bg.gif) no-repeat;}
#QuickMenu{background: url(images/Account_Title_Bg.gif) no-repeat right -36px;text-align:left;}
#QuickMenu a{font-size:12px;color:#003599;text-decoration:none;}
#QuickMenu a:hover,#QuickMenu a:active{color:#FF6B00;}
#QuickMenu span a.cc:hover ,#QuickMenu a.cc:active span{background: url(images/MyMenu_bg_on.gif) no-repeat 0px 6px;}
#QuickMenu span a.cc {cursor:pointer;display:block;background: url(images/MyMenu_bg.gif) no-repeat 0px 6px;margin:0px 0px 0px 10px;width:154px;height:23px;padding:11px 5px 0px 25px;}
#MyMenuLinks{border:1px solid #FE7E25;background:#FCD5AA;padding:3px;text-align:left;top:-3px;left:20px;width:240px;float:left;}
#MyMenuLinks *{margin:0px;padding:0px;line-height:20px;}
#MyMenuLinks li {color:#003599;font-weight:bold;float:left;width:208px;padding-bottom:15px;}
#MyMenuLinks li.home a{display:block;border:1px solid #FFBD80;background:#FCF6DC url(images/MyMenu_home.gif) no-repeat 45px 5px;text-align:center;font-weight:normal;}
#MyMenuLinks ul{clear:left;list-style:none;border:1px solid #FBDDB9;background:#FFF;width:208px;padding:15px 15px 0px 15px;float:left;}
#MyMenuLinks ul ul{border:1px solid #FFF;background:#FFF;width:200px;padding:0px;}
#MyMenuLinks li li{font-weight:normal;width:90px;background:url(images/MyMenu_Li_bg.gif) no-repeat 0px 6px;padding:0px 0px 0px 10px;}
#all-links, #flying{display:none;margin-left:-35px;position:absolute;left:0;top:30px;}
#flying{background:#fff;border:1px dashed #ccc;top:0;}
#enter{position: relative;width:184px;}
</STYLE>
</HEAD>
<BODY>
<DIV id=MyMenu>
 <DIV class=MyMenubg>
  <DIV id=QuickMenu>
   <div id="enter">
    <span><A id=cc href="#" class="cc">支付宝快速入口</A></span>
    <div id="flying"></div>
    <DIV id=all-links style="display:none;">
     <DIV id=MyMenuLinks>
      <UL>
       <LI class=home><A class=R href="#">我的支付宝首页</A> </LI>
       <LI>账户管理 
        <UL>
         <LI><A href="#">账户余额查询</A> </LI>
         <LI><A href="#">账户信息管理</A> </LI>
         <LI><A href="#">支付宝卡通</A> </LI>
        </UL>
       </LI>
       <LI>资金管理 
        <UL>
         <LI><A href="#">充值</A> </LI>
         <LI><A href="#">提现</A> </LI>
         <LI><A href="#">账户明细查询</A> </LI>
         <LI><A href="#">提现申请查询</A> </LI>
        </UL>
       </LI>
       <LI>增值服务 
        <UL>
         <LI><A href="#">安全中心</A> </LI>
         <LI><A href="#">手机服务</A> </LI>
         <LI><A href="#">信使</A> </LI>
         <LI><A href="#">产品中心</A> </LI>
        </UL>
       </LI>
      </UL>
     </DIV>
    </DIV>  
   </div>
  </DIV>
 </DIV>
</DIV>
<script type="text/javascript">
var $ = function(id){
 return typeof id == 'string' ? document.getElementById(id) : id; 
}
var flying = function(obj, w, h, callback){
 var d = 10;
 var index = 0;
 var extend = 50;
 var step = {width:(w+extend)/d, height:(h+extend)/d, top:30/d};
 var only;
 clearInterval(only);
 obj.style.display = 'block';
 only = setInterval(
  function(){
   index++;
   obj.style.width = ( index * step.width) + 'px';
   obj.style.height = ( index * step.height) + 'px';
   obj.style.top = ( index * step.top) + 'px';
   obj.style.marginLeft = ( 0 - (index * step.width - 150))/2 + 'px';
   if(index > d){
    clearInterval(only);
    if(typeof callback == 'function') callback(obj);
   }
  }
 ,10);
}
var timer;
$('enter').onmouseover = function(){
 clearTimeout(timer);
 timer = setTimeout(function(){
  if($('all-links').style.display == 'none'){ 
   new flying($('flying'), 248, 293, function(obj){
    $('all-links').style.display = 'block';
    obj.style.display = 'none';
   });
   document.title = 'over--'+Math.random();
  }
 },200);
}
$('enter').onmouseout = function(){
 clearTimeout(timer);
 timer = setTimeout(function(){
  $('all-links').style.display = 'none';
  document.title = 'out--'+Math.random();
 },200);
}
</script>
</BODY>
</html>

로그인 후 복사

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

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

뜨거운 기사 태그

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

Bybit에서 Alipay 계정으로 거래를 이체하는 방법은 무엇입니까? Bybit에서 Alipay 계정으로 거래를 이체하는 방법은 무엇입니까? Aug 16, 2024 pm 12:53 PM

Bybit에서 Alipay 계정으로 거래를 이체하는 방법은 무엇입니까?

TrustWallet 지갑에서 Alipay로 돈을 인출하는 방법 TrustWallet 지갑에서 Alipay로 돈을 인출하는 방법 Aug 20, 2024 pm 02:48 PM

TrustWallet 지갑에서 Alipay로 돈을 인출하는 방법

Bitget Wallet에서 Alipay로 출금하는 방법 Bitget Wallet에서 Alipay로 출금하는 방법 Sep 04, 2024 pm 07:25 PM

Bitget Wallet에서 Alipay로 출금하는 방법

MEXC 거래소에서 코인을 사고 파는 방법은 무엇입니까? MEXC 거래소에서 코인을 사고 파는 방법은 무엇입니까? Aug 20, 2024 pm 07:19 PM

MEXC 거래소에서 코인을 사고 파는 방법은 무엇입니까?

JD.com, Taobao, Pinduoduo, Douyin 및 Kuaishou가 '온라인 거래 준수 및 운영에 관한 자율 규율 협약'에 공동으로 서명했습니다. JD.com, Taobao, Pinduoduo, Douyin 및 Kuaishou가 '온라인 거래 준수 및 운영에 관한 자율 규율 협약'에 공동으로 서명했습니다. Aug 23, 2024 am 12:05 AM

JD.com, Taobao, Pinduoduo, Douyin 및 Kuaishou가 '온라인 거래 준수 및 운영에 관한 자율 규율 협약'에 공동으로 서명했습니다.

크라켄 플랫폼 통화를 WeChat 또는 Alipay로 인출하는 방법 크라켄 플랫폼 통화를 WeChat 또는 Alipay로 인출하는 방법 Aug 14, 2024 pm 02:45 PM

크라켄 플랫폼 통화를 WeChat 또는 Alipay로 인출하는 방법

가상 코인 구매를 시작하는 방법은 무엇입니까? 2025 이더 리움 가상 통화 신규 이민자 안내서 가상 코인 구매를 시작하는 방법은 무엇입니까? 2025 이더 리움 가상 통화 신규 이민자 안내서 Feb 21, 2025 pm 06:54 PM

가상 코인 구매를 시작하는 방법은 무엇입니까? 2025 이더 리움 가상 통화 신규 이민자 안내서

참깨 오픈 도어 로그인 등록 입구 게이트 .io 교환 등록 공식 웹 사이트 입구 참깨 오픈 도어 로그인 등록 입구 게이트 .io 교환 등록 공식 웹 사이트 입구 Mar 04, 2025 pm 04:51 PM

참깨 오픈 도어 로그인 등록 입구 게이트 .io 교환 등록 공식 웹 사이트 입구

See all articles