jsケース_スライドリスト

8383 ワード

js。

1、HTMLレイアウト(ulを使用):

<body>

    <ul>

        <li class="list" id="lis">

            <a href="#" id="link">  </a>

            <ul id="ul1">

                <li><a href="#">  </a></li>

                <li><a href="#">  </a></li>

                <li><a href="#">@ </a></li>

            </ul>

       </li>

    </ul>

</body>

スライドリストを実装するには、マウスをスライドリストに移動すると、リストが表示されるため、バインドイベントにリストを含める必要があります.

2、CSSスタイル
1、ulはデフォルトの内外の余白を取り除く
2、liはデフォルトのリストスタイルを削除する
3、aはブロック要素ではなく、ブロック要素になる必要がある

    ul{ padding:0; margin:0;}

    li{ list-style:none;}

    .list{ width:120px; height:30px; border:1px solid red;}

    .list a{ line-height:30px; text-align:center; display:block; text-decoration:none; color:#000; background:#f1f1f1;}

    ul ul{ width:120px; border:1px solid #333; background:#FFC; display:none;}

    ul ul li{ text-align:center; line-height:30px;}

    ul ul li a{ text-decoration:none; color:blue;}

    ul ul li a:hover{ color:#0C0; background:#90C;}

注記:
1、ある要素を視線から外したい:
　　　　　　1、display:none; なしで表示
　　　　　　2、visibility:hidden; 非表示3、widthheight幅を0 4、透明度()透明度を5パーセント、lefttop 6、白いDIVで覆う7、margin負の値
　　　　　　------------

3、jsはスライドリストの原理を実現する

<script type="text/javascript">

    window.onload = function(){

        var lin = document.getElementById("link");

        var li = document.getElementById('lis');

        var ul = document.getElementById('ul1');

        

        li.onmouseover = show;

        li.onmouseout = hide;

        

        

        function show(){

            ul.style.display = "block";

            lin.style.background = 'yellow';

        }

        

        function hide(){

            ul.style.display = "none";

            lin.style.background = '#f1f1f1';

        }

        

    }

</script>

注記:
1、JSでidで要素を取得する方法:
　　　　　　　　document get element by id 'link'
　　　　　　　　docuemnt.getElementById('link');
2、イベント:マウスイベント、キーボードイベント、システムイベント、フォームイベント、カスタムイベント......
　　　　　　　　onclick
onmouseover onmouseout onmousedown onmouseup onmousemoveまるでマウスで撫でるようなイベント・・・onloadロードが終わったら実行・・window.onload=用件　　　　　　img.onload　　　　　　　　body.onload　　　　　　　　……

3、イベントの追加方法:要素.onmouseover
　　　　　　
4、関数:コマンド、何かをする~~function abc(){//必ず自発的に実行しない!......1、直接呼び出す:abc();2、イベント呼び出し:要素.イベント=関数名oDiv.onclick=abc;function(){}匿名関数要素.イベント=function(){}5、テスト:alert(1);OKボタン付きの警告ボックスalert('ok');'OK'文字列alert(「ok」);6、変数:var li=document.getElementById('lis');　　　　　　　　var num = 123; 　　　　　　　　var name = 'leo';

【SwiftUI】toolbar Modifierの表示位置（iOS）

JNI学習2:文字列パラメータの伝達と戻り値