原生js实现悬浮播放图片帧动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：原生js实现悬浮播放图片帧动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>原生Javascript播放图片序列帧动画</title>
</head>

<body>

    <style>
        .box{text-align: center;}
        .box>*{display: inline-block;}
        .hv-image-play{background-size: 100%;}
    </style>原生Javascript播放图片序列帧动画

    <h2 style="text-align: center;">
        示例 (把鼠标移动到图标上面)
    </h2>
    <style>
        .box{text-align: center;}
                .box>*{display: inline-block;}
                .hv-image-play{background-size: 100%;}
    </style>
    <div class="box" style="margin-top:2rem;">
        
        <div class="hv-image-play" style="width: 64px; height: 64px; background-image: url(//repo.bfw.wiki/bfwrepo/images/effect/611e2b5ae2a28.png&quot;); background-position-y: 0px;" keyframes="//repo.bfw.wiki/bfwrepo/images/effect/611e2b5ae2a28.png"></div>
        <div class="hv-image-play" style="width: 64px; height: 64px; background-image: url(//repo.bfw.wiki/bfwrepo/images/effect/611e2b5b36ac3.png&quot;); background-position-y: 0px;" keyframes="//repo.bfw.wiki/bfwrepo/images/effect/611e2b5b36ac3.png"></div>
        <div class="hv-image-play" style="width: 64px; height: 64px; background-image: url(//repo.bfw.wiki/bfwrepo/images/effect/611e2b5b5d4ca.png&quot;); background-position-y: 0px;" keyframes="//repo.bfw.wiki/bfwrepo/images/effect/611e2b5b5d4ca.png"></div>
        <div class="hv-image-play" style="width: 64px; height: 64px; background-image: url(//repo.bfw.wiki/bfwrepo/images/effect/611e2b5ba3ad6.png&quot;); background-position-y: 0px;" keyframes="//repo.bfw.wiki/bfwrepo/images/effect/611e2b5ba3ad6.png"></div>
        <div class="hv-image-play" style="width: 64px; height: 64px; background-image: url(//repo.bfw.wiki/bfwrepo/images/effect/611e2b5beb259.png&quot;); background-position-y: 0px;" keyframes="//repo.bfw.wiki/bfwrepo/images/effect/611e2b5beb259.png"></div>
        <div class="hv-image-play" style="width: 64px; height: 64px; background-image: url(//repo.bfw.wiki/bfwrepo/images/effect/611e2b5c45562.png&quot;); background-position-y: 0px;" keyframes="//repo.bfw.wiki/bfwrepo/images/effect/611e2b5c45562.png"></div>
        <div class="hv-image-play" style="width: 64px; height: 64px; background-image: url(//repo.bfw.wiki/bfwrepo/images/effect/611e2b5c8fcd2.png&quot;); background-position-y: 0px;" keyframes="//repo.bfw.wiki/bfwrepo/images/effect/611e2b5c8fcd2.png"></div>
        <div class="hv-image-play" style="width: 64px; height: 64px; background-image: url(//repo.bfw.wiki/bfwrepo/images/effect/611e2b5cd2cbb.png&quot;); background-position-y: 0px;" keyframes="//repo.bfw.wiki/bfwrepo/images/effect/611e2b5cd2cbb.png"></div>
        <div style="text-align: center;font-size:12px;">
            <div class="hv-image-play" id="uu" fps="8" loop="true" autoplay="" style="display: inline-block; width: 64px; height: 64px; background-size: 400%; background-position: -192px -260px; background-image: url(//repo.bfw.wiki/bfwrepo/images/effect/b6f871ca49767cf719ab44cd232d52e9.jpg&quot;);"
                keyframes="//repo.bfw.wiki/bfwrepo/images/effect/b6f871ca49767cf719ab44cd232d52e9.jpg"></div><br> 点击可以换姿势
        </div>
    </div>

    <p style="text-align: center;">
        以上图片来自阿里云及其他网络。
    </p>


    <script>
        (function(){
            function _playAni(opts,noloop){
                var reverse = opts.reverse;
                var isX = opts.x;
                var el = opts.el;
                opts.index = opts.index || 0;
                clearTimeout(opts.timer);
                var fps = opts.fps || 40;
                var speed = 1000 / parseFloat(fps);


                function _play(){
                    var offsetY =  isX ? 0 : 0 - opts.index * opts.step;
                    var offsetX = isX ? 0 - opts.index * opts.step : 0;
                    if(isX){
                        el.style.backgroundPositionX = offsetX + 'px ';
                    }else{
                        
                        el.style.backgroundPositionY = offsetY + 'px ';
                    }

                    if( (opts.ind.........完整代码请登录后点击上方下载按钮下载查看