zoukankan      html  css  js  c++  java
  • jquery: 计算位移互相定位找到对应的元素

    实现目标如图:

    js:

    let listSelector = '.sand-info-list';
        let leftSelector = '#sandArrowPrev';
        let rightSelector = '#sandArrowNext';
        let totalItemCount = $('.sand-info-list li').length;
        let itemWith = 100;
        let stepWith = 500;
        let showItemCount = 5;
        new CustomCarousel({ listSelector, leftSelector, rightSelector, totalItemCount, showItemCount, itemWith, stepWith });
    
        /*列表项目点击*/
        let picSelcetor = '#sandPicture .sand-item';
        let tabSelector = '.sand-info-list li';
        bindSandEvent(picSelcetor, tabSelector);
        bindSandEvent(tabSelector, picSelcetor);
    
        function bindSandEvent(clickSelector, activeSelector) {
            $(clickSelector).each(function () {
                $(this).click(function () {
                    $(this).siblings().removeClass('actived');
                    $(this).addClass('actived');
                    let dataId = $(this).attr('data-id');
                    $(activeSelector).siblings().removeClass('actived');
                    $(`${activeSelector}[data-id=${dataId}]`).addClass('actived');
                    let tabItem = $(`${tabSelector}[data-id=${dataId}]`);
                    let itemOffsetLeft = tabItem.offset().left;
                    let headerOffsetLeft = $('.sand-info-header').offset().left;
                    // 子元素与上上级元素的距离
                    let relativePosition = headerOffsetLeft - itemOffsetLeft; 
                    // 子元素与直接上级元素的距离
                    let itemPosition = tabItem.position().left;
                    //计算当前页
                    let currentPage = Math.floor(itemPosition / stepWith);
    
                    if (relativePosition < -400 || relativePosition > 0) {
                        $(listSelector).css('left', `-${currentPage * stepWith}px`);
                    }
                });
            });
        }
  • 相关阅读:
    设计模式详解(图码)
    设计模式详解(图)
    Zookeeper学习
    取消单元格的点击事件
    ios 中生成随机数
    IOS 时间和时间戳之间转化
    偏好存空判断
    限制textfield的文字长度
    tabBar的图标不被系统渲染
    (转)IOS http请求的get 和 post的请求的区别
  • 原文地址:https://www.cnblogs.com/Nyan-Workflow-FC/p/13280775.html
Copyright © 2011-2022 走看看