Question

我有一个在线阅读漫画的网站。

阅读页面的HTML是：

<div id="listimages">
<img src="abc1.jpg" id="image1" />
<img src="abc2.jpg" id="image2" />
<img src="abc3.jpg" id="image3" />
<img src="abc4.jpg" id="image4" />
</div>

我想要将图像的id滚动到。我正在查看img abc2.jpg时的示例我想要获取它的元素ID是＃image2。

idnow = idnow_getted

请帮助我，谢谢大家！

Answer 1

您可以比较窗口的scrolltop和图像的顶部位置，以获取滚动到的图像的ID。

对于前，

$(window).scroll(function() {

var winTop = $(this).scrollTop();
var $imgs = $('img');

$.each($imgs, function(item) {
    if($(item).position().top <= winTop)
         //get id here

});
});

Answer 2

可能有两种情况，您想要图像ID并进行进一步处理，

第一种情况您希望在滚动窗口上执行某些操作。在这种情况下，只需在scroll事件上添加一个处理程序。

$(window).scroll(function() {

    var windowTop = $(this).scrollTop(),
        image = $('#listimages').find('img').filter(function(){
            return $(this).offset().top < windowTop+100;
           //i am adding 100 in windowTop as we can consider the the image as cuurent image even if it is little bit below than top of window.
        });


            //now you can directly use image if you want to manipulate it.
            //if you want id you can get it by
          var id=image[0].id //or image.attr('id'); 

    });

第二种情况，如果您想对触发任何事件执行某些操作。

function currentImg(){
            var windowTop = $(this).scrollTop(),
            image = $('#listimages').find('img').filter(function(){
                return $(this).offset().top < windowTop+100;
             });
           return image[0].id;

}

但是请记住添加滚动，鼠标移动等事件会更频繁地执行，所以建议他们在你需要它之前不要使用太多东西。

Answer 3

只需尝试使用以下内容

JavaScript和jQuery Part：

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#listimages img').mouseover(function() {
   alert(this.id);
});
});
</script>

HTML部分：

<div id="listimages">
<img src="abc1.jpg" id="image1" />
<img src="abc2.jpg" id="image2" />
<img src="abc3.jpg" id="image3" />
<img src="abc4.jpg" id="image4" />
</div>

我认为这可以帮助您解决问题。

滚动到它时获取元素ID

3 个答案: