JS CSS はシンプルなスライディングドア (スライディングメニュー) を実装します。-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

JS CSS はシンプルなスライディングドア (スライディングメニュー) を実装します。

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:38 PM

cssjsスライドメニュー引き戸

この記事の例では、JS CSS を使用して単純なスライドドアを実装する方法を説明します。皆さんの参考に共有してください。詳細は以下の通りです。

これは非常にシンプルなデザインのスライドドアメニューで、メインメニューにマウスを置くと、その内容が変化します。実際、このデモは一例です。コードのすべてのステップには、JavaScript と CSS の学習に役立つコメントがあり、将来、より美しく実用的なスライディングドアを作成するための道が開かれます。

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

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

http://demo.jb51.net/js/2015/js-css-jdhd-menu-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>
#tab_container1{width:310px;text-align:left;border:1px solid #cccccc;background:url() repeat-x top;}
.cls_tab_nav{height:24px;overflow:hidden;font-size:12px;background:url() repeat-x bottom; padding-left:10px;}
.cls_tab_nav ul{font-size:9pt;margin:0;padding:0;}
.cls_tab_nav_li{background:url() no-repeat -70px 0;width:70px;height:24px;line-height:24px;float:left;display:inline;overflow:hidden;text-align:center;cursor:pointer;}
.cls_tab_nav_li_first{font-weight:bolder;background-position:0px 0px;}
.cls_tab_nav_li a{text-decoration:none;color:#000000;font-size:12px;}
.cls_tab_body{border-top:none;min-height:175px;padding:10px;height:175px;}
.cls_div{display:none;font-size:14px;}
.cls_tab_nav_li_first a{color:#c80000;}
</style>
</head>
  <body> 
  <div id="tab_container1" >
 <div class="cls_tab_nav">
 <ul>
  <li class="cls_tab_nav_li cls_tab_nav_li_first"><a href="#">百货大楼</a></li>
  <li class="cls_tab_nav_li"><a href="#">八方购物</a></li>
  <li class="cls_tab_nav_li"><a href="#">商场三</a></li>
 </ul>
 </div>
 <div class="cls_tab_body">
 <div class="cls_div" style="display:block;">
 百货大楼
 </div>
 <div class="cls_div">八方购物</div>
 <div class="cls_div">商场三</div>
 </div>
</div>
</body> 
</html> 
<script type="text/javascript">
try{
 document.execCommand("BackgroundImageCache", false, true);
}catch(e){}
function $(element){
 if(arguments.length>1){
 for(var i=0,elements=[],length=arguments.length;i<length;i++)
  elements.push($(arguments[i]));
 return elements;
 }
 if(typeof element=="string")
 return document.getElementById(element);
 else
 return element;
}
var Class={
 create:function(){
 return function(){
  this.initialize.apply(this,arguments);
 } 
 }
}
Object.extend=function(destination,source){
 for(var property in source){
 destination[property]=source[property];
 }
 return destination;
}
var tabMenu=Class.create();
tabMenu.prototype={
 initialize:function(container,selfOpt,otherOpt){
 this.container=$(container);
  var selfOptions=Object.extend({fontWeight:"bold",fontSize:"12px",color:"#FFBC44"},selfOpt||{});
 var otherOptions=Object.extend({fontWeight:"normal",fontSize:"12px",color:"#666"},otherOpt||{});
 //用for循环得到objs数组,主要是为了兼容非IE浏览器把空白也当作子对象
 for(var i=0,length=this.container.childNodes.length,objs=[];i<length;i++){
  if(this.container.childNodes[i].nodeType==1)
  objs.push(this.container.childNodes[i]);
 }
 var tabArray=objs[0].getElementsByTagName("li");
 //用for循环得到divArray数组,主要是为了兼容非IE浏览器把空白也当作子对象
 var divArray=new Array();
 for(i=0,length=objs[1].childNodes.length;i<length;i++){
  if(objs[1].childNodes[i].nodeType==1)
  divArray.push(objs[1].childNodes[i]);
 }
 for(i=0,length=tabArray.length;i<length;i++){
  tabArray[i].length=length;
  tabArray[i].index=i;
  tabArray[i].onmouseover=function(){
  //其它选项卡样式设置
  for(var j=0;j<this.length;j++){
   tabArray[j].style.backgroundPosition="-"+tabArray[j].offsetWidth+"px 0";
   for(var property in selfOptions){
   tabArray[j].firstChild.style[property]=otherOptions[property];
   }
  }
  //当前选项卡样式
  this.style.backgroundPosition="0 0";
  for(var property in selfOptions){
   this.firstChild.style[property]=selfOptions[property];
  }
  //隐藏其它选项卡
  for(j=0;j<this.length;j++){
   divArray[j].style.display="none";
  }
  //显示当前选项卡
  divArray[this.index].style["display"]="block";
  }
 }
 }
}
var tab1=new tabMenu("tab_container1",{fontSize:"12px",color:"#c80000",fontWeight:"bolder"},{fontWeight:"normal",color:"#000000"});
</script>

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

声明

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

Python vs. JavaScript：学習曲線と使いやすさApr 16, 2025 am 12:12 AM

Pythonは、スムーズな学習曲線と簡潔な構文を備えた初心者により適しています。 JavaScriptは、急な学習曲線と柔軟な構文を備えたフロントエンド開発に適しています。 1。Python構文は直感的で、データサイエンスやバックエンド開発に適しています。 2。JavaScriptは柔軟で、フロントエンドおよびサーバー側のプログラミングで広く使用されています。

Python vs. JavaScript：コミュニティ、ライブラリ、リソースApr 15, 2025 am 12:16 AM

PythonとJavaScriptには、コミュニティ、ライブラリ、リソースの観点から、独自の利点と短所があります。 1）Pythonコミュニティはフレンドリーで初心者に適していますが、フロントエンドの開発リソースはJavaScriptほど豊富ではありません。 2）Pythonはデータサイエンスおよび機械学習ライブラリで強力ですが、JavaScriptはフロントエンド開発ライブラリとフレームワークで優れています。 3）どちらも豊富な学習リソースを持っていますが、Pythonは公式文書から始めるのに適していますが、JavaScriptはMDNWebDocsにより優れています。選択は、プロジェクトのニーズと個人的な関心に基づいている必要があります。

C/CからJavaScriptへ：すべてがどのように機能するかApr 14, 2025 am 12:05 AM

C/CからJavaScriptへのシフトには、動的なタイピング、ゴミ収集、非同期プログラミングへの適応が必要です。 1）C/Cは、手動メモリ管理を必要とする静的に型付けられた言語であり、JavaScriptは動的に型付けされ、ごみ収集が自動的に処理されます。 2）C/Cはマシンコードにコンパイルする必要がありますが、JavaScriptは解釈言語です。 3）JavaScriptは、閉鎖、プロトタイプチェーン、約束などの概念を導入します。これにより、柔軟性と非同期プログラミング機能が向上します。

JavaScriptエンジン：実装の比較Apr 13, 2025 am 12:05 AM

さまざまなJavaScriptエンジンは、各エンジンの実装原則と最適化戦略が異なるため、JavaScriptコードを解析および実行するときに異なる効果をもたらします。 1。語彙分析：ソースコードを語彙ユニットに変換します。 2。文法分析：抽象的な構文ツリーを生成します。 3。最適化とコンパイル：JITコンパイラを介してマシンコードを生成します。 4。実行：マシンコードを実行します。 V8エンジンはインスタントコンピレーションと非表示クラスを通じて最適化され、Spidermonkeyはタイプ推論システムを使用して、同じコードで異なるパフォーマンスパフォーマンスをもたらします。

ブラウザを超えて：現実世界のJavaScriptApr 12, 2025 am 12:06 AM

現実世界におけるJavaScriptのアプリケーションには、サーバー側のプログラミング、モバイルアプリケーション開発、モノのインターネット制御が含まれます。 2。モバイルアプリケーションの開発は、ReactNativeを通じて実行され、クロスプラットフォームの展開をサポートします。 3.ハードウェアの相互作用に適したJohnny-Fiveライブラリを介したIoTデバイス制御に使用されます。

next.jsを使用してマルチテナントSaaSアプリケーションを構築する（バックエンド統合）Apr 11, 2025 am 08:23 AM

私はあなたの日常的な技術ツールを使用して機能的なマルチテナントSaaSアプリケーション（EDTECHアプリ）を作成しましたが、あなたは同じことをすることができます。まず、マルチテナントSaaSアプリケーションとは何ですか？マルチテナントSaaSアプリケーションを使用すると、Singの複数の顧客にサービスを提供できます

next.jsを使用してマルチテナントSaaSアプリケーションを構築する方法（フロントエンド統合）Apr 11, 2025 am 08:22 AM

この記事では、許可によって保護されたバックエンドとのフロントエンド統合を示し、next.jsを使用して機能的なedtech SaaSアプリケーションを構築します。 FrontEndはユーザーのアクセス許可を取得してUIの可視性を制御し、APIリクエストがロールベースに付着することを保証します

JavaScript：Web言語の汎用性の調査Apr 11, 2025 am 12:01 AM

JavaScriptは、現代のWeb開発のコア言語であり、その多様性と柔軟性に広く使用されています。 1）フロントエンド開発：DOM操作と最新のフレームワーク（React、Vue.JS、Angularなど）を通じて、動的なWebページとシングルページアプリケーションを構築します。 2）サーバー側の開発：node.jsは、非ブロッキングI/Oモデルを使用して、高い並行性とリアルタイムアプリケーションを処理します。 3）モバイルおよびデスクトップアプリケーション開発：クロスプラットフォーム開発は、反応および電子を通じて実現され、開発効率を向上させます。

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

AtomエディタMac版ダウンロード

最も人気のあるオープンソースエディター

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポートライブラリとヘッダーファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。