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 应用开发】Android - TabHost 选项卡功能用法详解
TabHost效果图 : 源码下载地址 : http://download.csdn.net/detail/han1202012/6845105 . 作者 :万境绝尘 转载请注明出处 ...
- 集群增量会话管理器——DeltaManager
DeltaManager会话管理器是tomcat默认的集群会话管理器,它主要用于集群中各个节点之间会话状态的同步维护,由于相关内容涉及到集群,可能会需要一些集群通信相关知识,如果有疑问可结合集群相关章 ...
- IOS 与ANDROID框架及应用开发模式对比一
IOS 和ANDROID操作系统都是目前流行的移动操作系统,被移动终端和智能设备大量采用,两者都采用了先进的软件技术进行设计,为了方便应用开发两者都采用了先进的设计模式.两者在框架设计上都采用了什么技 ...
- Eclipse修改工程名字
1:修改项目目录下:.project文件 <?xml version="1.0" encoding="UTF-8"?> <projectDes ...
- 安卓系统启动脚本init.rc说明文件readme.txt翻译
本说明文件位于system/core/init/readme.txt 本文参考深入解析安卓系统一书,进行翻译,版权部分归书的作者 刘超,资深Android专家,系统架构师. 博客地址:http:// ...
- android的ndk开发简介-android学习之旅（93）
环境搭建 1.安装ndk 2.安装cygwin (android是基于linux的Framework,运行的本地库是.SO,而不是.dll库,大部分都实在windows下开发,如果是linux就没这个 ...
- Xcode使用心得03:打开僵尸(Zombie)模式
如果打开了ARC或垃圾回收模式,在程序中发消息给以及重新分配的对象,将会引起程序崩溃.这时定位崩溃原因将非常困难,因为出问题的对象已经重新分配了.一个解决的方法就是要求Xcode将对象设置为" ...
- 万水千山ABP - 时区问题
关于时间和时区问题,后面的参考文章中有详细的描述. 我遇到的问题是: 在MVC视图页面中,显示记录的生成时间 CreationTime <div> @Model.CreationTime ...
- javaScript(1)---概述
javaScript(1)---概述 学习要点: 1.什么是JavaScript 2.JavaScript特点 3.JavaScript历史 4.JavaScript核心 JavaScript诞生于1 ...
- maven常见配置
maven surefire plugin 默认执行失败后,不会继续执行,需要在</configuration>中设置参数 <testFailureIgnore>true< ...