JS實現滑鼠事件移動換圖
阿新 • • 發佈：2019-02-04
1.原始碼
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet"/>
<script type="text/javascript" charset="utf-8">
mui.init();
</script>
<script>
function inputing(){
var img=document.getElementById("image");
img.src="img/a1.jpg";
}
function leaving(){
var img=document.getElementById("image");
img.src="img/a2.jpg";
}
</script>
<style>
.a{
height:130px;
width:100%;
background-color: #007AFF;
position:absolute;
top:0px;
}
.b{
border-radius: 200px;
height:150px;
width:40%;
background-color: #CF2D28;
position:absolute;
top:50px;
left:30%;
}
.c{
height:70px;
width:100%;
background-color: #007AFF;
position:absolute;
bottom:0px;
}
.d{
height:270px;
width:100%;
background-color: #007AFF;
position:absolute;
top:240px;
}
</style>
</head>
<body>
<div class="a"></div>
<img class="b" src="img/p2.jpg" ></img>
<div class="c"></div>
<img id="image" class="d" src="img/a1.jpg" onmouseenter="inputing()" onmouseleave="leaving()"></img>
</body>
</html>
2.方法事件
onmouseenter:滑鼠移動到圖片上的事件，不支援冒泡
onmouseover：滑鼠移動到圖片上的事件，支援冒泡
onmouseleave：滑鼠移出圖片後的事件
3.實現截圖
