一.具體步驟：
1.創建img
<img src="../images/2.jpeg" alt="">2.設定圖片的樣式
<style>
* {
margin: 0;
padding: 0;
}
img {
width: 300px;
height: 300px;
position: absolute;
left: 200px;
top: 200px;
opacity: 0.3;
}
</style>3.寫js代碼
3-1.獲取img節點
// 獲取節點
let imgObj = document.querySelector('img');3-2.設定移入和移出事件
// 給圖片系結移入事件
imgObj.onmouseover = function () {
//移入時，透明度變為100
strat(100);
}
// 給圖片系結移出事件
imgObj.onmouseout = function () {
//移出時，變為半透明度為30
strat(30);
}3-3.設定臨時透明度和定時器
// 設定臨時透明度
let alpha = 30;
// 設定定時器
let times = '';3-4宣告一個函式用于改變透明度
function strat(target) {
// 設定步進值
let step = target - alpha > 0 ? 1 : -1
times = setInterval(function () {
// 增加臨時透明度的值
alpha += step;
//判斷當前透明度等于透明度時，停止定時器
if (alpha == target) {
clearInterval(times);
}
// 設定給圖片
imgObj.style.opacity = alpha / 100;
}, 30)
}轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/298966.html
標籤：其他
上一篇：14 JS運算子二
下一篇：手把手教你寫自動化路由