js 长按鼠标左键实现溢出内容左右滚动滚动


       var nextPress, prevPress;
     
      // 鼠标按下执行定时器,每0.1秒向左移一个li内容的宽度
       function nextDown() {
            nextPress = setInterval(() => {
                var lt = parseInt($(".overview").css("left")),
                    liWid = $(".overview").find("ul").find("li").outerWidth(true),
                    divWid = $(".overview").outerWidth(true);
          // 偏移的位置大于整体内容的宽度禁止右移
                if(-lt >= divWid-4*liWid) {
                    clearInterval(nextPress);
                } else{
                    $(".overview").css("left",lt-liWid);
                }
            }, 100);
        }

        function prevDown() {
            prevPress = setInterval(() => {
                var lt = parseInt($(".overview").css("left")),
                    liWid = $(".overview").find("ul").find("li").outerWidth(true);
                if(lt >= liWid) {
                    clearInterval(prevPress);
                } else {
                    $(".overview").css("left",lt+liWid);
                }
            }, 100);
        }
    
       // div中的右箭头按下向右移
        $(".nav-btnNext").on("mousedown", () => {
            nextDown();
        })
        $(".nav-btnNext").on("mouseup", () => {
            // 箭头弹起清除定时器暂停右移
            clearInterval(nextPress);
        })
        // div中的左箭头按下向左移
        $(".nav-btnPrev").on("mousedown", () => {
            prevDown();
        })
        $(".nav-btnPrev").on("mouseup", () => {
            //  箭头弹起清除定时器暂停右移
            clearInterval(prevPress)
        })        

  


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM