DOM之鼠标事件
来源：互联网 发布：淘宝10元跳蛋靠谱吗 编辑：程序博客网 时间：2024/06/13 17:36
一.鼠标事件
今天的js课上主要讲了js的函数、鼠标事件及应用。
现将常用的鼠标事件总结如下：
onclick:鼠标点击事件onmouseover:鼠标移入事件onmouseout:鼠标移出事件onmousedown:鼠标按下事件onmouseup:鼠标释放事件onmousemove:鼠标拖拽移动事件
具体内容，全部都以例子的方式呈现：
1.做一个下拉框效果：
首先分析题意，下拉框效果就是鼠标移入链接元素时本来隐藏的菜单显示出来，而鼠标移出时菜单继续隐藏。
代码如下：
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style type="text/css">#div{width:120px;}body{margin:0;}a{ text-decoration:none;}.link1{display:block; width:100px; height:50px; background:#FF0; text-align:center;}body ul{margin:0; padding:0;display:none;}body ul li{list-style:none;width:100px; height:30px; background:#0F0;}</style><title>无标题文档</title></head><body> <div id="div"> <a class="link1" href="#">公司简介</a> <ul id="ul1"> <li><a href="#">发展历史</a></li> <li><a href="#">发展历史</a></li> <li><a href="#">发展历史</a></li> <li><a href="#">发展历史</a></li> </ul> </div> <script> var oUl=document.getElementById("ul1"); var oDiv=document.getElementById("div"); function show(){ oUl.style.display ="block"; }; function hide(){ oUl.style.display ="none"; }; oDiv.onmouseover=show; oDiv.onmouseout=hide; </script></body></html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
效果图如下：
移入之前：
移入时：
移出后又回归图1的状态。
注：若按照之前理解的意思，当鼠标移入“公司简介”这个链接时菜单显示出来，移出时菜单隐藏。但是需要保证虽然鼠标移出“公司简介”但停留在菜单上时菜单依然不隐藏。因此，为解决这一问题，只需在连接和菜单外嵌套一个大的div块，让其宽和高等于链接和菜单的总宽高，并且设置鼠标移入这个大div块时显示菜单，移出时隐藏菜单即可。
2.实现图一和图二的布局。鼠标点击“点击设置”时显示图二的内容。图二中的11个按钮点击时分别产生相应的变化，其中点击“确定”按钮时设置的div块隐藏。
图1
图2
代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><link type="text/css" href="css/common.css" rel="stylesheet" /><style type="text/css">button{cursor:pointer;}.page1{width:735px; height:420px; padding-left:25px; padding-top:25px; position:absolute; top:0; bottom:0; right:0; left:0; margin:auto;background:#efefef;}.page1 p{width:272px;font-size:23px; font-weight:bold; color:#000;}#btn1{width:100px; height:40px; border:none; background:red; font-size:12px; color:#fff; text-align:center; line-height:40px; position:absolute; left:290px; top:10px;}#div1{width:100px; height:100px; background:#fff; border:4px #393129 solid; margin-top:31px;}//page2用来实现设置时与背景的隔离#page2{width:735px; height:420px;background:#808080; position:absolute;top:0; left:0;opacity:0.7; filter:alpha(opacity=70); z-index:2; display:none;}#select{width:340px; height:240px; border:20px #9c949c solid; position:absolute; bottom:30px; right:30px; background:#fff; z-index:3; padding-top:10px;padding-left:10px; display:none;}#select ul{padding:0;}#select ul li{height:36px; margin-bottom:10px;}#select ul li p{display:inline-block; font-size:15px; color:#000; width:125px; margin-bottom:15px;}#select ul li button{width:36px; height:32px;margin-left:5px; border:none; text-align:center; line-height:32px;}#btn2{background:red;}#btn3{background:yellow;}#btn4{background:blue;}#btn11{width:60px; height:30px; background:#002952; position:absolute; bottom:20px; right:180px; color:#fff;}#btn12{width:60px; height:30px; background:#002952; position:absolute; bottom:20px; right:100px; color:#fff;}</style></head><body> <div class="page1"> <p>请为下面的DIV设置样式：</p> <button id="btn1">点击设置</button> <div id="div1"></div> <div id="page2"></div> <div id="select"> <ul> <li> <p>请选择背景色：</p> <button id="btn2">红</button> <button id="btn3">黄</button> <button id="btn4">蓝</button> </li> <li> <p>请选择宽（px）：</p> <button id="btn5">120</button> <button id="btn6">140</button> <button id="btn7">160</button> </li> <li> <p>请选择高（px）：</p> <button id="btn8">120</button> <button id="btn9">140</button> <button id="btn10">160</button> </li> </ul> <button id="btn11">恢复</button> <button id="btn12">确定</button> </div> </div> <script> var oPage2=document.getElementById("page2"); var oSelect=document.getElementById("select"); var oDiv1=document.getElementById("div1"); var oBtn1=document.getElementById("btn1"); var oBtn2=document.getElementById("btn2"); var oBtn3=document.getElementById("btn3"); var oBtn4=document.getElementById("btn4"); var oBtn5=document.getElementById("btn5"); var oBtn6=document.getElementById("btn6"); var oBtn7=document.getElementById("btn7"); var oBtn8=document.getElementById("btn8"); var oBtn9=document.getElementById("btn9"); var oBtn10=document.getElementById("btn10"); var oBtn11=document.getElementById("btn11"); var oBtn12=document.getElementById("btn12"); function show(){ oPage2.style.display="block"; oSelect.style.display="block"; } function hide(){ oPage2.style.display="none"; oSelect.style.display="none"; } function chane_color_red(){ oDiv1.style.background="red"; } function chane_color_yellow(){ oDiv1.style.background="yellow"; } function chane_color_blue(){ oDiv1.style.background="blue"; } function chane_width_120(){ oDiv1.style.width="120px"; } function chane_width_140(){ oDiv1.style.width="140px"; } function chane_width_160(){ oDiv1.style.width="160px"; } function chane_height_120(){ oDiv1.style.height="120px"; } function chane_height_140(){ oDiv1.style.height="140px"; } function chane_height_160(){ oDiv1.style.height="160px"; } function goback(){ oDiv1.style.background="#fff"; oDiv1.style.width="100px"; oDiv1.style.height="100px"; } oBtn1.onclick=show; oBtn2.onclick=chane_color_red; oBtn3.onclick=chane_color_yellow; oBtn4.onclick=chane_color_blue; oBtn5.onclick=chane_width_120; oBtn6.onclick=chane_width_140; oBtn7.onclick=chane_width_160; oBtn8.onclick=chane_height_120; oBtn9.onclick=chane_height_140; oBtn10.onclick=chane_height_160; oBtn11.onclick=goback; oBtn12.onclick=hide; </script></body></html>
