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脚本 ...
随机推荐
- android 线程那点事
在操作系统中,线程是操作系统调度的最小单元,同时线程又是一种受限的系统资源,即线程不可能无限制的产生,并且线程的创建和销毁都会有相应的开销,当系统中存在大量的线程时,系统会通过时间片轮转的方式调度每个 ...
- TCP的核心系列 — SACK和DSACK的实现（二）
和18版本相比,37版本的SACK和DSACK的实现做了很多改进,最明显的就是需要遍历的次数少了, 减少了CPU的消耗.37版的性能提升了,代码有大幅度的改动,逻辑也更加复杂了. 本文主要内容:37版 ...
- 【ROM修改教程】添加高级电源重启菜单(安卓4.0.4官方ROM)
准备工作: 电脑上安装好JDK.下载smali和baksmali.下载apktools.要修改的ROM.adb工具(可选) 注:由于本教程面向的对象为有一定ROM修改基础的兄弟,所以对于如何使用电脑, ...
- 是我out了,c11标准出炉鸟
gcc -std=c11 -Wall -O3 -g0 -s -o x.c x 或者 clang -std=c11 -Wall -O3 -g0 -s -o x.c x 来吧! 我是有多无聊啊 测试代码: ...
- android EventBus详解（二）
上一节讲了EventBus的使用方法和实现的原理,下面说一下EventBus的Poster只对粘滞事件和invokeSubscriber()方法是怎么发送的. Subscribe流程 我们继续来看Ev ...
- objective-c中类似ruby枚举类的实例方法
虽然obj-c的语法格式略显繁琐,但它和ruby都从某些方面继承了smalltalk的某些动态的东西.这些东西是 C和C++之类的静态语言所不曾有的. 比如ruby中可以将一个类或对象的所有方法枚举出 ...
- android DialogFragment 实现Dialog展示扫二维码图片展示
近期开发项目,做个按钮点击弹出展示微信二维码关注微信公众号的展示框,于是想到DialogFragment,期间对Dialog的title的底框字体颜色做出相关设置,记录如下: 下面是 DialogFr ...
- javascript简单介绍（二）
晨读单词: onmouseover:鼠标移入 onmouseout:鼠标移出 attribute:属性 node:节点 document:文档 element:元素 textNode:文本节点 app ...
- Linux/Windows远程桌面
WINDOWS远程连接LINUX配置(LINUX VNC Server配置): 1.查看本机是否有安装vnc(centOS5默认有安装vnc) rpm -q vnc vnc-server 如果显示 ...
- 当今商业中使用的三种十分重要的IT应用系统
本文为读书笔记,其中内容摘自<信息时代的管理信息系统>第八版第二章 当今商业中使用的三种十分重要的IT应用系统: 供应链管理(SCM) 客户关系管理(CRM) 电子协同(e-collabo ...