在項目裏,有時候會寫這樣的開關效果,點擊開關來回切換,也就是jquery實現點擊圖片切換爲另一圖片,再次點擊恢復到原圖片。
下面是一個小的demo示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
</head>
<body>
<div>
<img class="imgclick" src="images/off.png"/>
</div>
</body>
<script>
/* 實現圖片切換 */
$(".imgclick").toggle(function() {
$(this).attr("src", "images/off.png");
}, function() {
$(this).attr("src", "images/on.png");
}).attr("src", "images/on.png");
</script>
</html>
效果是這樣的
原文作者:祈澈姑娘 技術博客:https://www.jianshu.com/u/05f416aefbe1
90後前端妹子,愛編程,愛運營,文藝與代碼齊飛,魅力與智慧共存的程序媛一枚。