未登录

开通VIP,畅享免费电子书等14项超值服

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

我有一个图像列表.在悬停时,我需要在每行上调用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="//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="//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="//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="//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="//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="//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="//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="//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="//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="//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="//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="//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="//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="//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="//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="//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="//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

来源:https://www.icode9.com/content-1-295151.html
本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP阅读全文并永久保存 更多类似文章
猜你喜欢
类似文章
图文导航
学会Twitter Bootstrap不再难
基于jquery右侧悬浮加入购物车代码
CSS制作的类似相册浏览的功能
第二十二节,Bootstrap项目实战-首页
jQuery Mobile仿360首页,jQuery Mobile网格布局,jQuery Mobile网址大全,HTML5仿360首页
更多类似文章 >>
生活服务
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!