javascript – jQuery以每行为基础显示图像

2023年6月6日 221次阅读

我有一个图像列表.在悬停时,我需要在每行上调用LI上的函数,该函数会隐藏除当前图像之外的该行中的所有图像.只有一个清单.

我有JS为每一行添加数据属性(为简洁起见,这不包括在代码示例中).如何挂钩在行上动态设置的数据属性以调用显示和隐藏每行图像的函数？目前,所有行都有动画效果.

小提琴

http://jsfiddle.net/simply_simpy/2dNgF/

HTML

<div class="container" id="main">
<div id="add-8" class="row">
<div class="col-lg-11">
<ul class="list-unstyled list-inline the-wrap add-8 show-text">
<li data-row="1"><img class="full" src="http://lorempixel.com/g/150/150/" /> <span class=
      "cover" "><img src=
      "http://i.imgur.com/zK3d6yX.png?1" /></span></li>

      <li data-row="1"><img class="full" src="http://lorempixel.com/g/150/150/" /> <span class=
      "cover" "><img src=
      "http://i.imgur.com/zK3d6yX.png?1" /></span></li>

      <li data-row="1"><img class="full" src="http://lorempixel.com/g/150/150/" /> <span class=
      "cover" "><img src=
      "http://i.imgur.com/zK3d6yX.png?1" /></span></li>

      <li data-row="1"><img class="full" src="http://lorempixel.com/g/150/150/" /> <span class=
      "cover" "><img src=
      "http://i.imgur.com/zK3d6yX.png?1" /></span></li>

      <li data-row="1"><img class="full" src="http://lorempixel.com/g/150/150/" /> <span class=
      "cover" "><img src=
      "http://i.imgur.com/zK3d6yX.png?1" /></span></li>

      <li data-row="1"><img class="full" src="http://lorempixel.com/g/150/150/" /> <span class=
      "cover" "><img src=
      "http://i.imgur.com/zK3d6yX.png?1" /></span></li>

      <li data-row="1"><img class="full" src="http://lorempixel.com/g/150/150/" /> <span class=
      "cover" "><img src=
      "http://i.imgur.com/zK3d6yX.png?1" /></span></li>

      <li data-row="1"><img class="full" src="http://lorempixel.com/g/150/150/" /> <span class=
      "cover" "><img src=
      "http://i.imgur.com/zK3d6yX.png?1" /></span></li>

      <li data-row="2"><img class="full" src="http://lorempixel.com/g/150/150/" /> <span class=
      "cover" "><img src=
      "http://i.imgur.com/zK3d6yX.png?1" /></span></li>

      <li data-row="2"><img class="full" src="http://lorempixel.com/g/150/150/" /> <span class=
      "cover" "><img src=
      "http://i.imgur.com/zK3d6yX.png?1" /></span></li>

      <li data-row="2"><img class="full" src="http://lorempixel.com/g/150/150/" /> <span class=
      "cover" "><img src=
      "http://i.imgur.com/zK3d6yX.png?1" /></span></li>

      <li data-row="2"><img class="full" src="http://lorempixel.com/g/150/150/" /> <span class=
      "cover" "><img src=
      "http://i.imgur.com/zK3d6yX.png?1" /></span></li>

      <li data-row="2"><img class="full" src="http://lorempixel.com/g/150/150/" /> <span class=
      "cover" "><img src=
      "http://i.imgur.com/zK3d6yX.png?1" /></span></li>

      <li data-row="2"><img class="full" src="http://lorempixel.com/g/150/150/" /> <span class=
      "cover" "><img src=
      "http://i.imgur.com/zK3d6yX.png?1" /></span></li>

      <li data-row="2"><img class="full" src="http://lorempixel.com/g/150/150/" /> <span class=
      "cover" "><img src=
      "http://i.imgur.com/zK3d6yX.png?1" /></span></li>

      <li data-row="2"><img class="full" src="http://lorempixel.com/g/150/150/" /> <span class=
      "cover" "><img src=
      "http://i.imgur.com/zK3d6yX.png?1" /></span></li>

      <li data-row="3"><img class="full" src="http://lorempixel.com/g/150/150/" /> <span class=
      "cover" "><img src=
      "http://i.imgur.com/zK3d6yX.png?1" /></span></li>
    </ul>
  </div>
</div>

CSS

    #main {
        background: #fff;
        overflow: hidden;
        min-height: 800px;
    }

    .wrap-the-wrap {
        position: relative;
    }

    .tell-story .hidden {
        display: none;
    }

    ul.the-wrap {
        overflow: hidden;
    }

    ul.the-wrap p {
        margin: 0;
    }

    ul.the-wrap img {
        width: 133px;
        height: auto;
    }

    ul.the-wrap .cover {
        position: absolute;
        bottom: -150px;
        left: 0;
    }

    ul.the-wrap .more {
        width: 37px;
        height: 36px;
        display: block;
        position: absolute;
        bottom: -15px;
        left: 0;

    }

    ul.the-wrap li {
        float: left;
        position: relative;
        padding-left: 0;
        padding-right: 0;
        margin-left: 2px;
    }

    ul.the-wrap .text {
        width: 300px;
        position: absolute;
        left: 150px;
        top: 30px;
        z-index: 1;
        display: none;
        color: #333;
    }

JS

$(document).on("mouseenter", ".add-8 li", function () {
        $(this).find(".cover").addClass('current');
        animateCover("-30px");
        $(this).find(".text").fadeIn("fast");
    });

    //covers image with white image
    $(document).on("mouseleave", ".add-8 li", function () {
        $(this).find(".cover").removeClass('current');
        animateCover("-150px");
        $(this).find(".text").fadeOut("fast");
    })

    function animateCover(pos) {
        $("li .cover")
                .not(".current")
                .stop()
                .animate({"bottom": pos}, 250);
    }

最佳答案 注意：由于脚本已经很大,因此添加为不同的答案

带有数据属性

$(document).on("mouseenter", ".add-8 li", function () {
    var $this = $(this), rowId = $this.attr('data-row');

    $this.find(".cover").addClass('current');
    animateCover($this.siblings('[data-row="' + rowId + '"]'), "-30px");
    $this.find(".text").fadeIn("fast");
});

//covers image with white image
$(document).on("mouseleave", ".add-8 li", function () {
    var $this = $(this), rowId = $this.attr('data-row');

    $this.find(".cover").removeClass('current');
    animateCover($this.siblings('[data-row="' + rowId + '"]'), "-150px");
    $this.find(".text").fadeOut("fast");
})



$(window).resize(assignRowIds);
assignRowIds();

function assignRowIds(){
    var $els = $('.add-8 li'), row = 0, top;
    $els.each(function(){
        var $this = $(this), eltop = $this.offset().top;

        if(eltop != top){
            row++;
            top = eltop;
        }

        $this.attr('data-row', row)
    })
}

function animateCover($rowels, pos) {
    $rowels.find('.cover')
    .not(".current")
    .stop()
    .animate({"bottom": pos}, 250);
}

演示：Fiddle

点赞