首页 > 其他 > 详细

jq 点击缩略图 大图滚动到可视位置

时间:2021-06-04 18:06:34      阅读:23      评论:0      收藏:0      [点我收藏+]

记录一下。jq实现当我点击左侧缩略图,右侧大图能够向上滚动。

技术分享图片

代码大致如下:

              <ul>
                    <li><img src="./img/1.png"></li>
                    <li><img src="./img/2.png"></li>
                    <li><img src="./img/3.png"></li>
                    <li><img src="./img/4.png"></li>
                    <li><img src="./img/5.png"></li>
                </ul>
            <div class="img">
                <div><img src="./img/1.png"></div>
                <div><img src="./img/2.png"></div>
                <div><img src="./img/3.png"></div>
                <div><img src="./img/4.png"></div>
                <div><img src="./img/5.png"></div>
            </div>
<script>

            $(document).on(‘click‘, ‘li‘, function () {
                let i = $(this).index();
                console.log(i);
    $(‘html, body‘).animate({scrollTop:$(‘.img > div‘).eq(i).offset().top},1000)
});
        </script>
当点击左侧的列表时,取得点击的项的索引值。拥有对应索引值的大图进行相对偏移。
 

jq 点击缩略图 大图滚动到可视位置

原文:https://www.cnblogs.com/whiteshu/p/14850316.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!