javascript - JQuery——有没有办法解决这个问题？

Question

我是一名摄影师，而不是代码专家，但我已经尝试了一段时间来完成这项工作——它是一个动画图像，可以达到 GIF 的效果，不受 256 色和像素化/噪声的限制随之而来。它通过在固定的 div 内翻译背景图像来工作。Javascript 位于下方，可以在此处找到它处理我的一张图片的方式 http://jsfiddle.net/MXWgZ/

HTML:

<div id='image_box' onmouseover='start_rotate();' onmouseout='stop_rotate();'></div>

CSS

#image_box {
margin-left:20px;
width:533px;
height:800px;
background-image:url('http://www.studioprivate.co.uk/droguslong2.jpg');
background-repeat:no-repeat;
background-position:0px;}

JavaScript:

var curr_pos = 0; //current background-position
var timer_id = 0;

function rotate_img() {
if (curr_pos == -13858) curr_pos = 0; //if 360 degree done
else curr_pos = curr_pos - 533;
$("#image_box").css("background-position", curr_pos + "px"); //move bacground to the left by 533px
if (curr_pos == -13858) curr_pos = 0;}

function start_rotate() {
timer_id = setInterval(rotate_img, 80);}
function stop_rotate() {
clearInterval(timer_id);}

现在，它工作正常，除了当它到达结尾时，它似乎会在一瞬间显示白色背景，而不是直接跳到开头。有没有办法摆脱这个？我觉得它扰乱了流程。

另一个问题是——我可以添加另一个 onclick 事件，以便在单击图像时，背景图像被替换为另一个图像并像上面那样动画吗？它会在我的代码中放在哪里？

谢谢!

Answer 1

与其在代码之外执行计算(533px 宽度 * 26 张幻灯片 = 13858px)，不如将这些魔数(Magic Number)转换为变量:

function nextSlide() {
  var slideWidth = 533;
  var slideCount = 26;

  var currentX = parseInt($imageContainer.css('background-position'), 10);
  currentX = (currentX - slideWidth) % (slideWidth * slideCount);

  $imageContainer.css('background-position', currentX);
}

mod (%) 运算符消除了对混淆的 if/else block 的需要，正确命名的变量使逻辑清晰。

另一个小改动，您可以使用 jQuery 事件绑定(bind)，而不是通过 onmouseover/onmouseout 将您的悬停事件直接附加到 html:

$imageContainer.hover(start_rotate, stop_rotate);

您可以类似地附加点击事件来更改图像:

$imageContainer.click(function() {
  $imageContainer.css('background-image',
      'url("http://www.studioprivate.co.uk/newImage.jpg")');
  $imageContainer.css('background-position', 0);    
});

如果新图像具有不同的 slideWidth 或 slideCount，则您必须对 nextSlide 方法进行一些调整，但这个示例应该可以帮助您。

将它们整合在一起 - jsFiddle