京东logo之gif图

最新推荐文章于 2024-01-12 09:36:39 发布

DanmoSAMA

最新推荐文章于 2024-01-12 09:36:39 发布

阅读量1.1k

点赞数

分类专栏：前端练手

本文链接：https://blog.csdn.net/m0_51235736/article/details/114107545

版权

前端练手专栏收录该内容

17 篇文章

订阅专栏

博客记录了HTML和CSS开发中遇到的问题及解决办法。一是gif图片只循环一次，尝试清除缓存失败后让其无限循环；二是鼠标快速hover图片时因定时器叠加不到5s一直闪，修改了JS代码，目前未加过渡效果和文字。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML：

   <div class="logo">
       <a href="javascript:;">
       </a>
   </div>

CSS：

.logo a{
    display: block;
    width: 190px;
    height: 120px;
    background-image: url(../img/header/sprite.png);
    position: absolute;
    top: 10px;
}
.logo .to-gif{
    background-image: url(../img/gif/1.gif);
    background-size: 114px 96px;
    background-position: center;
    background-repeat: no-repeat;
}

首先遇到的问题是，gif图片只循环一次，而我尝试了几种清除缓存的方式都失败了，最后选择让gif图片无限循环。

参考博客：https://www.jianshu.com/p/6e9e4a95850f

然后又遇到一个问题：用鼠标快速hover图片时，由于setTimeout定时器的不断叠加，不到5s就会一直闪，修改JS代码如下：

    //刷新gif图片
    let logo = document.getElementsByClassName("logo")[0].getElementsByTagName("a")[0];
    let check = false;	//只有执行完上一个定时器，切换回静态图，再hover才有效
    logo.onmouseover = function(){
        if(check == false){
            logo.className = "to-gif";
            check = true;
            timer3 = setTimeout(() => {
                logo.className = "";
                check = false;
            }, 5200);
        }
    }