Question

我正在为一家餐馆建立一个网站。业主拍摄了内部的全景照片，并希望它在场地的BG平移/浏览panaroma。因此，基本上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

为了让它在现代浏览器中平滑而平滑，你真的应该看一下画布，因为它支持'half'像素。我知道这在IE8中不起作用，但跳跃整个像素和插入它们之间的差异是巨大的。有关ken burns效果的一些示例javascript（jQuery），请参阅http://www.willmcgugan.com/blog/tech/2011/2/26/ken-burns-effect-with-javascript-and-canvas/。

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

在BG中平移全景图片

2 个答案: