一、常用的鼠标事件
<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.htmlhttps://github.com/ruigege66/JavaScript/blob/master/D32_3_erweimaXianshi.html- 博客园：
https://www.cnblogs.com/ruigege0000/
- CSDN：
https://blog.csdn.net/weixin_44630050?t=1
- 欢迎关注微信公众号：傅里叶变换，个人账号，仅用于技术交流
