0517JS综合练习、挂事件练习
<!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综合练习、挂事件练习的更多相关文章
- 11月8日上午Jquery的基础语法、选取元素、操作元素、加事件、挂事件及移除事件
jquery基础知识 1.jquery文件的引入,所有的js代码要写在下面那段代码下面. <script src="../jquery-1.11.2.min.js">& ...
- Jquery挂事件与移除事件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Jquery小例子:全选按钮、加事件、挂事件；parent()语法；slideToggle()语法；animate()语法；元素的淡入淡出效果：fadeIn() 、fadeOut()、fadeToggle() 、fadeTo()；function(e):e包括事件源和时间数据;append() 方法
function(e): 事件包括事件源和事件数据,事件源是指是谁触发的这个事件,谁就是事件源(div,按钮,span都可以是事件源),时间数据是指比如点击鼠标的事件中,事件数据就是指点击鼠标的左建或 ...
- jquery全选+下拉+单选+事件+挂事件
1.全选 <body> <input type="checkbox" id="qx" /> 全选 <input type=&quo ...
- 使 用 Jquery 全选+下拉+单选+事件+挂事件
先引用Jquery代码包 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http: ...
- jquery的基础语法、选取元素、操作元素、加事件、挂事件及移除事件
jquery基础知识 1.jquery文件的引入,所有的js代码要写在下面那段代码下面. <script src="../jquery-1.11.2.min.js">& ...
- Jquery的点击事件，三句代码完成全选事件
先来看一下Js和Jquery的点击事件 举两个简单的例子 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...
- Jquery事件
在JS里加事件 <input type="button" value="测试" onclick="test()"/>跟一个函数 ...
- 有关HTML5 Video对象的ontimeupdate事件的问题
日前在做一个视频播放的页面,其中用到了HTML5的Video对象,这个是HTML5中新增的一个对象,支持多种不同格式的视频在线播放,功能比较强大,而且还扩展了许多事件,可以通过JavaScript脚本 ...
随机推荐
- Memcached学习笔记 — 第四部分:Memcached Java 客户端-gwhalin(1)-介绍及使用
介绍 Memcached java client是官方推荐的最早的memcached java客户端.最新版本:java_memcached-release_2.6.1. 官方下载地址:http ...
- C语言实现某年某月某日是某年的第几天
看到这个标题,想实现这样的功能其实挺简单的,用C语言的switch语句加上闰年,平年条件的判断,再加上一定的逻辑可以轻松实现这样的函数,在linux内核中,存在判断闰年平年的接口,我将它移植出来后,写 ...
- ruby技巧001:求md5散列
ruby核心库中未包含md5之类的功能,不过在其标准库digest中可以方便的使用该功能: = Digest (from ruby core) ---------------------------- ...
- 百度编辑器上传视频音频的bug
前言:UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码,百度Ueditor 支持多种后台语言上传 ...
- Mybatis解决jdbc编程的问题
1.1.1 Mybatis解决jdbc编程的问题 1. 数据库链接创建.释放频繁造成系统资源浪费从而影响系统性能,如果使用数据库链接池可解决此问题. 解决:在SqlMapConfig.xml中配置 ...
- 安装VirtualBox后 不能选择64bit的系统
之前在台式机上安装VirtualBox,一切OK,能够安装64位的任何版本iso包今天在hp笔记本上安装,安装VirtualBox完毕后,只能选择32位的iso版本. 而我目前只有一个linux64b ...
- Application "org.eclipse.ui.ide.workbench" could not be found in the registry.问题的解决
今天升级Eclipse,升级完Restart,碰到启动不了让看日志,日志里主要错误信息即是Application "org.eclipse.ui.ide.workbench" co ...
- ThinkPHP简单的验证码实现
ThinkPHP简单的验证码实现 写一个最简单的TP验证码. 写Controller 首先在Controller/IndexController.class.php(简称Index)文件中编辑: &l ...
- Ocelot中文文档-GraphQL
好吧!你明白我的意思Ocelot并不直接支持GraphQL,但有这么多人问起它,我想表明整合graphql-dotnet库是多么容易 请参阅示例项目OcelotGraphQL. 结合使用graphql ...
- 算法竞赛之递归——输出1-n的所有排列
本文是博主原创文章,未经允许不得转载.我的csdn博客也同步发布了此文, 链接 https://blog.csdn.net/umbrellalalalala/article/details/79792 ...