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`);
                    }
                });
            });
        }
  • 相关阅读:
    js MD5加密后的字符串
    <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>
    归并排序
    C#分解质因数
    C#找出第n到m个素数之间所有之和
    C#打印0到100的素数
    for循环练习
    express总结(一)
    Nodejs总结(一)
    Webpack配置及使用
  • 原文地址:https://www.cnblogs.com/Nyan-Workflow-FC/p/13280775.html
Copyright © 2011-2022 走看看