JS는 Taobao Alipay website_javascript 기술의 콘솔 메뉴 효과를 구현합니다.
May 16, 2016 pm 03:37 PM이 기사의 예에서는 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 프로그래밍에 도움이 되기를 바랍니다.

인기 기사

인기 기사

뜨거운 기사 태그

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

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

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

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

뜨거운 주제











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

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

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

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

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