JS示例01-鼠标移入移出事件
- 2019 年 11 月 7 日
- 筆記
一、知识要点
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
