Question

我所拥有的是这样的长矩形图像 http://www.openstudio.fr/jquery-virtual-tour/img/sculpteur.jpg

和3个按钮，将图像向左，向右移动并暂停..就像这里可以看到的一样。我正在尝试重新创建这个虚拟之旅 http://www.openstudio.fr/jquery-virtual-tour/

这是我的Html内容

<div class="pan" style="margin-left:-500px">
    <img src="sculpteur.jpg" />
</div>

<button class="right"> --) </button>   // move to right  >>
<button class="left"> (-- </button>    // move to left   <<
<button class="pause">||</button>      // pause          X

这是Javascript文件。单击右键后的代码

$(document).ready(function() {
    $a=parseInt($('.pan').css('marginLeft'));

    $(".right").click(function(){
        $('.pan').stop();
        $direction = "right";
        movePanorama($direction,$('.pan'), $a);
    });
    ... ...   
});


function movePanorama($direction, $e, $a){
    if($direction=="right"){
        $e.animate({marginLeft:$a--}, 1, function(){
            movePanorama($direction,$e, $a);
        });
    }

    .......
}

我的问题在于，每当我点击左或右按钮时，它将再次以-500px边距重新开始然后移动，这与虚拟游览示例不同，它应该只是照片的平滑流动，它在哪里停止是它将继续的地方。

我尝试的是在jquery中使用.after函数插入包装照片的div，如下所示..其中.start和.end是包围图像的div的类名。通过这个我认为我可以在以后控制保证金的价值。

$(".start").after("<div class=\"pan\" style=\"margin-left:-500px\">");
$(".end").before("</div>");

此代码不起作用，它没有包装照片。

那么，有没有人有关于如何使这个左边距动态的想法或建议？

如何使图像的边缘动态化

0 个答案: