在 JavaScript 中更改懸停影象
Anika Tabassum Era
2023年1月30日
2022年5月31日
在 JavaScript 中,我們跟蹤一些特定的程式碼塊或方法來執行在滑鼠懸停時更改影象的任務。相反,有效的方法是建立一個使用者定義的函式,該函式將考慮影象源並與滑鼠懸停效果配合。
我們的示例集將檢視一個帶有 HTML 屬性 onmouseout
和 onmouseover
的演示,以觸發指令碼段中的某些功能。此外,在第二個例項中,我們將有一個與 jQuery 關聯的 .hover()
函式。
讓我們檢查一下程式碼庫以瞭解清楚的概念。
使用 HTML 屬性 onmouseover
和 onmouseout
來觸發函式
核心工作原理是基於 onmouseover
和 onmouseout
。並且這些屬性對映到具有其描述以在懸停時更改影象的功能。
我們將需要一個 jQuery CDN
來操作該函式,因為它恰好依賴於帶有 .attr()
的 jQuery。
程式碼片段:
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<div id="menu" >
<a href="#" id="home">
<img id='menuImg' src="https://images.unsplash.com/photo-1653398597364-c63c01f261cc?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974" alt="logo" width="200px" height="150px"
onmouseover="onHover();" onmouseout="offHover();" />
</a>
</div>
function onHover()
{
$("#menuImg").attr('src', 'https://images.unsplash.com/photo-1653398597887-5005619e8cdc?ixlib=rb-1.2.1&raw_url=true&q=80&fm=jpg&crop=entropy&cs=tinysrgb&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774');
}
function offHover()
{
$("#menuImg").attr('src', 'https://images.unsplash.com/photo-1653398597364-c63c01f261cc?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974');
}
輸出:
使用 .hover()
方法在懸停時更改影象
這個例子描述了處理 img
類 home
的 jQuery 方式。我們將為我們的影象源初始化類,然後我們將根據需要生成函式。
與上一個不同的是,我們在這裡沒有使用任何 HTML 屬性。相反,我們依賴於 .hover()
方法,該方法很有效。
讓我們跳到程式碼上。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Test</title>
</head>
<body>
<div>
<img height="150px" width="200px" src="https://images.unsplash.com/photo-1653398597887-5005619e8cdc?ixlib=rb-1.2.1&raw_url=true&q=80&fm=jpg&crop=entropy&cs=tinysrgb&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774" alt="" class="home">
</div>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script type='text/javascript'>
$(document).ready(function(){
$(".home").hover(
function() {$(this).attr("src","https://images.unsplash.com/photo-1653398597364-c63c01f261cc?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774");},
function() {$(this).attr("src","https://images.unsplash.com/photo-1653398597887-5005619e8cdc?ixlib=rb-1.2.1&raw_url=true&q=80&fm=jpg&crop=entropy&cs=tinysrgb&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774");
});
});
</script>
</body>
</html>
輸出:
Author: Anika Tabassum Era