JS は淘宝網 Alipay のコンソールメニュー効果を実装します。 website

ホームページ

ウェブフロントエンド

jsチュートリアル

JS は淘宝網 Alipay のコンソールメニュー効果を実装します。 website_javascript スキル

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:37 PM

js アリペイタオバオ

この記事の例では、淘宝網 Alipay Web サイトのコンソールメニュー効果の JS 実装について説明します。皆さんの参考に共有してください。詳細は以下の通りです。

これは、Alipay Web サイトのコンソールのメインメニューです。美しく、シンプルで実用的です。マウスをテキストの上に移動すると、メニューレイヤーがスライドして表示されます。多くの友人が好む、現在最も人気のあるメニュー方法でもあります。

実行中のエフェクトのスクリーンショットは次のとおりです:

オンラインデモのアドレスは次のとおりです:

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' &#63; 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 までご連絡ください。

ホットAIツール

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7629

CakePHP チュートリアル

1389

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

141

Related knowledge

Alipay PHP SDK転送エラー：「クラスの看板を宣言できない」という問題を解決する方法は？ Apr 01, 2025 am 07:21 AM

Alipay Php ...

Bitget WalletからAlipayにお金を引き出す方法 Sep 04, 2024 pm 07:25 PM

BitgetWallet を使用して Alipay にお金を引き出す手順は次のとおりです。 BitgetWallet を開いてパスワードを入力するか、指紋を使用してロックを解除します。「引き出し」をクリックして暗号通貨を選択します。 Alipay 情報を入力し、支払い口座番号と金額を入力します。ネットワークの選択 Alipay の支払い方法に一致するネットワークを選択します。手数料設定手数料金額を確認し、承諾します。検査情報を確認して送信し、「確認」をクリックします。確認待ちはブロックチェーンネットワークによる検証を待ちます。受け取った資金の出金は、Alipay 支払いアカウントに入金されます。

PHPを使用してAlipay EasySDKを呼び出すときの「未定義の配列キー」「サイン」「エラー」の問題を解決する方法は？ Mar 31, 2025 pm 11:51 PM

問題の説明公式コードに従ってパラメーターを記入した後、PHPを使用してAlipay EasySDKを呼び出すとき、操作中にエラーメッセージが報告されました。

OKXトレーディングプラットフォームの取り扱い料金のリスト Feb 15, 2025 pm 03:09 PM

OKXトレーディングプラットフォームは、取引手数料、引き出し料金、資金調達料金など、さまざまな料金を提供しています。スポットトランザクションの場合、取引手数料はトランザクションのボリュームとVIPレベルによって異なり、「マーケットメーカーモデル」を採用します。つまり、市場はトランザクションごとに低いハンドリング料金を請求します。さらに、OKXは、通貨標準契約、USDT契約、配送契約など、さまざまな先物契約も提供しており、各契約の料金構造も異なります。

OUYI Exchange App国内ダウンロードチュートリアル Mar 21, 2025 pm 05:42 PM

この記事では、中国のOUYI OKXアプリの安全なダウンロードに関する詳細なガイドを提供します。国内のアプリストアの制限により、ユーザーはOUYI OKXの公式Webサイトからアプリをダウンロードするか、公式Webサイトが提供するQRコードを使用してスキャンおよびダウンロードすることをお勧めします。ダウンロードプロセス中に、公式Webサイトのアドレスを確認し、アプリケーションの許可を確認し、インストール後にセキュリティスキャンを実行し、2要素の検証を有効にしてください。使用中は、地方の法律や規制を遵守し、安全なネットワーク環境を使用し、アカウントのセキュリティを保護し、詐欺に対して警戒し、合理的に投資してください。この記事は参照のみであり、投資のアドバイスを構成していません。

H5とミニプログラムとアプリの違い Apr 06, 2025 am 10:42 AM

H5。ミニプログラムとアプリの主な違いは次のとおりです。技術アーキテクチャ：H5はWebテクノロジーに基づいており、ミニプログラムとアプリは独立したアプリケーションです。経験と機能：H5は軽量で使いやすく、機能が限られています。ミニプログラムは軽量で、インタラクティブが良好です。アプリは強力で、スムーズな経験があります。互換性：H5はクロスプラットフォーム互換性があり、アプレットとアプリはプラットフォームによって制限されています。開発コスト：H5には、開発コストが低く、中程度のミニプログラム、最高のアプリがあります。適用可能なシナリオ：H5は情報表示に適しており、アプレットは軽量アプリケーションに適しており、アプリは複雑な機能に適しています。

セサミオープンドアログイン登録登録ゲート。io交換登録公式ウェブサイトの入り口 Mar 04, 2025 pm 04:51 PM

Gate.io（Sesame Open Door）は、世界をリードする暗号通貨取引プラットフォームです。このチュートリアルでは、アカウントの登録とログイン、KYC認定、FIAT通貨とデジタル通貨充電、取引ペアの選択、制限/市場取引注文、注文およびトランザクションレコードの表示などの手順を把握しているため、暗号通貨取引のためのgate.ioプラットフォームを迅速に開始できます。初心者であろうとベテランであろうと、このチュートリアルから利益を得て、gate.ioの取引スキルを簡単に習得できます。

Bitget Wallet Bitpie 決済プラットフォームから Alipay または WeChat にお金を引き出す方法 Sep 04, 2024 pm 06:57 PM

BitgetWallet を通じて Alipay または WeChat にお金を引き出すにはどうすればよいですか? 1. BitgetWallet 支払いプラットフォームにログインします。 2. 出金する資産を選択します。 3. 「出金」ボタンをクリックします。 4. 出金方法 (Alipay または WeChat) を選択します。 5. 出金金額と支払い口座番号を入力します。 ; 6. 確認して送信します。

See all articles

JS は淘宝網 Alipay のコンソールメニュー効果を実装します。 website_javascript スキル

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック

JS は淘宝網 Alipay のコンソール メニュー効果を実装します。 website_javascript スキル

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック

JS は淘宝網 Alipay のコンソールメニュー効果を実装します。 website_javascript スキル