在BG中平移Panaroma图片

我正在为一家餐厅制作网站。业主们拍摄了内部的全景照片，并希望通过该网站的BG panning/skimming over the panaroma。所以基本上panaroma将是BG，并且需要在图像上旋转或平移。这可能吗？我在想也许会用某种会改变图像在慢动作中的位置的jQuery，但并不是每个jQuery都能够提供所需的代码。我差点诉诸animate.css，但我至少需要IE8以上的浏览器兼容性。在BG中平移Panaroma图片

在此先感谢。 :)

来源

2012-10-25 Airman

这是可能的，只是改变在计时器循环的CSS背景位置。 –

谢谢@Diodeus！代码看起来像什么？ – Airman

为什么不给他们比视觉动画想象的更好的东西。有几个插件可供选择 - 我喜欢[这一个]（http://stephband.info/jparallax/index.html）。在准备图层时有一些工作，但值得付出努力。 –

这里的，穷人的版本：

.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)

来源

2012-10-25 20:08:32

哇，作品魅力！还有两个问题，有什么办法可以让它循环并使其成为滚动条，因为宽度会超过浏览器宽度？我修改了一些代码并且喜欢它：http://jsfiddle.net/neMb8/2/ – Airman

将滑块包含在溢出的DIV中：hidden。你必须从这个例子中找出你自己的代码。 –

谢谢@diodeus，所以它不可能循环它？ – Airman

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

也许IE8的非画布回退将是一个选项，例如通过改变左上角和左侧CSS属性来移动相对定位的图像？

来源

2012-10-25 20:04:25 Rik

谢谢。这绝对是一种选择。也许我没有很好地解释自己，但我的意思是泛像这样...说图像是x到y很长，我希望它从y或x开始，直接移动到水平图像的另一端像x ----- y这样的行。希望这是有道理的。 :) – Airman

在BG中平移Panaroma图片

回答

相关问题