尝试建立一个带有动画的下拉菜单，并在按键时开始

时间：2019-04-25 22:21:56

标签： javascript html css lua

我一直在尝试构建此菜单，该菜单从角落的小图标开始，并在按键（当前单击）时激活复选框，从而开始动画。

我现在可以使用大多数菜单+动画了，我只是停留在如何通过按键激活它上。我希望键为“ K”，但似乎没有脚本适合我。这是我的所有代码，以及可以尝试帮助我编写按键脚本的所有内容。

	/*////////////////
	// Jig Dropdown //
	////////////////*/

document.onkeypress = function(e) {
  if ((e.which || e.keyCode) == 311) { //this is the number code for the letter "K"
    document.getElementById('start').click();
    if (document.getElementById('start').className.indexOf("checkbox-checked") == -1) document.getElementById('start').className += ' checkbox-checked';
  }
};

document.onkeyup = function(e) {
  document.getElementById('start').className = document.getElementById('start').className.replace(/button\-active/g, "");

}

function start() {
  console.log("start")
}

input[type=checkbox] {
	height: 1.5rem;
	opacity: 0;
	position: absolute;
	right: .5rem;
	top: .5rem; 
	width: 1.5rem;
	z-index: 3;
}
#menu {
	background-color: #23272a;
	border-radius: 2rem 0 2rem 2rem;
	height: 2rem;
	position: absolute;
	right: .5rem;
	top: .5rem; 
	transition: .3s;
	width: 2rem;
	z-index: 1;
}
#line-one, #line-two {
	background: #949c9e;
	height: .2rem;
	position: absolute;
	right: 1rem;
	top: 1.1rem;
	transition: .3s;
	width: 1rem;
	z-index: 2;
}
#line-two {
	top: 1.6rem;
}

#icon-one, #icon-two, #icon-three {
	background: #23272a;
	border-radius: 1rem;
	height: 1.5rem;
	position: absolute;
	right: .75rem;
	top: 1rem;
	transition: .3s;
	transition-delay: .2s;
	width: 1.5rem;
	rgba(255, 255, 255, 0.3)
}
#icon-one {
	background: #949c9e;
}
.icon {
  display: inline-block;
	fill: white;
  height: 1rem;
	left: .37rem;
	position: absolute;
	top: .25rem;
	width: .8rem;
}
#icon-two {
	background: #949c9e;
}
#icon-three {
	background: #949c9e;
}
#icon-one:hover, #icon-two:hover, #icon-three:hover {
	right: 2rem;
	width: 13rem;
}

/*ANIMATION MECHANICS*/
input[type=checkbox]:checked ~ #menu {
	transform: rotate(-225deg);
}
input[type=checkbox]:checked ~ #icon-one {
	animation-name: jig-one;
	animation-delay: .4s;
	animation-duration: .3s;
	transform: scale(1.3) translate(0, 2rem);
}
input[type=checkbox]:checked ~ #icon-two {
	animation-name: jig-two;
	animation-delay: .45s;
	animation-duration: .3s;
	transform: scale(1.3) translate(0, 4rem);
}
input[type=checkbox]:checked ~ #icon-three {
	animation-name: jig-three;
	animation-delay: .5s;
	animation-duration: .3s;
	transform: scale(1.3) translate(0, 6rem);
}
input[type=checkbox]:checked ~ #line-one {
	background: #949c9e;
	top: 1.35rem;
	transform: rotate(-45deg);
}
input[type=checkbox]:checked ~ #line-two {
	background: #949c9e;
	top: 1.35rem;
	transform: rotate(45deg);
}

