Question

我正在显示div内部的图像到html页面上的垂直滚动条。如何确定当前显示的图像。

我的div是这样的：

<div id="mainPlayer" class="imgcontainer scrcontentsection">
    <img id="1" src="http://sukhiimg.net/potrait/p1.png" class="cls"  width="653" height="600" alt="1" /><br />
    <img id="2" src="http://sukhiimg.net/potrait/p2.png" class="cls"  width="653" height="600" alt="2" />
    <img id="3" src="http://sukhiimg.net/potrait/p3.png" class="cls" width="653" height="600" alt="3" /><br />
    <img id="4" src="http://sukhiimg.net/potrait/p4.png" class="cls"  width="653" height="600" alt="Sample picture for scroll box: Franz Josef Glacier, New Zealand" />
</div>

我的CSS是这样的：

scrcontentsection {
    max-height:528px;
    overflow-y:auto;
    overflow-x:auto;
    max-width:653px;
}
.imgcontainer{
    height:600px;
    width:auto;
}
.option2{
    min-height:531px !important; 
    height:auto !important;
}

其中有多个图像正在垂直图像滚动条上显示，问题是如何确定当前在滚动条上显示的图像。如果用户可以在文本框中输入图像no（如1,2,3，...）并且他想跳转到特定图像，我怎样才能在滚动区域显示特定图像..

Answer 1

你可以通过使用jQuery和一些数学来实现这一目标。您需要使用滚动元素上的scroll（）函数来检测滚动是否已发生。在其中，您想要检测滚动位置。如果您将滚动位置除以图像的高度，并向上舍入到下一个整数，它将为您提供一个可用于查看当前图像的数字。这是我使用的jquery：

 $('#mainPlayer').scroll(function (event) {
    var imageHeight = 200;
    var imageNumber = Math.ceil($('#mainPlayer').scrollTop() / imageHeight);
    $('#updateImageNumber').text(imageNumber);
});

我也在一个jsfiddle中设置它，这样你就可以看到我所做的一切。我移动了一点css，所以你可以看到我做得更好一点。希望这会有所帮助。

http://jsfiddle.net/bradschvan/tft5s6y0/1/

确定当前在垂直图像查看器上显示的图像

1 个答案: