2022-05-08 设置透明度实现鼠标在元素上的淡入淡出效果

前端OnTheRun

已于 2022-05-19 23:21:36 修改

阅读量303

点赞数

分类专栏：项目与应用文章标签： js dom 透明度

于 2022-05-08 19:04:48 首次发布

本文链接：https://blog.csdn.net/rowlet/article/details/124652634

版权

本文介绍了如何通过JavaScript和DOM操作实现鼠标移入元素时增加透明度，移出时减少透明度的效果。文章重点在于封装了一个startMove函数，并探讨了如何扩展到多个元素的淡入淡出以及结合宽度变化的应用。

摘要由CSDN通过智能技术生成

文章目录

要点

鼠标移入,透明度opacity的值增加
鼠标移出,透明度opacity的值减小
需要封装一个函数startMove来达到这个效果
判定:

透明度的目标值:target
透明度的当前值:alpha
若target>alpha则alpha++,并把值赋给opacity
若target<alpha则alpha--,并把值赋给opacity
若target==alpha则清除定时器

代码

var box = document.querySelector(".box");
box.onmouseover = function() {
   
    startMove(100);
};
box.onmouseout = function() {
   
    startMove(30);
};
var alpha = 30;//当前值
var timer = null;//定时器
function startMove(target) {
   
    var speed = target - alpha > 0 ? 1 : -1;
    clearInterval(timer);
    timer = setInterval(function() {
   
        if (alpha == target) {
   
            clearInterval(timer);
        } else {