0

我一直在涉足一个 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%')" />

这适用于javascript。

function pan_animate(px) {
$('.pan-image').animate({
    'marginLeft' : px
});
}

它在包装 div 内将图像向左或向右平移 20% 但是我想...

  1. 使其平滑滚动，而不是按百分比递增
  2. 停止越过左右容器的边缘
  3. 从图像的中心开始。

要求不高吧？希望这是有道理的，有人可以提供帮助！

干杯。

添加了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);
}
4

1 回答 1

0
  • 使其平滑滚动，而不是按百分比递增

实现这一点的一种方法是简单地使用easing函数。来自 jQuery 动画 API：

缓和

.animate() 的剩余参数是一个字符串，用于命名要使用的缓动函数。缓动函数指定动画在动画中不同点的进展速度。jQuery 库中唯一的缓动实现是默认的，称为摇摆，以及以恒定速度进行的一种，称为线性。使用插件可以使用更多的缓动功能，尤其是 jQuery UI 套件。

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

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

并且会感觉到一些平滑。

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

这个需要一些css技巧，但position:absolute;left:5x;top:5px 可能会解决您关于内部元素的问题。如果您想要一个比可能更准确的答案，您可以发布您的 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);
}

你可以检查一下小提琴：http: //jsfiddle.net/brunovieira/3wHn3/7/

  • 从图像的中心开始。

为了使您的$(".pan-image")元素居中，您可以使用两种方法，一种 css 方法：position:relative;margin-left:auto;margin-right:auto，或者，如果不能选择相对位置，您可以使用 jQuery 将您的元素居中，例如：

$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');

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

于 2012-10-30T15:52:15.317 回答