码迷,mamicode.com
首页 > Web开发 > 详细

0517JS综合练习、挂事件练习

时间:2018-05-17 21:15:03      阅读:69      评论:0      收藏:0      [点我收藏+]

标签:splay   char   name   tran   length   cto   fun   attribute   元素   

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0px auto;
                padding: 0px;
            }
            .qcfu{
                overflow: hidden;
            }
            /*<div class="qcfu"></div>*/
            .box1{
                width: 100px;
                height: 50px;
                border: 1px solid black;
                border-radius: 5px;
                line-height: 50px;
                text-align: center;
                background-color: goldenrod;
            }
            #boxa{
                width: 100px;
                height: 0px;
                overflow: hidden;
                transition: 1s;
            }
            #boxb{
                width: 100px;
                height: 0px;
                overflow: hidden;
                transition: 1s;
            }
            #boxc{
                width: 100px;
                height: 0px;
                overflow: hidden;
                transition: 1s;
            }
            .list1{
                width: 100px;
                height: 30px;
                border-radius: 5px;
                border: 1px solid black;
                line-height: 30px;
                text-align: center;
                background-color: #008000;
            }
            .hengw{
                width: 102px;
                height: 150px;
                border-radius: 5px;
                line-height: 50px;
                text-align: center;
                float: left;
            }
            .heng{
                width: 100px;
                height: 50px;
                border: 1px solid black;
                border-radius: 5px;
                line-height: 50px;
                text-align: center;
                background-color: goldenrod;
            }
            #henga{
                width: 102px;
                height: 0px;
                overflow: hidden;
                transition: 1s;
            }
            #hengb{
                width: 102px;
                height: 0px;
                overflow: hidden;
                transition: 1s;
            }
            #hengc{
                width: 102px;
                height: 0px;
                overflow: hidden;
                transition: 1s;
            }
            #hengd{
                width: 102px;
                height: 0px;
                overflow: hidden;
                transition: 1s;
            }
            #henge{
                width: 102px;
                height: 0px;
                overflow: hidden;
                transition: 1s;
            }
            .list2{
                width: 100px;
                height: 30px;
                border-radius: 5px;
                border: 1px solid black;
                line-height: 30px;
                text-align: center;
                background-color: #008000;
            }
            .dawai{
                margin-top: 160px;
                width: 500px;
                height: 350px;
                border: 1px solid black;
            }
            .dashang1{
                width: 100px;
                height: 50px;
                line-height: 50px;
                text-align: center;
                background-color: goldenrod;
                float: left;
            }
            .dashang2{
                width: 100px;
                height: 50px;
                line-height: 50px;
                text-align: center;
                background-color: blue;
                float: left;
            }
            .dashang3{
                width: 100px;
                height: 50px;
                line-height: 50px;
                text-align: center;
                background-color: blueviolet;
                float: left;
            }
            .dashang4{
                width: 100px;
                height: 50px;
                line-height: 50px;
                text-align: center;
                background-color: greenyellow;
                float: left;
            }
            .dashang5{
                width: 100px;
                height: 50px;
                line-height: 50px;
                text-align: center;
                background-color: green;
                float: left;
            }
            #daxia1{
                width: 500px;
                height: 300px;
                line-height: 300px;
                text-align: center;
                background-color: goldenrod;
                float: left;
                float:left;
                display: block;
            }
            #daxia2{
                width: 500px;
                height: 300px;
                line-height: 300px;
                text-align: center;
                background-color: blue;
                float: left;
                float:left;
                display: none;
            }
            #daxia3{
                width: 500px;
                height: 300px;
                line-height: 300px;
                text-align: center;
                background-color: blueviolet;
                float: left;
                float:left;
                display: none;
            }
            #daxia4{
                width: 500px;
                height: 300px;
                line-height: 300px;
                text-align: center;
                background-color: greenyellow;
                float: left;
                float:left;
                display: none;
            }
            #daxia5{
                width: 500px;
                height: 300px;
                line-height: 300px;
                text-align: center;
                background-color: green;
                float: left;
                float:left;
                display: none;
            }
            .jindu{
                margin-top: 10px;
                margin-bottom: 10px;
                width: 500px;
                height: 10px;
                border: 1px solid black;
            }
            .dutiao{
                width: 0px;
                height: 10px;
                background-color: blue;
                float: left;
                transition: 5s;
            }
        </style>
    </head>
    <body>
        <div class="box1" onclick="dj1(‘boxa‘)">标题一</div>
        <div id="boxa" name="1" bs="1">
            <div class="list1">内容1</div>
            <div class="list1">内容2</div>
            <div class="list1">内容3</div>
        </div>
        <div class="box1" onclick="dj1(‘boxb‘)">标题二</div>
        <div id="boxb" name="1" bs="1">
            <div class="list1">内容1</div>
            <div class="list1">内容2</div>
            <div class="list1">内容3</div>
        </div>
        <div class="box1" onclick="dj1(‘boxc‘)">标题三</div>
        <div id="boxc" name="1" bs="1">
            <div class="list1">内容1</div>
            <div class="list1">内容2</div>
            <div class="list1">内容3</div>
        </div>
        <div class="jindu">
            <div class="dutiao"></div>
        </div>
        <div class="hengw" style="margin-left: 420px;">
            <div class="heng" onmouseover="yr(‘henga‘)" onmouseout="yc(‘henga‘)">标题一</div>
            <div id="henga" name="heng1">
                <div class="list2">内容1</div>
                <div class="list2">内容2</div>
                <div class="list2">内容3</div>
            </div>
        </div>
        <div class="hengw">
            <div class="heng" onmouseover="yr(‘hengb‘)" onmouseout="yc(‘hengb‘)">标题二</div>
            <div id="hengb" name="heng1">
                <div class="list2">内容1</div>
                <div class="list2">内容2</div>
                <div class="list2">内容3</div>
            </div>
        </div>
        <div class="hengw">
            <div class="heng" onmouseover="yr(‘hengc‘)" onmouseout="yc(‘hengc‘)">标题三</div>
            <div id="hengc" name="heng1">
                <div class="list2">内容1</div>
                <div class="list2">内容2</div>
                <div class="list2">内容3</div>
            </div>
        </div>
        <div class="hengw">
            <div class="heng" onmouseover="yr(‘hengd‘)" onmouseout="yc(‘hengd‘)">标题四</div>
            <div id="hengd" name="heng1">
                <div class="list2">内容1</div>
                <div class="list2">内容2</div>
                <div class="list2">内容3</div>
            </div>
        </div>
        <div class="hengw">
            <div class="heng" onmouseover="yr(‘henge‘)" onmouseout="yc(‘henge‘)">标题五</div>
            <div id="henge" name="heng1">
                <div class="list2">内容1</div>
                <div class="list2">内容2</div>
                <div class="list2">内容3</div>
            </div>
        </div>
        <div class="dawai">
            <div class="dashang1" onmouseover="zhaohuan(‘daxia1‘)">国内新闻</div>
            <div class="dashang2" onmouseover="zhaohuan(‘daxia2‘)">国际新闻</div>
            <div class="dashang3" onmouseover="zhaohuan(‘daxia3‘)">体育新闻</div>
            <div class="dashang4" onmouseover="zhaohuan(‘daxia4‘)">娱乐新闻</div>
            <div class="dashang5" onmouseover="zhaohuan(‘daxia5‘)">段子来了</div>
            <div id="daxia1" name = "daming">国内新闻</div>
            <div id="daxia2" name = "daming">国际新闻</div>
            <div id="daxia3" name = "daming">体育新闻</div>
            <div id="daxia4" name = "daming">娱乐新闻</div>
            <div id="daxia5" name = "daming">段子来了</div>
        </div>
        
    </body>
