2. 程式人生 > >掛事件綜合練習

掛事件綜合練習

阿新 • • 發佈：2018-05-20
none left 段子 meta length rip XA ;內 text

<!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;

}
#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;

}
.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;

}
#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;

}
.dawai{
margin-top: 160px;
width: 500px;
height: 350px;
border: 1px solid black;
}
.dashang1{
width: 100px;
height: 50px;
line-height: 50px;
text-align: center;

float: left;
}
.dashang2{
width: 100px;
height: 50px;
line-height: 50px;
text-align: center;

float: left;
}
.dashang3{
width: 100px;
height: 50px;
line-height: 50px;
text-align: center;

float: left;
}
.dashang4{
width: 100px;
height: 50px;
line-height: 50px;
text-align: center;

float: left;
}
.dashang5{
width: 100px;
height: 50px;
line-height: 50px;
text-align: center;

float: left;
}
#daxia1{
width: 500px;
height: 300px;
line-height: 300px;
text-align: center;

float: left;
float:left;
display: block;
}
#daxia2{
width: 500px;
height: 300px;
line-height: 300px;
text-align: center;

float: left;
float:left;
display: none;
}
#daxia3{
width: 500px;
height: 300px;
line-height: 300px;
text-align: center;

float: left;
float:left;
display: none;
}
#daxia4{
width: 500px;
height: 300px;
line-height: 300px;
text-align: center;

float: left;
float:left;
display: none;
}
#daxia5{
width: 500px;
height: 300px;
line-height: 300px;
text-align: center;

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;

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>

掛事件綜合練習

相關推薦

掛事件綜合練習

none left 段子 meta length rip XA ;內 text <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <

事件響應練習（慕課網題目）

通過 取值 font data 按鈕 turn del att get 編程練習 使用JS完成一個簡單的計算器功能。實現2個輸入框中輸入整數後，點擊第三個輸入框能給出2個整數的加減乘除。 提示：獲取元素的值設置和獲取方法為：例：賦值：document.getElemen

【Luogu】【關卡1-8】BOSS戰-入門綜合練習2（2017年10月）

c代碼 更新 line logs pen 會有 我們 eof end P1426 小魚會有危險嗎 我個人覺得這個題目出的不好，沒說明白，就先只粘貼的AC代碼吧 1 #include <bits/stdc++.h> 2 using namespace st

vue組件父子間通信之綜合練習--假的聊天室

ner name type 屬性 urn ejs rec 用戶輸入 for <!doctype html> <html> <head> <meta charset="UTF-8"> <title>組件父

Python基礎綜合練習

img OS 綜合 fill .com inf tle rtl 基礎 import turtle def mygoto(x, y): turtle.up() turtle.goto(x, y) turtle.down() def draww

組合數據類型綜合練習

括號 不能 由於 元素 字符串 print 有序 for 總結 1.組合數據類型練習： 分別定義字符串，列表，元組，字典，集合，並進行遍歷。 定義字符串並進行遍歷 >>> str = ‘Micheal‘ >>> for i in str

組合數據類型綜合練習：1.組合數據類型練習

列表 類型 練習 綜合練習 charm 組合 better clas true #字符串 s = ‘Hello‘ for i in s: print(i) # 列表 ls = [‘p‘, ‘y‘, ‘Char‘, ‘m‘] for i in ls:

Unix系統編程（）open，read，write和lseek的綜合練習

har ring strtol 開始 splay 進制 void oct unsigned 需求：程序的第一個命令行參數為將要打開的文件名稱，余下的參數則指定了文件上執行的輸入輸出操作。每個表示操作的參數都以一個字母開頭，緊跟以相關值（中間無空格分隔）。 soffet：

綜合練習：英文詞頻統計

ldr one Go 處理 AC 空格 sorted 意義 spl 詞頻統計預處理 下載一首英文的歌詞或文章 將所有,.？！’:等分隔符全部替換為空格 將所有大寫轉換為小寫 生成單詞列表 生成詞頻統計 排序 排除語法型詞匯，代詞、冠詞、連詞 輸出詞頻最大TOP10 s

綜合練習：詞頻統計

side st2 days pre forever oms rev item color song = ‘‘‘ An empty street，An empty house，A hole inside my heart，I‘m all alone，The rooms ar

第1章 綜合練習

Java第1章 綜合練習 1.1 綜合練習一A:鍵盤錄入3個學生信息(學號,姓名,年齡,居住地)存入集合,要求學生信息的學號不能重復B:遍歷集合把每一個學生信息存入文本文件C:每一個學生信息為一行數據,每行學生的學號,姓名,年齡和居住地在文件中均以逗號分隔1.1.1 案例代碼一:[AppleScript] 純

數據庫作業14——綜合練習(二) 反饋情況

tro 物理 加油 char 插入 pad 代碼規範 保存 沒有 數據庫作業14——綜合練習(二) 反饋情況 一、作業要求復述 1、創建數據庫CPXS，保存於E盤根目錄下以自己學號+姓第一個字母（阿拉伯數字+大寫字母）方式創建的文件夾中，初始大小5MB，最大20MB，以10

SQL作業：綜合練習（二）的返評

庫文件 spl val 查找 括號 冰箱 HR 題目 tar 一：作業題目：綜合練習（二） 二：題目要求： 1、創建數據庫CPXS，保存於E盤根目錄下以自己學號+姓第一個字母（阿拉伯數字+大寫字母）方式創建的文件夾中，初始大小5MB，最大20MB，以10%方式增長，日誌文件

03_java基礎（九）之綜合練習與考核評估

0511JS綜合練習

現在 rom while += else div nbsp 遊戲 write 一、一個遊戲，前20關是每一 關自身的分數，21-30關每一關是10分,31-40關，每一關是20分,41-49關，每一關是30分,50關，是100分,輸入你現在闖到的關卡數，求你現在擁有的分數.

列表、元組、字典、集合的定義、操作與綜合練習

alt 定義 cor sco end OS bubuko move remove l = [‘Lucy‘,‘Abb‘,‘Lily‘] l.append(‘Abb‘) l.pop() print(1) t = (‘Lucy‘,‘Abb‘,‘Lily‘) scores =

5.Python學習筆記:綜合練習[購物車程序]

phone python IV 技術分享 pri pen user code 練習 salary=5000 flag=True user_buy1=[] msg=‘‘‘ --------歡迎光臨----------- salary=5000 1.iphon

綜合練習[購物車]

isdigit else 綜合練習 clas CA dig TE lis mac product_list = [ (‘Mac‘, 9000), (‘kindle‘, 800), (‘tesla‘, 900000), (‘python bo

Servlet練習：實現增刪改查的綜合練習

建立 inf 畫的 image 打開 sql user 修改 分享圖片 恐怖的期末考試終於結束了-_- 本文為原創，轉載請註明出處：https://www.cnblogs.com/Tom-shushu/p/9383066.html 本篇內容主要介紹：通過Servlet，JS

LuffyCity-MySQL綜合練習50實例

學生 gin arch ble primary 分享 ins png enc 1、請創建如下表，並添加相應約束； 2、自行構造測試數據； 新建數據庫 創建表 構造測試數據 #Step1-創建數據庫LuffyCity_MySQL； #CREATE DATABASE L