получить идентификатор элемента при прокрутке к нему

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> 

Я хочу, чтобы получить идентификатор образа, который прокручивается в. Пример, когда я просматриваю img abc2.jpg Я хочу получить идентификатор элемента, это # ​​image2.

idnow = idnow_getted 

Пожалуйста, помогите мне, спасибо всем!

Answer 1

Вы можете сравнить верхнее положение прокрутки окна и изображения, чтобы получить идентификатор прокрученного изображения.

Для еи

$(window).scroll(function() { 

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

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

}); 
}); 

Answer 2

Просто попробуйте с нижеследующим,

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> 

Я думаю, что это может помочь вам решить вашу проблему.

Answer 3

Там может быть два сценария, в котором вы хотите идентификатор изображения и сделать дальнейшую обработку,

Первый сценарий Вы хотите выполнить что-то на свитке окна. В этом случае просто добавьте обработчик события прокрутки.

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

} 

Но помните, добавив события, как свиток, MouseMove выполняются чаще, поэтому они предложили не использовать много до тех пор, пока это нужно много.