• 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`);
                    }
                });
            });
        }
  • 相关阅读:
    家庭网络拓扑架构
    网络基础概念(IP、MAC、网关、子网掩码)
    centos7搭建docker并部署lnmp (转)
    docker容器里面安装php的redis扩展
    docker 安装ps命令
    Docker Ubuntu容器安装ping
    docker 安装nginx
    CentOS7 安装特定版本的Docker
    docker 卸载旧版本
    Centos7搭建Docker部署LNMP
  • 原文地址:https://www.cnblogs.com/Nyan-Workflow-FC/p/13280775.html
Copyright © 2020-2023  润新知