B站客户端下载动画效果实现

    xiaoxiao2021-03-25  102

    在B站看到一个挺有意思的动画效果 效果挺不错,过程也比较简单,所以想亲自动手实现一下这个效果

    首先,讲这个图片从控制台获取url下载下来 看到它是由16个80*80像素的图片拼接起来的,所以这里的动画效果是用了背景图片定位的方法,通过js实现鼠标移入和移出事件绑定相应的函数

    我们在页面建立一个div大小为80*80像素

    <div class="img" id="ii"></div> .img { background-image: url('pp.png'); width: 80px; height: 80px; }

    然后写我们的js代码

    //创建对象 var move = { elem: document.getElementById("ii"), //获取元素 position: 0, //保存背景图片当前的坐标 timeOver: null, //用于储存setTimeout,以便使用clearTimeout来清除动画队列 timeOut: null, po: "px 0px", mouseOver: function () { clearTimeout(move.timeOut); //鼠标移入后清除鼠标移出的动画 if (move.position > -1200) { //判断是否到达终点 move.position -= 80; //每次移动80px move.elem.style.backgroundPosition = move.position + move.po; //背景图片定位 move.timeOver = setTimeout("move.mouseOver()", 100); //每0.1秒移动一次,递归调用 } else { clearTimeout(move.timeOver); //到达终点时停止动画 } }, mouseOut: function () { clearTimeout(move.timeOver); if (move.position < 0) { move.position += 80; move.elem.style.backgroundPosition = move.position + move.po; move.timeOut = setTimeout("move.mouseOut()", 100); } else { clearTimeout(move.timeOut); } } }; //绑定相应事件的相应函数 move.elem.addEventListener("mouseover", move.mouseOver, false); move.elem.addEventListener("mouseout", move.mouseOut, false);
    转载请注明原文地址: https://ju.6miu.com/read-35241.html

    最新回复(0)