一.具体步骤:
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 () {//移入时,透明度变为100strat(100);}// 给图片绑定移出事件imgObj.onmouseout = function () {//移出时,变为半透明度为30strat(30);}
3-3.设置临时透明度和定时器
// 设置临时透明度let alpha = 30;// 设置定时器let times = '';
3-4声明一个函数用于改变透明度
function strat(target) {// 设置步进值let step = target - alpha > 0 ? 1 : -1times = setInterval(function () {// 增加临时透明度的值alpha += step;//判断当前透明度等于透明度时,停止定时器if (alpha == target) {clearInterval(times);}// 设置给图片imgObj.style.opacity = alpha / 100;}, 30)}