<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script> <style> .box{ margin: auto; width: 65px; height: 65px; background-color: chartreuse; background: url('./img/movelogo.jpg') no-repeat; background-position: 0px; position: relative; } .sbox{ width: 65px; height: 65px; position: absolute; top: 0px; left: 0px; background: url('./img/movee1.png') no-repeat; z-index: 999; } </style> </head> <body> <div> <div class="box"> <div class="sbox"></div> </div> </div> </body> <script> // $(".box").mouseover( // function(){ // console.log(22) // var count=0; // setInterval(function(){ // count++; // if(count>26){ // count=0; // }else{ // $(".box").css('background-position', -65*count + 'px 0px'); // } // },6000) // }) var timer; var timers; var count=0; var counts=0; timer=setInterval(move,600) timers=setInterval(movee,600) var move=function(){ count+=65; if(count>1625){ count=0; } else{ $(".box").css('background-position', -count + 'px 0px'); } } var movee=function(){ counts+=65; if(counts>2665){ counts=0; } else{ $(".sbox").css('background-position', -counts + 'px 0px'); } } // 移上 $(".box").on("mouseover",function(){ timer=setInterval(move,600) timers=setInterval(movee,600) }) // 移出 $(".box").on("mouseout",function(){ count=0; counts=0; clearInterval(timer); clearInterval(timers); }) </script> </html>
当需要两个帧数动画同时开始，使用了定位在同一div显示，一个图层为透明图层文件可谓png格式，另一图层为jpg或者其他格式，每次移上之后需要个count重新赋值，开启新的定时器。
参考代码以上！！！！