0

私はコミックをオンラインで読むためのウェブサイトを持っています。

読み取りページの 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 を表示している場合の例 #image2 の要素 ID を取得したい。

idnow = idnow_getted

助けてください、みんなありがとう！

4

3 に答える 3

0

ウィンドウのスクロールトップと画像の上部の位置を比較して、スクロール先の画像のIDを取得できます。

たとえば、

$(window).scroll(function() {

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

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

});
});
于 2013-03-07T04:12:35.667 に答える
0

画像のIDが必要で、さらに処理を行う2つのシナリオがあるかもしれません.

最初のシナリオウィンドウのスクロール時に何かを実行したい。この場合、スクロール イベントにハンドラーを追加するだけです。

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

    });

2 番目のシナリオ、任意のイベントのトリガーで何らかのアクションを実行する場合。

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

}

ただし、scroll、mousemove などのイベントを追加することはより頻繁に実行されるため、必要になるまであまり使用しないことをお勧めします。

于 2013-03-07T04:41:11.587 に答える
-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>

これはあなたの問題を解決するのに役立つかもしれないと思います.

于 2013-03-07T04:30:47.140 に答える