1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > js实现图片的透明度运动

js实现图片的透明度运动

时间:2023-09-05 05:02:31

相关推荐

js实现图片的透明度运动

一.具体步骤:

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)}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。