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脚本 ...
随机推荐
- FFmpeg 2.1 试用（新版支持HEVC，VP9）
前两天帮一位老师转码图像的时候,无意间发现新版FFmpeg竟然支持了下一代编码标准HEVC,以及Google提出的下一代编码标准VP9.真心没想到FFmpeg对下一代的编码标准支持的是如此之快.我还以 ...
- 为macbook双系统的windows装驱动
网上有很多装双系统教程,这里就不再累赘,但是自己发现装完后驱动怎么装并没有交代清楚. 研究后发现,在作为驱动盘的U盘里,BootCamp文件夹下有个setup.exe 运行此程序便进行驱动的安装.
- Linux进程管理(第二版) --计划任务
计划任务 一.一次性计划任务 月11日) at 5:30pm at 17:30 [today] #today可省略 at now + 3 hours at now + 180 minutes at 1 ...
- android的Devices窗口中Online显示成Offline
这种情况几率很低,如果出现,点击Reset adb就好了.
- 增量会话对象——DeltaSession
在集群环境中为了使集群中各个节点的会话状态都同步,同步操作是集群重点解决的问题,一般来说有两种同步策略,其一是每次同步都把整个会话对象传给集群中其他节点,其他节点更新整个会话对象:其二是对会话中增量修 ...
- [驱动注册]platform_driver_register()与platform_device_register()
[驱动注册]platform_driver_register()与platform_device_register() 设备与驱动的两种绑定方式:在设备注册时进行绑定及在驱动注册时进行绑定. ...
- MVVM With ReactiveCocoa让移动开发更简单
作者:@雷纯锋2011 MVVM是一种软件架构模式,它是 Martin Fowler 的 Presentation Model 的一种变体,最先由微软的架构师 John Gossman 在 2005 ...
- 用JAVA代码获取Weblogic配置的JNDI 数据源连接
第一步:生成与JDK版本对应的weblogicjar,利用cmd 进入到weblogic_home 路径下进入到server/lib目录,然后运行 JDK 1.6 命令 "java -j ...
- JS实现鼠标滚动事件，兼容IE9,FF,Chrome.
<!-- 废话不多说,直接贴代码 --><script type="text/javascript" src="jquery.min.js"& ...
- oracle 随机数（转载）
http://blog.sina.com.cn/s/blog_6a01140c0100wimi.html 1.从表中随机取记录 select * from (select * from staff o ...