Question

var positioner=0;
var ames=setInterval(animate, 100);
function animate(){
if(positioner < 1536){
document.getElementsByTagName('img')[0].style.backgroundPosition='-'+positioner+'px';positioner += 256;}
else{document.getElementsByTagName('img')[0].style.backgroundPosition='-'+positioner+'px'; positioner=0;}
}

img { 
    background-image: url('https://cdn-images-1.medium.com/max/1600/1*WhDjw8GiV5o0flBXM4LXEw.png');
    background-repeat: no-repeat;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<img width="256px" height="256px" onmouseover=""/>
<h1>The background-position Property</h1>
<p>Here, the background image will be positioned in the center of the element (in this case, the body element).</p>
</html>

那是我的代码，我想问的是：

为什么图像不平滑？我说动画就像每隔几秒钟刷新一次
如何在MouseOver（onMouseOver）上移动图像？

Answer 1

您只需要更改条件，因为定位器位于图像的空白部分。现在，在显示空零件之前，定位器变为0。如果您不想让gif闪烁，则需要设置positioner <= length of image。

var positioner=0;
var ames=setInterval(animate, 100);
function animate(){
if(positioner <= 1000){
document.getElementsByTagName('img')[0].style.backgroundPosition='-'+positioner+'px';positioner += 256;}
else{document.getElementsByTagName('img')[0].style.backgroundPosition='-'+positioner+'px'; positioner=0;}
}

img { 
    background-image: url('https://cdn-images-1.medium.com/max/1600/1*WhDjw8GiV5o0flBXM4LXEw.png');
    background-repeat: no-repeat;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<img width="256px" height="256px" onmouseover=""/>
<h1>The background-position Property</h1>
<p>Here, the background image will be positioned in the center of the element (in this case, the body element).</p>
</html>

Answer 2

通过放慢速度，很明显，最后显示的是空白帧。如果您在渲染每个循环后更改代码以评估positioner是否超过最大值，那么它将为您解决。

var positioner=0;
var ames=setInterval(animate, 100);
function animate(){
  document.getElementsByTagName('img')[0].style.backgroundPosition='-'+positioner+'px';
  positioner += 256;
  if(positioner >= 1536) positioner = 0
}

img { 
    background-image: url('https://cdn-images-1.medium.com/max/1600/1*WhDjw8GiV5o0flBXM4LXEw.png');
    background-repeat: no-repeat;
}

<img width="256px" height="256px" onmouseover=""/>
<h1>The background-position Property</h1>
<p>Here, the background image will be positioned in the center of the element (in this case, the body element).</p>

Answer 3

注意：第一个问题的答案是-动画设置为100，但动画结束/开始时的位置为1536，将其更改为{ {1}}。

第二个问题-试试这个：

<img onmouseout="animate(this)" onmouseout="dontAnimate(this)" src="smiley.gif" alt="Smiley">

Javascript动画不流畅吗？

3 个答案: