一、常用的鼠标事件<body>
<img src="img/img_05.png" alt="" width="250px">
<script>
window.onload = function (ev) {
var logo = document.getElementsByTagName("img")[0];
//1.新的事件
logo.onmouseover = function (e1) {
console.log("-----");//鼠标进入图片就会触发,也就悬停在图片上
this.setAttribute("src","img/img_02.png");
}
logo.onmouseleave = function (e2) {
this.setAttribute("src","img/img_05.png");//鼠标离开图片就会触发
}
}
</script>
</body>
</html>
二、侧边的显示和隐藏<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>D32_3_erweimaXianshi</title>
<style>
*{
margin:0;
padding:0;
list_style:none;
}
#e_coder{
width:500px;
height:500px;
background:url("img/img_05.png") no-repeat;
position:fixed;
top:40%;
left:0;
cursor:pointer;
}
#e_app{
position:absolute;
left:50px;
top:-50px;
display: none;
}
</style>
</head>
<body>
<div id="e_coder">
<div id="e_app">
<img src="img/img_02.png" alt="公众号" width="150">
</div>
</div>
<script>
window.onload = function (ev1) {
//1.获取需要的标签
var e_coder = document.getElementById("e_coder");
var e_app = document.getElementById("e_app");
//2.监听鼠标
e_coder.onmouseover = function (ev2) {
//2.1改变背景图片
this.style.background = 'url("img/img_03.png") no_repeat';
//2.2显示二维码
e_app.style.display = "block";
}
e_coder.onmouseover = function (ev3) {
this.style.background = 'url("img/img_04.png") no_repeat';
e_app.style.display = "none";
}
}
</script>
</body>
</html>
三、源码：D32_1_JS.html D32_2_CommonMouse.html D32_3_erweimaXianshi.html 地址:https://github.com/ruigege66/JavaScript/blob/master/D32_1_JS.html https://github.com/ruigege66/JavaScript/blob/master/D32_2_CommonMouse.html
https://github.com/ruigege66/JavaScript/blob/master/D32_3_erweimaXianshi.html
博客园：https://www.cnblogs.com/ruigege0000/ CSDN：https://blog.csdn.net/weixin_44630050?t=1
|
