Javascript 停止通过容器边缘设置div动画

我一直在涉猎javascript图像平移器，我已经从这里的代码中对其进行了黑客攻击和切碎。。。我现在已经放弃了这一点，选择了一种更简单的方法，但我需要一些关于如何做的建议

我有左右按钮的代码

<div id="wrap">

<div class="entrance-hall pan-image">


</div>
</div>

<input type="button" value="Move Left" class="nav-left" onclick="pan_animate('-=20%')"  />
<input type="button" value="Move Right" class="nav-right"  onclick="pan_animate('+=20%')" />

它在包装分区内向左或向右平移图像20%，但我想

使其平滑滚动，而不是以百分比的增量滚动

停止越过左右容器的边缘

从图像的中心开始

不要求太多，嗯？希望这是有意义的，有人可以帮助

干杯

添加css

#wrap {
margin-bottom:60px;
border:4px solid white;
overflow:hidden;
}


 .pan-image {
position:relative;
width:2106px; 
height:395px;
left:50%;
margin-left:-1053px;
 }

 /* -- ===entrance hall=== -- */

.entrance-hall { 
background:url(/staging/kennawayhouse.org.uk/images/1-entrance-hall.jpg);
}

• 使其平滑滚动，而不是以百分比的增量滚动

实现这一点的一种方法是简单地使用

easing

函数。从jQuery动画api：

缓和

.animate（）的其余参数是一个字符串，用于命名要使用的函数。缓和函数指定动画在动画中不同点的进展速度。jQuery库中唯一的实现是默认的，称为swing，以及一个以恒定速度进行的，称为linear的实现。插件的使用提供了更多的简化功能，最显著的是jQueryUI套件

然后，您的代码可以更改为：

function pan_animate(px) {
    $('.pan-image').animate({'marginLeft' : px}, 'linear'); // Swing and Linear comes in jQuery, but swing is the default value.
}

而一些平滑将被感知

• 停止越过左右容器的边缘

这个需要一些

css

hack，但是

position:absolute；左：5倍；顶部：5px

可以解决您关于内部元素的问题。如果你想得到比may更准确的答案，你可以发布你的css代码

编辑

基于您的css代码，我实现了一个功能，在移动时，如果您的边距超出了其父边距的限制，则会发出警报：

function pan_animate(px) {
    
    $marginLeftCss = $(".pan-image").css("marginLeft").replace(/[^-\d\.]/g, '');
    $n = px.replace(/[^-\d\.]/g, '');
    $x = (px.indexOf("-")==0) ? 1 - ($n/100):($n/100);
    
    $marginLeft = $marginLeftCss * $x;
    
    $width = $(".pan-image").width();
    $width += $(".pan-image").parent().width();
    
    if($marginLeft > - $width && $marginLeft < $width) //4212 = width*2
        $('.pan-image').animate({'marginLeft' : px}, 'linear');
    else
        alert("pan image reached it\'s end "  + $marginLeft);
}

---

同样，根据您的编码，上面回答的条件可能不起作用。

好的，我刚刚添加了您的代码，但它不起作用。它似乎破坏了代码，所以我觉得我做错了什么。。。我在HTML中为背景图像添加了css和类@布鲁诺是的，我也错过了！好的，它现在起作用了，但我想我现在可能认为我的问题有点错了。我在想，如果你按住按钮，它会一直滚动到发布，但现在肯定没问题！！此外，我还解决了上述css在.pan图像上的居中问题。尽管如此，我无法阻止它越过端点@所以，每次调整大小时，div都会偏离中心。这是一个更好的方法：位置：相对；宽度：2106px；身高：395px；左边距：自动；右边距：自动；检查这把小提琴：正在停止动画，给我一分钟

function pan_animate(px) {
    
    $marginLeftCss = $(".pan-image").css("marginLeft").replace(/[^-\d\.]/g, '');
    $n = px.replace(/[^-\d\.]/g, '');
    $x = (px.indexOf("-")==0) ? 1 - ($n/100):($n/100);
    
    $marginLeft = $marginLeftCss * $x;
    
    $width = $(".pan-image").width();
    $width += $(".pan-image").parent().width();
    
    if($marginLeft > - $width && $marginLeft < $width) //4212 = width*2
        $('.pan-image').animate({'marginLeft' : px}, 'linear');
    else
        alert("pan image reached it\'s end "  + $marginLeft);
}

$parentHeight = $(".pan-image").parent().height();
$parentWidth = $(".pan-image").parent().width();

$panImageHeight = $(".pan-image").height();
$panImageWidth = $(".pan-image").width();

$(".pan-image").css('position','absolute','top',($parentHeight - $panImageHeight)/2 + 'px', 'left',($parentWidth - $panImageWidth)/2+'px');