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`);
                    }
                });
            });
        }
  • 相关阅读:
    iOS 饼状图
    objective-c 中随机数的用法 (3种:arc4random() 、random()、CCRANDOM_0_1() )
    倒计时获取验证码、事件代码
    iOS 技能集结号
    自定义控件:半透明控件
    c# string
    软考题
    php简单实例
    .net 线程池的简单应用
    c# 堆栈四则运算
  • 原文地址:https://www.cnblogs.com/Nyan-Workflow-FC/p/13280775.html
Copyright © 2011-2022 走看看