主页 / user-300769

DarkRou's questions

Martin Hope
DarkRou
Asked: 2020-05-02 12:35:17 +0000 UTC
  • 1

有一组四个块，每个块都有一个类block。而且我需要当您单击其中一个时，会发生一个动作，例如，添加一个类，恰好在单击的块上。如何做到这一点？因为据我了解，eventLisener 无法以这种方式处理数组。并且为每个块复制代码，我认为不值得。

Ps 点击不同的方块时，动作是一样的，不同的只是方块本身，而不是动作

javascript
Martin Hope
DarkRou
Asked: 2020-05-02 00:47:06 +0000 UTC
  • 1

有切换方块的按钮，有转场效果。而且我需要在单击后一段时间后才能单击此按钮。否则，会出现不必要的视觉错误。还有 2 个按钮，一个后退 ( prev)，一个前进 ( next)

next.addEventListener('click', function() {
    var activeBlock = document.querySelector('.content > .block.active');
    var nextBlock = activeBlock.nextElementSibling;

    if (nextBlock.classList.contains('block')) {
        nextBlock.classList.add('active', 'fadeIn');
        nextBlock.style.display = 'flex';
        setTimeout(function () {
        nextBlock.classList.remove('fadeIn');
            nextBlock.style.opacity = '1';
        }, 500);
    }
    else {
        firstBlock.classList.add('active', 'fadeIn');
        firstBlock.style.display = 'flex';
        setTimeout(function () {
            firstBlock.classList.remove('fadeIn');
            firstBlock.style.opacity = '1';
        }, 500);
    }

    activeBlock.classList.add('fadeOut');
    setTimeout(function () {
        activeBlock.classList.remove('fadeOut');
        activeBlock.classList.remove('active');
        activeBlock.style.opacity = '0';
        activeBlock.style.display = 'none';
    }, 500);
});
javascript
Martin Hope
DarkRou
Asked: 2020-04-30 18:04:40 +0000 UTC
  • 0

我通过在块中添加和删除一个类active来进行块切换。

var blocks = document.querySelectorAll('.block');

next.addEventListener('click', function () {
    blocks.forEach(function (val, id) {
        if (val.classList.contains('active')){

            val.classList.remove('active');

        }
    })
})
<div class="content">
    <div class="arrow left" id="prev">
      <button>left</button>
    </div>
    <div class="block active" id="block1">
      block1
    </div>
    <div class="block" id="block2">
      block2
    </div>
    <div class="block" id="block3">
      block3
    </div>
    <div class="block" id="block4">
      block4
    </div>
    <div class="arrow right" id="next">
      <button>right</button>
    </div>
</div>

现在在val.classList.remove('active'); 我需要写入val.classList.add('active');数组的下一个元素之后。问题是，如何使用完全循环来完成forEach？

javascript
Martin Hope
DarkRou
Asked: 2020-04-05 16:34:43 +0000 UTC
  • 0

有一个模糊的 SVG 对象，但如果它足够模糊，就会阻止它进一步模糊，并切断它的一部分。

.circle{
    fill: #0adaf5;
}
<?xml-stylesheet type="text/css" href="/css/style.css"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 500 500" id="svg">
	<defs>
		<filter id="blurCircle">
			<feGaussianBlur id="blur" in="SourceGraphic" stdDeviation="50"/>
		</filter>
	</defs>
	<circle cx="250" cy="250" r="50" class="circle" filter="url(#blurCircle)">
		<animate
				id="blurAnimation"
				attributeName="r"
				values="50; 100; 50"
				dur="3s"
				repeatCount="indefinite"
				fill="remove"
		/>
	</circle>
</svg>

svg
Martin Hope
DarkRou
Asked: 2020-04-04 21:39:55 +0000 UTC
  • 2

当您将鼠标悬停在物体上时，有必要发生眼睛发光的脉动。这项任务是来自眼睛内部的光芒，超越了它的极限。

