Question

我一直在使用一个javascript图像panner，我已经从这里的代码一起攻击并切碎了...我现在已经放弃了这个更简单的方法，但需要有关如何做一些事情的建议。

我有左右按钮的代码。

<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％的图像，但我想......

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

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

干杯。

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);
}

Answer 1

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

实现此目的的一种方法是使用easing函数。来自jQuery animate api：

缓解

.animate（）的剩余参数是一个命名要使用的缓动函数的字符串。缓动函数指定动画在动画中的不同点处进行的速度。 jQuery库中唯一的缓动实现是默认的，称为swing，以及一个以恒定速度进行的实现，称为线性。使用插件可以获得更多的缓动功能，尤其是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 one：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');

同样，根据您的编码，上述条件可能无效。

停止div动画过去的容器边缘

1 个答案: