一、知识要点
1、匿名函数
2、鼠标事件
3、document.getElementById()
4、window.onload
5、行间事件提取
二、源码参考
<!DOCTYPE >
<html>
<head>
<title></title>
<meta charset="utf-8">
<style>
#div1 {
width: 200px;
height: 100px;
background-color: #ccc;
border: 1px solid #999;
display: none;
}
</style>
<script>
window.onload = function() {
var input1 = document.getElementById('input1');
var div1 = document.getElementById('div1');
input1.onmouseover = function() {
div1.style.display = 'block';
}
input1.onmouseout = function() {
div1.style.display = 'none';
}
}
</script>
</head>
<body>
<input id="input1" type="checkbox" value="checkbox" />
<div id="div1">
为了您的信息安全...
</div>
</body>
</html>
三、运行效果
image
分享隐藏显示
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1 {
width: 100px;
height: 200px;
background: red;
position: absolute;
left: -100px;
top: 100px;
}
#div2 {
width: 30px;
height: 60px;
position: absolute;
right: -30px;
top: 70px;
background: black;
color: white;
text-align: center;
}
</style>
<script>
window.onload = function () {
var oDiv = document.getElementById('div1');
oDiv.onmouseover = function () {
this.style.left = '0px';
}
oDiv.onmouseout = function () {
this.style.left = '-100px';
}
}
</script>
</head>
<body>
<div id="div1">
<div id="div2">分享到</div>
</div>
</body>
</html>
image
