1. 关闭小广告
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS</title>
<style>#icon { width: 250px; top: 20px; left: 20px; position: relative; } #close{ width: 40px; position: absolute; top: 26px; left: 238px; cursor: pointer; }</style></head>
<body>
<div id="box">
<img id="icon" src="icon.jpg" alt="图片">
<img id="close" src="close.jpg" alt="图片">
</div>
<script type="text/javascript">
//1.获取事件源
var box = document.getElementById("box");
var close = document.getElementById("close");
close.onclick = function() {
box.style.display = "none";
}
</script>
</body>
</html>切换图片
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS</title>
</head>
<body>
<img id="logo" src="icon.jpg" alt="图片" width="250px">
<script type="text/javascript">
//1.获取事件源
var logo = document.getElementById("logo");
//2.绑定事件
logo.onmouseover = function() {
console.log("鼠标进入图片");
logo.src = "icon-2.jpg";
}
logo.onmouseout = function() {
console.log("鼠标离开图片");
logo.src = "icon.jpg";
}
</script>
</body>
</html>