js的帧动画
2021-02-17 04:17
标签:pos mouse var class int script 需要 其他 tin 当需要两个帧数动画同时开始,使用了定位在同一div显示,一个图层为透明图层文件可谓png格式,另一图层为jpg或者其他格式,每次移上之后需要个count重新赋值,开启新的定时器。 参考代码以上!!!! js的帧动画 标签:pos mouse var class int script 需要 其他 tin 原文地址:https://www.cnblogs.com/hudunyu/p/12960248.htmlDOCTYPE html>
html lang="en">
head>
meta charset="UTF-8">
meta name="viewport" content="width=device-width, initial-scale=1.0">
title>Documenttitle>
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>
上一篇:https 相关概念
下一篇:Node js获取本地ip地址