我觉得我们应该filter: blur()在眼睛里面试一下球，因为我觉得渐变不会很不合适

大致如下图所示，1是初始状态，2是最终状态，反之亦然，所以悬停时开始脉冲是这样的

.logoPath{
    fill: none;
    stroke-width: 30;
    stroke-linecap: round;
    stroke-miterlimit: 10;
}

.logoColor{
    stroke: #0adaf5;
}
<svg version="1.1" id="Слой_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 2686 3591" style="enable-background:new 0 0 2686 3591;" xml:space="preserve">
<path class="logoPath logoColor" d="M1389.9,899.5c0,0,18,150,66,174s198-36,198-36S1473.9,881.5,1389.9,899.5z"/>
<path class="logoPath logoColor" d="M680.7,2597.5c-72,420,195,594,195,594c-31.5-182.1,147-496,147-496c4,488,400,552,400,552
	c-204-196-116-690-116-690c272,304,248,952,248,952c336-644,74-1153,74-1153c236,188,252,568,252,568
	c248.7-313.5,152.1-630.7,63.4-803.5c-35.7-69.6-91.8-126.6-160.9-163.4c-282.5-150.2-309.6-366.7-309.6-366.7
	c196.9,132.3,616.7,193.8,771.5,212.6c81.6,9.9,164.4-7.9,233.8-51.8c170.8-108.1,186.6-321,186.6-321c-180-150-725.3-409-725.3-409
	S1758.7,481,1204.7,421.5c0,0-19.5-204.9,26-390c-11.5,4.4-274.6,75.2-378.9,341.9c-21.8,55.7-62,109.8-120.3,122.8
	C498.3,548.5,76.4,841.6,53.7,1257.5c0,0,162-134,214-146c0,0-354,617-214,906c0,0,63.9-163,194-240c0,0-230,588-54,932
	c0,0,78-224,166-276c0,0-105,454,247,1038C606.7,3471.5,498.7,3011.5,680.7,2597.5z"/>
<path class="logoPath logoColor" d="M2505,1321c0,0,72.9,259.2,114.3,269.1"/>
<path class="logoPath logoColor" d="M1204.7,213.5c0,0,36-128,158-174c0,0-50,339,47,430"/>
<circle cx="1498" cy="1002" r="80" style="fill: #0adaf5;"/>
</svg>

初始状态最终状态

css
Martin Hope
DarkRou
Asked: 2020-04-02 14:48:51 +0000 UTC
  • 3

我学会了如何制作 SVG 动画，一切顺利。我想要一个循环动画，在迭代之间有几秒钟的延迟。我得到了固定，但没有延迟。

 .logoPath {
        fill: none;
        stroke-width: 35;
        stroke-linecap: round;
        stroke-miterlimit: 10;
    }

    .logoColor {
        stroke: #5db3e6;
     }