@keyframes jig-one {
	0% {transform: scale(1.3) translate(0, 2rem)}
	33% {transform: scale(1.3) translate(0.1rem, 2rem)}
	66% {transform: scale(1.3) translate(-0.1rem, 2rem)}
	100% {transform: scale(1.3) translate(0, 2rem)}
}
@keyframes jig-two {
	0% {transform: scale(1.3) translate(0, 4rem)}
	33% {transform: scale(1.3) translate(0.1rem, 4rem)}
	66% {transform: scale(1.3) translate(-0.1rem, 4rem)}
	100% {transform: scale(1.3) translate(0, 4rem)}
}
@keyframes jig-three {
	0% {transform: scale(1.3) translate(0, 6rem)}
	33% {transform: scale(1.3) translate(0.1rem, 6rem)}
	66% {transform: scale(1.3) translate(-0.1rem, 6rem)}
	100% {transform: scale(1.3) translate(0, 6rem)}
<html>
  <head>
  	<title>Menu Animations</title>
		<!-- Fonts -->
		<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
	</head>
	<body>
		</header>
			<link rel="stylesheet" type="css" href="C:\Users\Admin\Desktop\GTARP\FXServer-new\server-data\resources\[system]\mooseWallet\html">.
				<input type='checkbox'>
				<div id="menu"></div>
				<div id="line-one"></div>
				<div id="line-two"></div>
				<div id="icon-one">
  				<image class="icon icon-image" src="https://image.flaticon.com/icons/svg/82/82479.svg">
						<symbol id="icon-image" viewBox="0 0 32 32">
						<title>image</title>
						</symbol>
					</image>					
				</div>
				<div id="icon-two">
					<image class="icon icon-image" src="https://image.flaticon.com/icons/svg/25/25246.svg">
						<symbol id="icon-image" viewBox="0 0 32 32">
						<title>image</title>
						</symbol>
					</svg>
				</div>
				<div id="icon-three">
  				<image class="icon icon-image" src="https://image.flaticon.com/icons/svg/61/61584.svg">
						<symbol id="icon-image" viewBox="0 0 32 32">
						<title>image</title>
						</symbol>
					</svg>
        </div>
			</div>
		</div>
	</body>
</html>

2 个答案:

答案 0 :(得分：1)

  • 首先，k的代码是75，而不是311，您应该使用 keydown事件，而不是keypress事件。
  • 接下来，在您的if状态下，每个零件都需要进行完整的测试。
  • 此外，您没有复选框中id的{​​{1}}。
  • 最后，您有一些不正确的HTML（即start元素必须 在link部分中，并且您有一个结束head标签，但没有 打开header标签）。

header
document.addEventListener("keydown", function(e) {
console.log(e.which);
  if (e.which == 75 || e.keyCode == 75) { 
    // this is the number code for the letter "K"
    document.getElementById('start').click();
    if (document.getElementById('start').className.indexOf("checkbox-checked") == -1){ 
      document.getElementById('start').className += ' checkbox-checked';
    }
  }
});

document.addEventListener("keyup", function(e) {
  document.getElementById('start').className = 
    document.getElementById('start').className.replace(/button\-active/g, "");
});

function start() {
  console.log("start")
}
input[type=checkbox] {
	height: 1.5rem;
	opacity: 0;
	position: absolute;
	right: .5rem;
	top: .5rem; 
	width: 1.5rem;
	z-index: 3;
}
#menu {
	background-color: #23272a;
	border-radius: 2rem 0 2rem 2rem;
	height: 2rem;
	position: absolute;
	right: .5rem;
	top: .5rem; 
	transition: .3s;
	width: 2rem;
	z-index: 1;
}
#line-one, #line-two {
	background: #949c9e;
	height: .2rem;
	position: absolute;
	right: 1rem;
	top: 1.1rem;
	transition: .3s;
	width: 1rem;
	z-index: 2;
}
#line-two {
	top: 1.6rem;
}