</html>
<script type="text/javascript">
    function dj1(x){
            var sj1 = document.getElementById(x);
            var sj0 = document.getElementsByName("1");
            var biao =    sj1.getAttribute("bs");
//            一定要先获取上次循环的biao,再把biao重置
                for (var i = 0; i < sj0.length;i++) {
                    sj0[i].style.height = "0px";
                    sj0[i].setAttribute("bs","1");
                }
            if(biao == "1"){
                sj1.style.height = "96px";
                sj1.setAttribute("bs","2");
            } else{
                sj1.style.height = "0px";
                sj1.setAttribute("bs","1");
            }
        }
    function yr(x){
        var sjheng = document.getElementById(x);
        sjheng.style.height = "100px";
    }
    function yc(x){
        var sjheng = document.getElementById(x);
        sjheng.style.height = "0px";
    }
    function zhaohuan(x){
        var sjda = document.getElementById(x);
        var sjda0 = document.getElementsByName("daming");
        for(var i = 0;i < sjda0.length;i++){
            sjda0[i].style.display = "none";
        }
        sjda.style.display = "block";
    }
    setTimeout("jindutiao()",2000)
    function jindutiao(){
        document.querySelector(".dutiao").style.width = "500px";
    }
    var zuihou = document.getElementsByClassName("list2");
    for (var i = 0;i < zuihou.length;i++) {
         zuihou[i].onmouseover = function (){
             this.parentNode.style.height = "100px";
//             获取父级元素的节点
             this.style.backgroundColor = "orange"
         }
         zuihou[i].onmouseout = function (){
             this.parentNode.style.height = "0px";
             this.style.backgroundColor = "#008000"
         }
    }
</script>

0517JS综合练习、挂事件练习

标签:splay   char   name   tran   length   cto   fun   attribute   元素   

原文地址:https://www.cnblogs.com/zhangbaozhong/p/9053094.html

(0)
(0)
   
举报
评论 一句话评论(0
0条  
登录后才能评论!
© 2014 mamicode.com 版权所有 京ICP备13008772号-2
迷上了代码!