<?xml-stylesheet type="text/css" href="/css/style.css"?>
<svg version="1.1" id="svg1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 2739.1 3607.7" style="enable-background:new 0 0 2739.1 3607.7;" xml:space="preserve">
	<path class="logoPath logoColor" d="M1389.9,899.5c0,0,18,150,66,174s198-36,198-36S1473.9,881.5,1389.9,899.5z">
		<animate
				attributeName="d"
				begin="0.5s"
				dur="0.5s"
				repeatCount="indefinite"
				fill="remove"
				values="M1389.9,899.5c0,0,18,150,66,174s198-36,198-36S1473.9,881.5,1389.9,899.5z;
				 M1389.9,899.5c0,0,81.5,26.4,129.5,50.4s134.5,87.6,134.5,87.6S1473.9,881.5,1389.9,899.5z;
				 M1389.9,899.5c0,0,81.5,26.4,129.5,50.4s134.5,87.6,134.5,87.6S1473.9,881.5,1389.9,899.5z;
				 M1389.9,899.5c0,0,18,150,66,174s198-36,198-36S1473.9,881.5,1389.9,899.5z"
		/>
	</path>
	<path class="logoPath logoColor" d="M680.7,2597.5c-72,420,195,594,195,594c-31.5-182.1,147-496,147-496c4,488,400,552,400,552
	c-204-196-116-690-116-690c272,304,248,952,248,952c336-644,74-1153,74-1153c236,188,252,568,252,568
	c248.7-313.5,152.1-630.7,63.4-803.5c-35.7-69.6-91.8-126.6-160.9-163.4c-282.5-150.2-309.6-366.7-309.6-366.7
	c196.9,132.3,616.7,193.8,771.5,212.6c81.6,9.9,164.4-7.9,233.8-51.8c170.8-108.1,186.6-321,186.6-321c-180-150-725.3-409-725.3-409
	S1758.7,481,1204.7,421.5c0,0-19.5-204.9,26-390c-11.5,4.4-274.6,75.2-378.9,341.9c-21.8,55.7-62,109.8-120.3,122.8
	C498.3,548.5,76.4,841.6,53.7,1257.5c0,0,162-134,214-146c0,0-354,617-214,906c0,0,63.9-163,194-240c0,0-230,588-54,932
	c0,0,78-224,166-276c0,0-105,454,247,1038C606.7,3471.5,498.7,3011.5,680.7,2597.5z"/>
	<path class="logoPath logoColor" d="M2505,1321c0,0,72.9,259.2,114.3,269.1"/>
	<path class="logoPath logoColor" d="M1204.7,213.5c0,0,36-128,158-174c0,0-50,339,47,430"/>
</svg>

xml
Martin Hope
DarkRou
Asked: 2020-04-01 17:31:10 +0000 UTC
  • 0

水平的

垂直的 当悬停在一个方块上时，我需要带有道路的完整照片出现在同一个地方，而我只是无法移动它以使其在同一个地方，它要么没有按应有的移动，要么它没有移动到它应该移动的地方。使用蒲公英，我可以使用 flexbox 垂直居中，但不能水平居中。

        <div class="photoContainer">
            <div class="photo">
                <img src="/img/background.png" alt="" class="mainImg">
                <img src="/img/background.png" alt="" class="fullImg horizontal">
            </div>
            <div class="photo">
                <img src="/img/image.png" alt="" class="mainImg">
                <img src="/img/image.png" alt="" class="fullImg vertical">
            </div>
        </div>
    </div>

.photoContainer{
display: grid;
justify-content: center;
grid-template-columns: repeat(auto-fit, 200px);
grid-auto-rows: 200px;
grid-gap: 5px;

.photo{
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-sizing: border-box;

    &:hover{
        .fullImg{
            opacity: 1;
            transition: 0.25s ease-in-out;
            z-index: 1;
        }
    }

    .mainImg{
        height: 100%;
        width: 100%;
        pointer-events: none;
        object-fit: cover;
    }

    .fullImg{
        outline: $border;
        position: absolute;
        left: 0;
        opacity: 0;
        transition: 0.5s ease-in-out;
        z-index: -1;
    }

    .vertical{
        width: 200px;
    }

    .horizontal{
        height: 200px;
    }
}

}

html
Martin Hope
DarkRou
Asked: 2020-01-17 17:22:21 +0000 UTC
  • 0

我想在 Windows 10 上安装 Redis，并按照官方网站上的说明进行操作。

安装 下载、解压并编译 Redis：

$ wget http://download.redis.io/releases/redis-5.0.3.tar.gz
$ tar xzf redis-5.0.3.tar.gz
$ cd redis-5.0.3
$ make

make出现错误后C:\Program no such directory or file

然后他输入了命令输入的命令，make但是改变了，这样就不会出现错误了

cd "src" && "C:/Program Files/Git/mingw64/bin/make" all

之后我得到一个错误/usr/bin/sh: cc: command not found

我再说一遍：我从官方网站https://redis.io/download在 Windows 10 上安装了 Redis

windows