#icon-one, #icon-two, #icon-three {
	background: #23272a;
	border-radius: 1rem;
	height: 1.5rem;
	position: absolute;
	right: .75rem;
	top: 1rem;
	transition: .3s;
	transition-delay: .2s;
	width: 1.5rem;
	rgba(255, 255, 255, 0.3)
}
#icon-one {
	background: #949c9e;
}
.icon {
  display: inline-block;
	fill: white;
  height: 1rem;
	left: .37rem;
	position: absolute;
	top: .25rem;
	width: .8rem;
}
#icon-two {
	background: #949c9e;
}
#icon-three {
	background: #949c9e;
}
#icon-one:hover, #icon-two:hover, #icon-three:hover {
	right: 2rem;
	width: 13rem;
}

/*ANIMATION MECHANICS*/
input[type=checkbox]:checked ~ #menu {
	transform: rotate(-225deg);
}
input[type=checkbox]:checked ~ #icon-one {
	animation-name: jig-one;
	animation-delay: .4s;
	animation-duration: .3s;
	transform: scale(1.3) translate(0, 2rem);
}
input[type=checkbox]:checked ~ #icon-two {
	animation-name: jig-two;
	animation-delay: .45s;
	animation-duration: .3s;
	transform: scale(1.3) translate(0, 4rem);
}
input[type=checkbox]:checked ~ #icon-three {
	animation-name: jig-three;
	animation-delay: .5s;
	animation-duration: .3s;
	transform: scale(1.3) translate(0, 6rem);
}
input[type=checkbox]:checked ~ #line-one {
	background: #949c9e;
	top: 1.35rem;
	transform: rotate(-45deg);
}
input[type=checkbox]:checked ~ #line-two {
	background: #949c9e;
	top: 1.35rem;
	transform: rotate(45deg);
}

@keyframes jig-one {
	0% {transform: scale(1.3) translate(0, 2rem)}
	33% {transform: scale(1.3) translate(0.1rem, 2rem)}
	66% {transform: scale(1.3) translate(-0.1rem, 2rem)}
	100% {transform: scale(1.3) translate(0, 2rem)}
}
@keyframes jig-two {
	0% {transform: scale(1.3) translate(0, 4rem)}
	33% {transform: scale(1.3) translate(0.1rem, 4rem)}
	66% {transform: scale(1.3) translate(-0.1rem, 4rem)}
	100% {transform: scale(1.3) translate(0, 4rem)}
}
@keyframes jig-three {
	0% {transform: scale(1.3) translate(0, 6rem)}
	33% {transform: scale(1.3) translate(0.1rem, 6rem)}
	66% {transform: scale(1.3) translate(-0.1rem, 6rem)}
	100% {transform: scale(1.3) translate(0, 6rem)}

答案 1 :(得分：0)

您似乎忘记了将ID "start"放在复选框中。另外，我为“ k”键获得的键码为75。我也使用了按下键事件。

我使用addEventListener而不是直接设置事件属性，因为这样，您可以拥有多个处理程序，而不会彼此覆盖。

做好动画！它们看起来很棒，并且确实可以使您的网站栩栩如生。

document.addEventListener('keydown', function(e) {
  if ((e.which || e.keyCode) == 75) {
    var startElem = document.getElementById('start');
    startElem.click();
  }
});
  input[type=checkbox] {
  height: 1.5rem;
  opacity: 0;
  position: absolute;
  right: .5rem;
  top: .5rem;
  width: 1.5rem;
  z-index: 3;
}

#menu {
  background-color: #23272a;
  border-radius: 2rem 0 2rem 2rem;
  height: 2rem;
  position: absolute;
  right: .5rem;
  top: .5rem;
  transition: .3s;
  width: 2rem;
  z-index: 1;
}

#line-one,
#line-two {
  background: #949c9e;
  height: .2rem;
  position: absolute;
  right: 1rem;
  top: 1.1rem;
  transition: .3s;
  width: 1rem;
  z-index: 2;
}

#line-two {
  top: 1.6rem;
}

#icon-one,
#icon-two,
#icon-three {
  background: #23272a;
  border-radius: 1rem;
  height: 1.5rem;
  position: absolute;
  right: .75rem;
  top: 1rem;
  transition: .3s;
  transition-delay: .2s;
  width: 1.5rem;
  rgba(255, 255, 255, 0.3)
}

