时间戳

首页 > 解决方案 > 尝试构建一个下拉菜单，在按键时开始动画

javascript - 尝试构建一个下拉菜单，在按键时开始动画

问题描述

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

我现在大部分菜单+动画都在工作，我只是坚持如何用按键激活它。我希望密钥是“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>

标签： javascripthtmlcsslua

解决方案

  • 首先，代码k是 75，而不是 311，您应该使用 keydown事件，而不是keypress事件。
  • 接下来，在您的if情况下，每个部分都需要进行完整的测试。
  • 此外，您没有复选框具有idof start。
  • 最后，您有一些不正确的 HTML（即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)}
<html>
  <head>
  	<title>Menu Animations</title>
		<!-- Fonts -->
		<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
			<link rel="stylesheet" href="C:\Users\Admin\Desktop\GTARP\FXServer-new\server-data\resources\[system]\mooseWallet\html">    
	</head>
	<body>
				<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>
				</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>
        </div>
			</div>
		</div>
	</body>
</html>

推荐阅读