1

我是一名摄影师而不是代码专家，但我已经尝试了一段时间来完成这项工作——它是一个动画图像，可以实现 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 以便在单击图像时，背景图像被另一个替换并像上面一样动画？那会在我的代码中去哪里？

谢谢！

4

3 回答 3

1

已经有 JavaScript 和 jQuery 工具可以帮助您完成此任务：

于 2013-04-26T01:48:30.410 回答
1

与其在代码之外执行计算（533px width * 26 slides = 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另一个小的变化，而不是通过/将悬停事件直接附加到 html onmouseout，您可以使用 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

于 2013-04-26T02:25:53.180 回答
0

您应该对背景位置数量更具动态性，这样您就不会对数字进行猜测。此外，如果您将 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>

一个jsFiddle一切

于 2013-04-26T01:49:50.000 回答