jquery - 在 BG 中平移 Panaroma 图片

Question

我正在为一家餐馆做一个网站。业主拍了一张内部的全景照片，并希望它在网站的 BG 平移/浏览全景图上。所以基本上 panaroma 将是 BG 并且需要在图像上旋转或平移。这可能吗？我在想也许可以使用某种 jQuery 来改变图像在慢动作中的位置或其他东西，但并不是每个 jQuery 都足以提供所需的代码。我几乎求助于 animate.css 但我至少需要 IE8 及更高版本的浏览器兼容性。

提前致谢。:)

Answer 1

这是穷人的版本：

​.slide {
 height:160px;
 width:50px;
 background-position:160px 0;    
 background-image:url(http://i.imgur.com/vdDQgb.jpg)  
}

HTML：

<div class="slide"></div>
<div id="num"></div>

JS：

var limit = 60;
var start = 120;    
var moveBy = 1;    
var timer1 = setInterval(function() {  
    $('#num').text(start);
    $('.slide').css('background-position',start+'px 0') ;
    start--;
    if(start<0) {
       alert("done"); 
       clearTimeout(timer1);
    }    
},50) 

Answer 2

为了让它在现代浏览器中流畅地平移，你真的应该看看画布，因为它支持“半”像素。我知道这在 IE8 中不起作用，但跳跃整个像素和在它们之间插值之间的差异是巨大的。请参阅http://www.willmcgugan.com/blog/tech/2011/2/26/ken-burns-effect-with-javascript-and-canvas/了解画布中 ken Burns 效果的一些示例 javascript (jQuery)。

也许 IE8 的非画布后备将是一个选项，例如通过更改顶部和左侧 css 属性来移动相对定位的图像？