Yahooホームページのクイックログイン入り口とナビゲーションmodule_javascriptスキルをJSで模倣する効果を実現-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

Yahooホームページのクイックログイン入り口とナビゲーションmodule_javascriptスキルをJSで模倣する効果を実現

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:38 PM

この記事の例では、Yahoo ホームページのクイックログインの入り口とナビゲーションモジュールの効果の JS 実装について説明します。皆さんの参考に共有してください。詳細は以下の通りです。

これは、Yahoo ホームページ Web サイトを模倣したクイック入力ナビゲーションモジュールを実装する JS コードです。これを Web サイトのトップページに配置することもできます。ユーザーのログイン。

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

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

http://demo.jb51.net/js/2015/js-f-yahoo-index-login-style-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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>仿雅虎首页网站快捷入口和快</title>
<style>
*{ margin:0; padding:0; border:none;}
body{font:12px/130% verdana,geneva,arial,helvetica,sans-serif; height:100%;}li{list-style:none;}
html{ height:100%;}
.clearfix:after{content:" ";display:block;height:0;clear:both;visibility:hidden;}.clearfix{display:inline-block;}
a:link{ color:#000; text-decoration:none; }
a:visited{ color:#000; text-decoration:none; }
a:hover{ color:#000; text-decoration:none; }
.rrow{width:224px;}
.login{ background:url(images/box.png); height:210px;width:224px; overflow:hidden;}
.login h2{ color:#fff; font-size:14px; padding:4px 12px; line-height: 30px;height:24px; overflow:hidden; }
.login h2 span{ font-size:12px; float:right;margin:-31px 23px 0 0;line-height: 32px;font-weight:400; cursor:pointer;}
.rrow ul{ margin:5px 6px; }
.rrow ul li {width:216px; height:31px;margin-bottom: 5px; overflow:hidden; float:left;}
.rrow ul li a,.rrow ul li span{ cursor:pointer; display:block; float:left; margin-right: 4px; background:url(images/title.gif) 0 -152px; width:69px;padding-left:35px; height:31px; overflow:hidden; line-height: 32px; font-weight:700;}
.rrow ul li .lhover{ display:block; float:left; margin-right: 4px; background:url(images/title.gif) 0 -183px; width:69px;padding-left:35px; height:37px; overflow:hidden; line-height: 32px; font-weight:700;}
.rrow ul li .yhzc{ background:url(images/title.gif) 0 -152px;}
#yhzc{background:url(images/title.gif) 0 -183px;height:37px;}
.rrow ul li .hysj{ background:url(images/title.gif) -104px -152px; }
#hysj{ background:url(images/title.gif) -104px -183px;height:37px;}
.rrow ul li .fbxx{ background:url(images/title.gif) 0 -220px; }
#fbxx{ background:url(images/title.gif) 0 -251px;height:37px;}
.rrow ul li .gstg{ background:url(images/title.gif) -104px -220px; }
#gstg{ background:url(images/title.gif) -104px -251px;height:37px;}
.rrow ul li .xzmj{ background:url(images/title.gif) 0 -288px; }
#xzmj{ background:url(images/title.gif) 0 -319px;height:37px;}
.rrow ul li .bzzx{ background:url(images/title.gif) -104px -288px; }
#bzzx{ background:url(images/title.gif) -104px -319px;height:37px;}
.rrow ul .hoverli{background:url(images/title.gif) 0 -357px;height:92px; overflow:hidden; line-height: 32px; font-weight:700;}
.qlogin{height:92px; width:210px; line-height: 32px; margin:5px 0 0 10px; display:none;}
.qlogin dt{ height:0; overflow:hidden; }
.qlogin dd{ padding:4px; width:210px; height:22px; text-align:left; float:left;clear:both;overflow:hidden;}
.qlogin dd .passw,.qlogin a:hover.passw{ margin: -4px 12px 0 0; float:right;}
.rrow ul li div{ margin-top: 5px; width:210px; display:none;}
.rrow ul li div a,.rrow ul li div a:hover{background:url(images/title.gif) -80px -1px; height:20px; line-height: 20px; clear:both; font-weight: 400; width:170px;}
.rrow ul li div a:hover{ text-decoration:underline; }
.rrow ul li .block,.rrow .block{ display:block; }
.rrow ul .none{ display:none; }
.btn{font-size:12px; font-family:宋体; float:left; width:57px; height:20px; overflow:hidden; background:url(images/title.gif); line-height: 21px;padding-left:18px;margin-right: 10px; }
a:hover.btn{background:url(images/title.gif) 0 -20px;}
#btn4{background:url(images/title.gif);width:75px; margin-left: 48px; cursor:pointer;}
.input2{font-size:12px; border:1px solid #999; width:140px; height:16px; padding:1px 2px 0 2px; }
</style>
</head>
<body>
<table width="18%" height="420" border="0" align="center" cellpadding="0" cellspacing="0">
 <tr>
 <td><div class="rrow">
  <div id="login" class="login">
  <h2>便捷入口<span><a class="w" title="快速登陆">快速登陆</a></span></h2>
  <dl class="qlogin clearfix">
   <dt>快速登陆</dt>
   <dd>用户名：
    <input name="text" type="text" class="input2" />
   </dd>
   <dd>密   码：
    <input name="password" type="password" class="input2" />
   </dd>
   <dd>
   <input name="submit" type="submit" class="btn" id="btn4" value="立即登陆" />
   <a class="passw" href="#" target="_blank">忘记密码？</a></dd>
  </dl>
  <ul>
   <li id="btype1" class="hoverli"><span class="yhzc" id="yhzc" href="#" target="_blank" title="用户注册">用户注册</span><span class="hysj" href="#" target="_blank" title="会员升级">会员升级</span>
    <div class="block"><a href="#" target="_blank">1...</a><a href="#" target="_blank">1...</a></div>
   <div><a href="#" target="_blank">2...</a><a href="#" target="_blank">2...</a></div>
   </li>
   <li id="btype2"><span class="fbxx" href="#" target="_blank" title="发布信息">发布信息</span><span class="gstg" href="#" target="_blank" title="公司推广">公司推广</span>
    <div><a href="#" target="_blank">3...</a><a href="#" target="_blank">3...</a></div>
   <div><a href="#" target="_blank">4...</a><a href="#" target="_blank">4...</a></div>
   </li>
   <li id="btype3"><span class="xzmj" href="#" target="_blank" title="寻找买家">寻找买家</span><span class="bzzx" href="#" target="_blank" title="帮助中心">帮助中心</span>
    <div><a href="#" target="_blank">5...</a><a href="#" target="_blank">5...</a></div>
   <div><a href="#" target="_blank">6...</a><a href="#" target="_blank">6...</a></div>
   </li>
  </ul>
  </div>
  <script type=text/javascript>
   var login = document.getElementById("login");
var yhzc = document.getElementById("yhzc");
var h2 = login.getElementsByTagName("h2");
var dl = login.getElementsByTagName("dl");
var ul = login.getElementsByTagName("ul");
var lis = ul[0].getElementsByTagName("li");
var allspan = ul[0].getElementsByTagName("span");
var qlog = h2[0].getElementsByTagName("a");
var divs = login.getElementsByTagName("div");
qlog[0].onclick = function()
{
for(var i = 0; i < divs.length; i++)
{divs[i].className = null;}
for(var i = 0; i < allspan.length; i++)
{allspan[i].id = null;}
lis[0].className = "none";
dl[0].className = "qlogin block";
}
for(var x = 1; x < 4; x++)
{show();}
function show()
{
var test = "btype" +x;
var btype = document.getElementById("btype" + x);
var as = btype.getElementsByTagName("a");
var bdivs = btype.getElementsByTagName("div");
var spans = btype.getElementsByTagName("span");
for(var i = 0; i < spans.length; i++)
{
spans[i].num = i;
spans[i].onmouseover = type;
}
function type()
{
for(var i = 0; i < lis.length; i++)
{lis[i].className = null;}
for(var i = 0; i < allspan.length; i++)
{allspan[i].id = null;}
for(var i = 0; i < divs.length; i++)
{divs[i].className = null;}
dl[0].className = "qlogin";
yhzc.id = null;
spans[this.num].id = spans[this.num].className;
bdivs[this.num].className = "block";
btype.className = "hoverli";
}
}
   </script>
 </div>  
 </td>
 </tr>
</table>
</body>
</html>

ログイン後にコピー

この記事が皆さんの JavaScript プログラミングに役立つことを願っています。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

ホットツール

ホットトピック

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

7425

CakePHP チュートリアル

1359

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

Win11 Activation Key Permanent

Related knowledge

JS と Baidu Maps を使用してマップパン機能を実装する方法 Nov 21, 2023 am 10:00 AM

JS と Baidu Map を使用してマップパン機能を実装する方法 Baidu Map は広く使用されている地図サービスプラットフォームで、Web 開発で地理情報、位置情報、その他の機能を表示するためによく使用されます。この記事では、JS と Baidu Map API を使用してマップパン機能を実装する方法と、具体的なコード例を紹介します。 1. 準備 Baidu Map API を使用する前に、Baidu Map Open Platform (http://lbsyun.baidu.com/) で開発者アカウントを申請し、アプリケーションを作成する必要があります。作成完了

株価分析に必須のツール: PHP と JS を使用してローソク足チャートを描画する手順を学びます Dec 17, 2023 pm 06:55 PM

株式分析に必須のツール: PHP および JS でローソク足チャートを描画する手順を学びます。特定のコード例が必要です。インターネットとテクノロジーの急速な発展に伴い、株式取引は多くの投資家にとって重要な方法の 1 つになりました。株価分析は投資家の意思決定の重要な部分であり、ローソク足チャートはテクニカル分析で広く使用されています。 PHP と JS を使用してローソク足チャートを描画する方法を学ぶと、投資家がより適切な意思決定を行うのに役立つ、より直感的な情報が得られます。ローソク足チャートとは、株価をローソク足の形で表示するテクニカルチャートです。株価を示しています

推奨: 優れた JS オープンソースの顔検出および認識プロジェクト Apr 03, 2024 am 11:55 AM

顔の検出および認識テクノロジーは、すでに比較的成熟しており、広く使用されているテクノロジーです。現在、最も広く使用されているインターネットアプリケーション言語は JS ですが、Web フロントエンドでの顔検出と認識の実装には、バックエンドの顔認識と比較して利点と欠点があります。利点としては、ネットワークインタラクションの削減とリアルタイム認識により、ユーザーの待ち時間が大幅に短縮され、ユーザーエクスペリエンスが向上することが挙げられます。欠点としては、モデルサイズによって制限されるため、精度も制限されることが挙げられます。 js を使用して Web 上に顔検出を実装するにはどうすればよいですか? Web 上で顔認識を実装するには、JavaScript、HTML、CSS、WebRTC など、関連するプログラミング言語とテクノロジに精通している必要があります。同時に、関連するコンピュータービジョンと人工知能テクノロジーを習得する必要もあります。 Web 側の設計により、次の点に注意してください。

PHP と JS を使用して株価ローソク足チャートを作成する方法 Dec 17, 2023 am 08:08 AM

PHP と JS を使用して株のローソク足チャートを作成する方法。株のローソク足チャートは、株式市場で一般的なテクニカル分析グラフィックです。始値、終値、最高値、株価などのデータを描画することで、投資家が株式をより直観的に理解するのに役立ちます。株価の最低価格、価格変動。この記事では、PHP と JS を使用して株価のローソク足チャートを作成する方法を、具体的なコード例とともに説明します。 1. 準備開始する前に、次の環境を準備する必要があります。 1. PHP を実行するサーバー 2. HTML5 および Canvas をサポートするブラウザー 3

PHP および JS 開発のヒント: 株価ローソク足チャートの描画方法をマスターする Dec 18, 2023 pm 03:39 PM

インターネット金融の急速な発展に伴い、株式投資を選択する人がますます増えています。株式取引では、ローソク足チャートは一般的に使用されるテクニカル分析手法であり、株価の変化傾向を示し、投資家がより正確な意思決定を行うのに役立ちます。この記事では、PHP と JS の開発スキルを紹介し、株価ローソク足チャートの描画方法を読者に理解してもらい、具体的なコード例を示します。 1. 株のローソク足チャートを理解する株のローソク足チャートの描き方を紹介する前に、まずローソク足チャートとは何かを理解する必要があります。ローソク足チャートは日本人が開発した

JSとBaidu Mapsを使ってマップヒートマップ機能を実装する方法 Nov 21, 2023 am 09:33 AM

JS と Baidu Maps を使用してマップヒートマップ機能を実装する方法はじめに: インターネットとモバイルデバイスの急速な発展に伴い、マップは一般的なアプリケーションシナリオになりました。視覚的な表示方法として、ヒートマップはデータの分布をより直観的に理解するのに役立ちます。この記事では、JS と Baidu Map API を使用してマップヒートマップ機能を実装する方法と、具体的なコード例を紹介します。準備作業: 開始する前に、次の項目を準備する必要があります: Baidu 開発者アカウント、アプリケーションの作成、対応する AP の取得

JSと百度地図を使って地図クリックイベント処理機能を実装する方法 Nov 21, 2023 am 11:11 AM

JS と Baidu Maps を使用してマップクリックイベント処理を実装する方法の概要: Web 開発では、地理的位置と地理情報を表示するためにマップ関数を使用することが必要になることがよくあります。マップ上のクリックイベント処理は、マップ機能の一般的に使用される重要な部分です。この記事では、JS と Baidu Map API を使用して地図のクリックイベント処理機能を実装する方法と、具体的なコード例を紹介します。手順: Baidu Map の API ファイルをインポートします。まず、Baidu Map API のファイルを HTML ファイルにインポートします。これは、次のコードによって実現できます。

JSとBaidu Mapsを使って地図ポリゴン描画機能を実装する方法 Nov 21, 2023 am 10:53 AM

JS と Baidu Maps を使用して地図ポリゴン描画機能を実装する方法現代の Web 開発において、地図アプリケーションは一般的な機能の 1 つになっています。地図上にポリゴンを描画すると、ユーザーが表示および分析できるように特定のエリアをマークするのに役立ちます。この記事では、JS と Baidu Map API を使用して地図ポリゴン描画機能を実装する方法と、具体的なコード例を紹介します。まず、Baidu Map API を導入する必要があります。次のコードを使用して、Baidu Map API の JavaScript を HTML ファイルにインポートできます。

See all articles

Yahooホームページのクイックログイン入り口とナビゲーションmodule_javascriptスキルをJSで模倣する効果を実現

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック