歌单列表


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            width: 400px;
            background-color: gray;
            margin:300px auto;
        }
        #title{
            width: 360px;
            padding-left:40px;
            padding-top: 5px;
            font-size:20px;
            background-color: #D2D6DA;
        }
        #list {
            margin-top: 2px;
            list-style: none;
            display: none;
            font-size: 20px;
            background-color: #E9EDF3;
            padding-left: 0;
        }
        li{padding-left: 40px}
        #tri
        {
            width: 0;
            height:0;
            border-top:o;
            border-bottom:6px solid black;
            border-left:6px solid transparent;
            border-right:6px solid transparent;
            float: right;
            margin-top:9px;
        }
    </style>
</head>
<body>
   <script>
       window.onload=function () {
           var title1=document.getElementById("title")
           var tri1=document.getElementById("tri")
           var list1=document.getElementById("list")
           title1.onclick=run;
           tri1.onclick=run;
           function run(){
               if(list1.style.display=="block")
               {list1.style.display="none";
                   tri1.style.transform="rotate(180deg)";
               }
               else
               {
                   list1.style.display="block";
                   tri1.style.transform="rotate(0deg)";
               }
           }
           var items=document.getElementsByTagName("li")
           for(var i=0;i<items.length;i++) {
               items[i].onmouseover = function () {
                   this.style.background = "white";
                   this.style.textDecoration = "underline";
               }
               items[i].onmouseout = function () {
                   this.style.background = "#e9edf3";
                   this.style.textDecoration = "none";
               }

           }
           }
   </script>
<div id="box">
    <div id="title">播放列表<div id="tri"></div></div>
<ul id="list">
    <li>玩爱之徒-蔡依林</li>
    <li>原谅我就是这样的女生-戴佩妮</li>
    <li>猜不透-丁当</li>
    <li>自导自演-周杰伦</li>
    <li>浪漫窝-弦子</li>
    <li>流年-王菲</li>
</ul>
</div>
</body>
</html>

阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页