コミュニティ
学ぶ
ツールライブラリ
AIツール
レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScript 格納式メニューの実装コード_JavaScript スキル

JavaScript 格納式メニューの実装コード_JavaScript スキル

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
リリース： 2016-05-16 15:32:01
オリジナル
1278 人が閲覧しました

この記事の例では、JavaScript で実装された伸縮メニュー コードについて説明します。皆さんの参考に共有してください。詳細は以下の通りです。
実行中のエフェクトのスクリーンショットは次のとおりです:

具体的なコードは次のとおりです:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

<html>

<head>

<title>真正的JavaScript伸展收缩型菜单</title>

<style type="text/css">

#con div{width:100px;margin:5px 0 5px 0;font-size:9pt;height:23px;color:white;}

</style>

<div id="con">

<div style="background-color:red">红色菜单</div>

<div style="background-color:green">绿色菜单 </div>

<div style="background-color:blue">蓝色</div>

<div style="background-color:yellow">黄色</div>

<div style="background-color:pink">这是什么色</div>

<div style="background-color:orange">桔色</div>

<div style="background-color:black">黑色超酷</div>

</div>

<script language="javascript">

function $(e){return document.getElementById(e);}

function roulMenu(e,maxW,minW){

 var divs = $(e).getElementsByTagName('div');

 for(var i=0;i<divs.length;i++){

 (function(){

 var tims,timss;

 divs[i].onmouseover=function(){

 var self = this;

 clearInterval(timss);

 tims=setInterval(function(){

  if(self.offsetWidth<maxW){

  self.style.width = self.offsetWidth + 5 + 'px';

  }else{

  clearInterval(tims);

  }

 },10);

 }

 divs[i].onmouseout=function(){

 var self = this;

 clearInterval(tims);

 timss=setInterval(function(){

  if(self.offsetWidth>minW){

  self.style.width = self.offsetWidth - 5 + 'px';

  }else{

  clearInterval(timss);

  }

 },10);

 }

 })();

 }

}

//使用方法

roulMenu('con',200,100);

</script>

ログイン後にコピー

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

関連ラベル：
javascript伸缩菜单 javascript下拉菜单
前の記事：跟我学习javascript的prototype使用注意事项_javascript技巧 次の記事：js ポップアップ ダイアログ ボックスのメソッドの概要_javascript スキル
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
リモート ウェアハウスを git に追加した後、プッシュできません
から 1970-01-01 08:00:00
0
0
0
Objective-C のブロックと Swift のクロージャの違いは何ですか?
から 1970-01-01 08:00:00
0
0
0
github - git は特定のサフィックスを除くすべてのファイルを無視できますか
から 1970-01-01 08:00:00
0
0
0
object-c - この cas ファイルを偶然見ましたか?これはどのように書かれているか聞いてもいいでしょうか？
から 1970-01-01 08:00:00
0
0
0
bash での git 完了エラー
から 1970-01-01 08:00:00
0
0
0
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート