主页 / user-415754

insanus's questions

Martin Hope
insanus
Asked: 2022-07-30 04:36:04 +0000 UTC
  • 1

在此处输入图像描述

有这样一个输入，我不明白怎么可能让它通过边界，但是边缘变得很锋利

border-bottom-width: 2px
border-bottom-color: $black
border-bottom-style: solid
box-sizing: border-box
border-bottom-left-radius: 8px
border-bottom-right-radius: 8px

如果你通过渐变来做，那么笔画就会被切断。

我能做到的唯一方法是添加第二个元素，是否可以在不创建额外块的情况下制作它

css
Martin Hope
insanus
Asked: 2022-02-24 05:44:25 +0000 UTC
  • 0

错误代码

npm ERR! code EEXIST
npm ERR! syscall open
npm ERR! path C:\Users\Сергей\AppData\Roaming\npm-cache\_locks\staging-8e864196fa38aa96.lock
npm ERR! errno -4075
npm ERR! EEXIST: file already exists, open 'C:\Users\Сергей\AppData\Roaming\npm-cache\_locks\staging-8e864196fa38aa96.lock'
npm ERR! File exists: C:\Users\Сергей\AppData\Roaming\npm-cache\_locks\staging-8e864196fa38aa96.lock
npm ERR! Remove the existing file and try again, or run npm
npm ERR! with --force to overwrite files recklessly.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Сергей\AppData\Roaming\npm-cache\_logs\2021-02-23T18_18_07_018Z-debug.log

尝试使用以下解决方案重新启动电脑

npm install uglify-js --save-dev
npm cache clean --force
npm i npm -g
npm
Martin Hope
insanus
Asked: 2021-12-09 03:11:32 +0000 UTC
  • 0

如果你从手机打开它并尝试移动它，有一个滑块，然后它开始抽搐，我该如何修复这个 codePen

        let slide = document.querySelectorAll('.slide');
        let wrappedSlide = document.querySelector('.wrapped-slide');
        let slider = document.querySelector('.slider');

        let slideOne = slide[0];

        wrappedSlide.addEventListener('touchstart ', getCurCoordsInsideRect);
        wrappedSlide.addEventListener('mousedown', getCurCoordsInsideRect);

        function getCurCoordsInsideRect(event) {

            let sliderWidth = parseFloat(window.getComputedStyle(slider, null).getPropertyValue("width"));
            let wrappedSlideWidth = parseFloat(window.getComputedStyle(wrappedSlide, null).getPropertyValue("width"));
            let slidelWidth = parseFloat(window.getComputedStyle(slideOne, null).getPropertyValue("width"));

            event.preventDefault(); // предотвратить запуск выделения (действие браузера)

            let shiftX = event.clientX == undefined ?
                event.changedTouches[0].pageX - wrappedSlide.getBoundingClientRect().left :
                event.clientX - wrappedSlide.getBoundingClientRect().left;
            // shiftY здесь не нужен, слайдер двигается только по горизонтали

            document.addEventListener('mousemove', onMouseMove);
            document.addEventListener('mouseup', onMouseUp);

            function onMouseMove(event) {
                let newLeft = event.clientX == undefined ?
                    event.changedTouches[0].pageX - shiftX - slider.getBoundingClientRect().left :
                    event.clientX - shiftX - slider.getBoundingClientRect().left;

                // курсор вышел из слайдера => оставить бегунок в его границах.
                if (newLeft > 0) {
                    newLeft = 0;
                }

                let numberSlide = Math.floor(sliderWidth / slidelWidth) * slidelWidth;

                if (numberSlide <= 0) numberSlide = slidelWidth

                let rightEdge = (wrappedSlideWidth - numberSlide) * -1;
                if (newLeft < rightEdge) {
                    newLeft = rightEdge;
                }

                wrappedSlide.style.transform = `translateX(${newLeft}px)`;
            }

            function onMouseUp() {
                document.addEventListener('touchmove', onMouseMove);
                document.removeEventListener('mouseup', onMouseUp);
                document.removeEventListener('mousemove', onMouseMove);
            }

        };
        #slider {
            width: 90%;
            height: 500px;
            background-color: aqua;
            position: relative;
            padding: 20px;
            overflow: hidden;
            margin: auto;
        }

        .wrapped-slide {
            display: inline-flex;
            height: inherit;
        }

        .slide {
            position: relative;
            top: 0;
            left: 0;
            width: 248px;
            height: inherit;
            background-color: black;
            transform: translateX(0);
            flex-shrink: 0;
            border: 1px solid white;
        }
<div id="slider" class="slider">
        <div class="wrapped-slide">
            <div class="slide">

            </div>
            <div class="slide">

            </div>
            <div class="slide">

            </div>
            <div class="slide">

            </div>
            <div class="slide">

            </div>
            <div class="slide">

            </div>
            <div class="slide">

            </div>
            <div class="slide">

            </div>
            <div class="slide">

            </div>
            <div class="slide">

            </div>
            <div class="slide">

            </div>
            <div class="slide">

            </div>
            <div class="slide">

            </div>
            <div class="slide">

            </div>
            <div class="slide">

            </div>
            <div class="slide">

            </div>
            <div class="slide">

            </div>
            <div class="slide">

            </div>
        </div>
    </div>

javascript