當我們在制作一個網頁時，常常會有想要選中部分高亮的需求，那么怎么用jQuery的極簡代碼完成這件事呢？
可以看到，三個圖片中，當我們的滑鼠移到哪個上面，哪個就從中脫穎而出，其實這只需要一段非常簡單的代碼即可完成
$(function() {
//設定滑鼠進入的時候,其他的li標簽透明度：0.5
$(".wrap li").hover(function() {
$(this).siblings().stop().fadeTo(400, 0.5);
}, function() {
// 設定滑鼠離開，其他li 透明度改為 1
$(this).siblings().stop().fadeTo(400, 1);
})上段代碼中的hover在上一篇文章中已經提到過，siblings也在之前的文章中提到過，這里就不過多闡述，這里我們主要注意一下stop（）的用法
stop（）即停止排隊效果，且必須寫到影片的前面
什么意思呢？讓我們來看一段沒有stop（）的影片效果
可以看到，當我們快速多次經過圖片后，即使滑鼠已經移開，但是依然在執行操作，如果有個熊孩子一直這樣劃，或者我們在操作程序中出現失誤，就會給瀏覽器加載帶來過多的負擔，所以stop（）的作用就非常關鍵了
stop（）會停止上一個動作，只做最后一個動作
說了這么多，我們把高亮顯示和stop（）代碼放到整體代碼中，大家感受一下這兩個代碼的用法
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<title>Wellfancy</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
body {
background: #000;
}
.wrap {
margin: 100px auto 0;
width: 278px;
height: 490px;
padding: 1px;
background: white;
overflow: hidden;
border: 1px solid #ffffff;
}
.wrap li {
float: left;
margin: 3px 2px;
}
.wrap img {
display: block;
border: 0;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(function() {
$(".wrap li").hover(function() {
$(this).siblings().stop().fadeTo(400, 0.5);
}, function() {
$(this).siblings().stop().fadeTo(400, 1);
})
});
</script>
</head>
<body>
<div class="wrap">
<ul>
<li>
<a href="#"><img src="images/4.jpg" style="height: 160px ;" /></a>
</li>
<li>
<a href="#"><img src="images/5.jpg" style="height: 160px ;"/></a>
</li>
<li>
<a href="#"><img src="images/6.jpg" style="height: 160px ;"/></a>
</li>
</ul>
</div>
</body>
</html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/292370.html
標籤：其他
上一篇：mini-vue渲染的簡易實作
下一篇：前端-剖析瀏覽器渲染頁面的程序