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

已经有JavaScript和jQuery工具可以帮助您实现这一目标：

Answer 2

不是在代码之外执行计算（533px宽度* 26幻灯片= 13858px），为什么不将这些魔术数字变成变量：

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块的需要，正确命名的变量使逻辑清晰。

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

$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

Answer 3

你应该对背景位置数量更加动态，这样你就不会猜测数字的工作情况。此外，如果您将if块留在图像的整个宽度，您将获得一个白色屏幕，因为无论if块如何，该函数都会再运行一次。从结束背景位置减去宽度以避免：

// With curr_pos like this, you have a number generated from JavaScript rather than guesswork
var curr_pos = parseInt($("#image_box").css("background-position").slice(0,-2), 10); 

if (curr_pos <= (-13858+533)) { //Take out that nasty white space by accounting for one less frame
    curr_pos = 0+"px";
} else {
    curr_pos = curr_pos - 533 + "px";
}

此外，既然你正在使用jQuery，你也可以利用它的选择器的力量。以下代码使用jQuery而不是直接在标记中添加事件处理程序。您的点击功能已合并：

$("#image_box").hover(function() {
    timer_id = setInterval(rotate_img, 200);
}, function() {
    clearInterval(timer_id);
}).click(function() {
    $(this).css(/*change background stuff*/);  
}); // This settles your click idea

这使您的标记看起来像这样：

<div id='image_box'></div>

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

3 个答案:

A jsFiddle一切