JS/jquery實作滑鼠事件控制頁面元素顯隱（程式碼實例）
- 青灯夜游原創
- 2018-09-10 16:37:161437瀏覽
本章帶給大家用JS/jquery實現滑鼠事件控制頁面元素顯隱效果，有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。
一、mouseout和mouseleave
# 對於滑鼠指標的移入和移出，就涉及到了mouseover、mouseout和mouseleave事件。
mouseover：當滑鼠指標移到目標元素時觸發該事件；
mouseout：當滑鼠指標移出目標元素或其子元素時，都會觸發該事件；
mouseleave：只有到滑鼠指標移出目標元素時，才會觸發該事件；
這裡要特別注意mouseout與mouseleave的差別。我們透過下面程式碼範例來看一下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>鼠标控制页面元素显隐</title>
<script src="http://apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script>
<style>
#boxout,
#boxleave {
width: 250px;
height: 100px;
padding-top: 20px;
background-color: #cccccc;
float: left;
margin-left: 30px;
}
#boxoutson,
#boxleaveson {
width: 200px;
height: 50px;
background-color: yellow;
padding: 0px auto;
margin: 0px auto;
}
</style>
</head>
<body>
<div id="boxout">
<div id="boxoutson">
第<span></span>次触发mouseout事件
</div>
</div>
<div id="boxleave">
<div id="boxleaveson">
第<span></span>次触发mouseleave事件
</div>
</div>
<script>
x = 0;
y = 0;
$("#boxout").mouseout(function() {
$("#boxout span").text(x += 1);
});
$("#boxleave").mouseleave(function() {
$("#boxleave span").text(y += 1);
});
</script>
</body>
</html>
效果圖：
二、fadeIn和fadeOut
# 前文實例中用的是show()和hide()方法，前台顯隱效果瞬間完成，為了提高實際用戶體驗，這裡我們介紹兩位更友好的“朋友”，即fadeIn和fadeOut。
fadeIn：方法使用淡入效果來顯示目標元素。
fadeOut：方法使用淡出效果來隱藏目標元素
這兩個方法可以配置參數來控制速度，例如slow、normal、fast或指定毫秒數。
下面我們就show()、hide()與fadeIn()、fadeOut()的效果坐下來對比，程式碼如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>鼠标控制页面元素显隐</title>
<script src="http://apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script>
<style>
#box1,
#box2 {
width: 250px;
height: 100px;
padding-top: 20px;
background-color: #cccccc;
float: left;
margin-left: 30px;
}
#box1son,
#box2son {
width: 200px;
height: 50px;
background-color: yellow;
padding: 0px auto;
margin: 0px auto;
}
</style>
</head>
<body>
<div id="box1">
<div id="box1son">
<span>hide和show</span>
</div>
</div>
<div id="box2">
<div id="box2son">
<span>fadeIn和fadeOut</span>
</div>
</div>
<script>
$("#box1 span").hide();
$("#box1").mouseover(function() {
$("#box1 span").show();
}).mouseleave(function() {
$("#box1 span").hide();
});
$("#box2 span").hide();
$("#box2").mouseover(function() {
$("#box2 span").fadeIn("slow");
}).mouseleave(function() {
$("#box2 span").fadeOut("slow");
});
</script>
</body>
</html>
滑鼠沒有移動上去的效果圖：
滑鼠移動上去的效果圖：
以上是JS/jquery實作滑鼠事件控制頁面元素顯隱（程式碼實例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn