jquery 滚动到元素时获取元素ID

deyfvvtc  于 2023-01-08  发布在  jQuery
关注(0)|答案(3)|浏览(180)

我有一个网上看漫画的网站。
阅读页面的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

请帮帮我,谢谢大家!

dy1byipe

dy1byipe1#

可能有两种情况,您想要图像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这样的事件会更频繁地执行,所以建议它们不要使用太多,直到你非常需要它。

c3frrgcw

c3frrgcw2#

请尝试以下操作,
JavaScript和jQuery部件:

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

我想这可能会帮助你解决你的问题。

bjp0bcyl

bjp0bcyl3#

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

$(window).scroll(function() {

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

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

});
});

相关问题