0517JS练习：挂事件

最新推荐文章于 2019-02-20 21:53:20 发布
最新推荐文章于 2019-02-20 21:53:20 发布
阅读量84 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/zhangbaozhong/p/9053094.html
版权

<!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" οnclick="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" οnclick="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" οnclick="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" οnmοuseοver="yr('henga')" οnmοuseοut="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" οnmοuseοver="yr('hengb')" οnmοuseοut="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" οnmοuseοver="yr('hengc')" οnmοuseοut="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" οnmοuseοver="yr('hengd')" οnmοuseοut="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" οnmοuseοver="yr('henge')" οnmοuseοut="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" οnmοuseοver="zhaohuan('daxia1')">国内新闻</div>
            <div class="dashang2" οnmοuseοver="zhaohuan('daxia2')">国际新闻</div>
            <div class="dashang3" οnmοuseοver="zhaohuan('daxia3')">体育新闻</div>
            <div class="dashang4" οnmοuseοver="zhaohuan('daxia4')">娱乐新闻</div>
            <div class="dashang5" οnmοuseοver="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>

转载于:https://www.cnblogs.com/zhangbaozhong/p/9053094.html

weixin_33912445
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
幸运抽奖系统
weixin_43537849的博客
11-06 1471
幸运抽奖系统 该程序分为三个模块，注册，登陆，抽奖 。 主要代码，产生随机数并将随机数与账号对比，这一步利用循环实现。 package Project1; import java.util.Scanner; public class GoodLuck{ public static void main(String[] args) { int cardNumber=0; String name ="...
JavaScript 学习笔记 - 挂载事件 Demo
湖边的小屋圣迹
02-27 1734
&lt;!DOCTYPE html&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &
js中事件绑定3种方法以及事件委托
weixin_42367621的博客
06-02 1283
事件绑定首先，我先来介绍我们平时绑定事件的三种方法。 1.嵌入dom&lt;button onclick="open()"&gt;按钮&lt;/button&gt; &lt;script&gt; function open(){ alert(1) } &lt;/script&gt;12345672.直接绑定&lt;button id="btn"&gt;按钮&lt;/but
字符串 列表 基本语法练习
BeefpasteC的博客
02-20 676
#注意运行过程 a=1234 b=0 while a&amp;gt;0: b=b*10+a%10 a//=10 print(b) #字符串 a=‘123’ print(a) a=‘12’3’#里面的引号可见 \ 代表转移字符 print(a) a=‘123&quot;4&quot;’ print(a) #快捷符号 a=‘1\t2’#一个teb键 print(a) a=‘1\n2’#换行 print(a) a=‘1\f2’#一...
10对话框综合练习
qq_23666533的博客
07-29 172
new document                  function openWindow(){       var a=confirm("确定要打开新的窗口吗？");            if(a==true)       {          var b=prompt("网址", "http://www.baidu.com/");         
ReactJSTraining：React JS基础培训的练习文件
02-23
这些是用于课程的练习文件。 课程大纲可以在下面找到 主题1 React JS入门 React JS简介 将React添加到网站 创建一个新的React App 主题2 JSX和渲染元素简介 JSX简介 将元素渲染到DOM中 更新渲染的元素 证券问题 ...
react-hooks:ReactJS钩子练习17
04-12
挂钩应用 App ReactJS实用钩子 该项目是通过引导的。 Aplicacion creada durante curso 递归 打破不良的API ...可用脚本 在项目目录中，可以运行： npm start 在开发模式下运行应用程序。... 如果您进行编辑，则页面将...
circleci-excercise:CI CD练习
03-08
体育锻炼我在每次提交之前都放置了一个运行更漂亮的pre-commit挂钩，并自动对代码进行了美化
CrackJs:记录一下js逆向的网站
07-24
☆ ☆ ☆☆ ☆☆ ☆☆ ☆☆ ☆☆☆爬虫练习类： 请查看CSDN文章，目前只发了少量的文章验证码类： ☆☆☆☆ 指纹：☆☆ 滑块轨迹：☆☆☆☆ (分析的过程难，最后随机生成的鼠标轨迹不难)天yan验证码 - 官网已经挂掉...
新手中级练习看图识字挂图水果拼盘.html
05-07
水果拼盘
python学习笔记之阶段练习
愚公求道
05-18 365
第一题：        1. 创建add_log装饰器，被装饰的函数日志信息被记录到/var/log/python.log文件中；        2. 日志格式为: [字符串时间] Level: 日志级别 Name: 函数名称， Runtime：xxx  Result:xxx        [注]: 装饰器带有参数;    import time     import functools     ...
（ZZ）变成富翁的二十五中方法
彩云之南
01-24 129
声明：该文转自腾讯大秦网，理财频道。 1 、做你真正感兴趣的事—— 你会花很多时间在上面，因此你一定要感兴趣才行，如果不是这样的话，你不合愿意把时间花在上面，就得不到成功。   2 、自己当老板，为别人打工，你绝不会变成巨富，老板一心一意地缩减开支，他的目标不是使他的职员变成有钱人。   3 、提供一种有实效的服务，或一种实际的产品，你要以写作、绘画或作曲...
PYTHON---if综合练习
仙女的博客
08-28 249
1.判断闰年? 用户输入年份year, 判断是否为闰年?      - year能被4整除但是不能被100整除 或者 year能被400整除, 那么就是闰年; year = int(raw_input("Year:")) if (year % 4 == 0 and year % 100 != 0) or ( year % 400 == 0):     print("%s是闰年" %(year))...
利用python编写一个简易登陆认证系统
hongshuhongshu97的博客
01-19 2511
任务要求 用户名密码保存在user文件中，黑名单保存在black文件中 用户登陆需要输入正确的用户名贺密码，认证成功程序就正常退出 认证失败则重新认证，失败三次后，该用户名会被加入黑名单文件 #_*_coding:utf8_*_ import getpass f1 = open("user", 'r+') dict1 = {} for line in f1.readlines(): ...
第十周项目6-贪财的富翁
weixin_33826609的博客
11-02 141
一个百万富翁遇到一个陌生人，陌生人找他谈一个换钱的计划，该计划如下：我每天给你十万元，而你第一天只需给我一分钱，第二天我仍给你十万元，你给我两分钱，第三天我仍给你十万元，你给我四分钱，....，你每天给我的钱是前一天的两倍，直到满一个月（30天），百万富翁很高兴，欣然接受了这个契约。 <span style="font-size:14px;">/* *Copyright (...
Python习题（第2课）
03-26 3755
一、天天向上的力量 C 　　一年365天，以第1天的能力值为基数，记为1.0。当好好学习时，能力值相比前一天提高N‰；当没有学习时，由于遗忘等原因能力值相比前一天下降N‰。每天努力或放任，一年下来的能力值相差多少呢？其中，N的取值范围是1到10，N可以是小数。 　　获得用户输入N，计算每天努力和每天放任365天后的能力值及能力间比值，其中，能力值保留小数点后2位，能力间比值输出整数，...
【实验7】综合练习
weixin_34113237的博客
10-31 77
一、填空：阅读下列程序说明和程序，在可选答案中，挑选一个正确答案。填补(1) (2) (3) (4)处空白，并注释说明为什么。程序说明求 1 + 2/3 + 3/5 + 4/7 + 5/9 + … 的前15项之和。 运行示例：sum = 8.667936程序如下： 1 #include <stdio.h> 2 void main( ) 3 { 4 int ...
Js绑定事件的几种方式
Jsonkim的博客
09-18 3475
1.直接在标签中绑定<!DOCTYPE html> <html> <head> <title>直接在标签里绑定事件</title> </head> <body> <input type="button" value="点我触发事件" onclick="fun1('liming')" /> <script type="text/javascript">
第十章
xylzlxy的博客
09-17 164
package myxy; import java.util.Scanner; public class A2{ public static void main(String[] args) { Scanner input=new Scanner(System.in); String xiaoyi; String user=""; //登录用户名...
js代码：按钮单击事件，显示被隐藏的div
最新发布
05-21
可以使用 JavaScript 绑定按钮单击事件，通过修改样式来显示被隐藏的 div。具体实现如下： HTML 代码： ```html 显示隐藏的 div <div id="hiddenDiv" style="display:none"> 这是被隐藏的 div ``` JavaScript ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值