<!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综合练习、挂事件练习的更多相关文章

  1. 11月8日上午Jquery的基础语法、选取元素、操作元素、加事件、挂事件及移除事件

    jquery基础知识 1.jquery文件的引入,所有的js代码要写在下面那段代码下面. <script src="../jquery-1.11.2.min.js">& ...

  2. Jquery挂事件与移除事件

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. Jquery小例子:全选按钮、加事件、挂事件；parent()语法；slideToggle()语法；animate()语法；元素的淡入淡出效果：fadeIn() 、fadeOut()、fadeToggle() 、fadeTo()；function(e):e包括事件源和时间数据;append() 方法

    function(e): 事件包括事件源和事件数据,事件源是指是谁触发的这个事件,谁就是事件源(div,按钮,span都可以是事件源),时间数据是指比如点击鼠标的事件中,事件数据就是指点击鼠标的左建或 ...

  4. jquery全选+下拉+单选+事件+挂事件

    1.全选 <body> <input type="checkbox" id="qx" /> 全选 <input type=&quo ...

  5. 使 用 Jquery 全选+下拉+单选+事件+挂事件

    先引用Jquery代码包 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http: ...

  6. jquery的基础语法、选取元素、操作元素、加事件、挂事件及移除事件

    jquery基础知识 1.jquery文件的引入,所有的js代码要写在下面那段代码下面. <script src="../jquery-1.11.2.min.js">& ...

  7. Jquery的点击事件，三句代码完成全选事件

    先来看一下Js和Jquery的点击事件 举两个简单的例子 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...

  8. Jquery事件

    在JS里加事件  <input type="button" value="测试" onclick="test()"/>跟一个函数 ...

  9. 有关HTML5 Video对象的ontimeupdate事件的问题

    日前在做一个视频播放的页面,其中用到了HTML5的Video对象,这个是HTML5中新增的一个对象,支持多种不同格式的视频在线播放,功能比较强大,而且还扩展了许多事件,可以通过JavaScript脚本 ...

随机推荐

  1. 生产者消费者的java实现

    先看最简单的,也就是缓冲区的容量为1 缓冲区容量为1 import java.util.List; public class ProducerAndConsumer2 { static class A ...

  2. Android驱动中的Kconfig文件与Makefile文件

    内核源码树的目录下都有两个文档Kconfig(2.4版本是Config.in)和Makefile.分布到各目录的Kconfig构成了一个分布式的内核配置数据库,每个Kconfig分别描述了所属目录源文 ...

  3. 使用swift语言进行IOS应用开发

    在Swift中能够直接使用Objective-C语言提供的api (包括系统框架与自己的定制代码),也能够在Objective-C中使用Swift提供的类和api ,还能够在一个工程中同时混合使用Sw ...

  4. 【11】-java递归和非递归二叉树前序中序后序遍历

    二叉树的遍历 对于二叉树来讲最主要.最基本的运算是遍历. 遍历二叉树 是指以一定的次序访问二叉树中的每个结点.所谓 访问结点 是指对结点进行各种操作的简称.例如,查询结点数据域的内容,或输出它的值,或 ...

  5. .net中的各种委托(Delegate、Action、Func)

    1.Delegate,委托的鼻祖 protected delegate int ClassDelegate(int x, int y);//定义委托类型及参数 static void Main(str ...

  6. Mybatis 系列4

    上篇系列3中 介绍了properties与environments, 本篇继续讲剩下的配置节点之一:typeAliases. typeAliases节点主要用来设置别名,其实这是挺好用的一个功能, 通 ...

  7. Nowcoder84D

    Nowcoder84D 传送门 很有趣的进制转换题! 如果x满足题意,那么x+k-1一定能符合要求! 因为k-1用k进制表示就是1,-1,1+(-1)=0所以数位之和不变! 用map维护一下前缀和.就 ...

  8. es6（一）：es6介绍以及let,const

    es是js的规范,而js是具体实现 将es6转化为es5代码工具:运用的多的是babel 在线转换地址:babel,traceur(属于谷歌)   1.let申明变量:let其实可以完全取代var,并 ...

  9. 物流的纯css实现方法

    首先我们来看看UI给出的设计图. 为什么到达是最前面,为什么物流顺序是倒叙的,这是什么用户习惯,这是我拿到设计稿的问题,但是这里不谈设计,因为审美这个东西无法评估.那么这里我就做一个顺序的来对比一下吧 ...

  10. linux下 mysql数据库的备份和还原sql

    1.备份 [root@CentOS ~]# mysqldump -u root -p mysql > ~/mysql.sql #把数据库mysql备份到家目录下命名为mysql.sql Ente ...