#icon-one {
  background: #949c9e;
}

.icon {
  display: inline-block;
  fill: white;
  height: 1rem;
  left: .37rem;
  position: absolute;
  top: .25rem;
  width: .8rem;
}

#icon-two {
  background: #949c9e;
}

#icon-three {
  background: #949c9e;
}

#icon-one:hover,
#icon-two:hover,
#icon-three:hover {
  right: 2rem;
  width: 13rem;
}


/*ANIMATION MECHANICS*/

input[type=checkbox]:checked~#menu {
  transform: rotate(-225deg);
}

input[type=checkbox]:checked~#icon-one {
  animation-name: jig-one;
  animation-delay: .4s;
  animation-duration: .3s;
  transform: scale(1.3) translate(0, 2rem);
}

input[type=checkbox]:checked~#icon-two {
  animation-name: jig-two;
  animation-delay: .45s;
  animation-duration: .3s;
  transform: scale(1.3) translate(0, 4rem);
}

input[type=checkbox]:checked~#icon-three {
  animation-name: jig-three;
  animation-delay: .5s;
  animation-duration: .3s;
  transform: scale(1.3) translate(0, 6rem);
}

input[type=checkbox]:checked~#line-one {
  background: #949c9e;
  top: 1.35rem;
  transform: rotate(-45deg);
}

input[type=checkbox]:checked~#line-two {
  background: #949c9e;
  top: 1.35rem;
  transform: rotate(45deg);
}

@keyframes jig-one {
  0% {
    transform: scale(1.3) translate(0, 2rem)
  }
  33% {
    transform: scale(1.3) translate(0.1rem, 2rem)
  }
  66% {
    transform: scale(1.3) translate(-0.1rem, 2rem)
  }
  100% {
    transform: scale(1.3) translate(0, 2rem)
  }
}

@keyframes jig-two {
  0% {
    transform: scale(1.3) translate(0, 4rem)
  }
  33% {
    transform: scale(1.3) translate(0.1rem, 4rem)
  }
  66% {
    transform: scale(1.3) translate(-0.1rem, 4rem)
  }
  100% {
    transform: scale(1.3) translate(0, 4rem)
  }
}

@keyframes jig-three {
  0% {
    transform: scale(1.3) translate(0, 6rem)
  }
  33% {
    transform: scale(1.3) translate(0.1rem, 6rem)
  }
  66% {
    transform: scale(1.3) translate(-0.1rem, 6rem)
  }
  100% {
    transform: scale(1.3) translate(0, 6rem)
  }
<html>

<head>
  <title>Menu Animations</title>
  <!-- Fonts -->
  <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
</head>

<body>
  </header>
  <link rel="stylesheet" type="css" href="C:\Users\Admin\Desktop\GTARP\FXServer-new\server-data\resources\[system]\mooseWallet\html">.
  <input type='checkbox' id="start">
  <div id="menu"></div>
  <div id="line-one"></div>
  <div id="line-two"></div>
  <div id="icon-one">
    <image class="icon icon-image" src="https://image.flaticon.com/icons/svg/82/82479.svg">
      <symbol id="icon-image" viewBox="0 0 32 32">
        <title>image</title>
      </symbol>
    </image>
  </div>
  <div id="icon-two">
    <image class="icon icon-image" src="https://image.flaticon.com/icons/svg/25/25246.svg">
      <symbol id="icon-image" viewBox="0 0 32 32">
        <title>image</title>
      </symbol>
      </svg>
  </div>
  <div id="icon-three">
    <image class="icon icon-image" src="https://image.flaticon.com/icons/svg/61/61584.svg">
      <symbol id="icon-image" viewBox="0 0 32 32">
        <title>image</title>
      </symbol>
      </svg>
  </div>
  </div>
  </div>
</body>

</html>

相关问题
最新问题