当滚动到它时获取元素id

get element id when scroll to it

本文关键字：获取 元素 id 滚动      更新时间：2023-09-26

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

读取页面的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

请帮助我，谢谢大家!

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

例如

$(window).scroll(function() {
var winTop = $(this).scrollTop();
var $imgs = $('img');
$.each($imgs, function(item) {
    if($(item).position().top <= winTop)
         //get id here
});
});

可能有两种情况，您需要图像的id并进行进一步处理，

第一个场景你想在滚动窗口时执行一些操作。在本例中，只需为滚动事件添加一个处理程序。

$(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;
}

但是请记住，添加像scroll,mousemove这样的事件执行得更频繁，所以建议不要使用太多，直到你非常需要它。

试试用以下,

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 Part:

<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>

我想这也许能帮助你解决你的问题。

相关文章：