小贝子编程

我怎样才能创建一个像jQuery的slideUp()一样的函数，但用于向上以外的方向？



我正在尝试构造/找到一个函数，该函数以类似于jQuery的.slideUp((，.slideDown((和.slideToggle((的方式显示/隐藏内容，除了能够向上滑动以外的方向。

这是我的起点：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Bootstrap Practice</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="./stylesheets/styles.css">
<style>
.main {
border: solid 1px black;
position: fixed;
left: 50%;
top: 50%;
background-color: white;
z-index: 100;
height: 400px;
margin-top: -200px;
width: 600px;
margin-left: -300px;
}

.downward-text {
writing-mode: vertical-lr;
text-orientation: upright;
margin: 0!important;
}

.up-links {
border: solid 1px black;
position: fixed;
left: 50%;
top: 42.5%;
background-color: white;
z-index: 100;
height: 50px;
margin-top: -200px;
width: 600px;
margin-left: -300px;
}

.down-links {
border: solid 1px black;
position: fixed;
left: 50%;
top: 97%;
background-color: white;
z-index: 100;
height: 50px;
margin-top: -200px;
width: 600px;
margin-left: -300px;
}

.left-links {
border: solid 1px black;
position: fixed;
left: 44%;
top: 50%;
background-color: white;
z-index: 100;
height: 400px;
margin-top: -200px;
width: 50px;
margin-left: -300px;
}

.right-links {
border: solid 1px black;
position: fixed;
left: 90%;
top: 50%;
background-color: white;
z-index: 100;
height: 400px;
margin-top: -200px;
width: 50px;
margin-left: -300px;
}

.a-toggle {
float: left;
overflow: hidden;
}
</style>
</head>
<body>
<div id="w-toggle" class="up-links" style="text-align: center; padding-top: 12px;">
UP
</div>
<div id="s-toggle" class="down-links" style="text-align: center; padding-top: 12px;">
DOWN
</div>
<div id="a-toggle" class="left-links a-toggle" style="text-align: center; padding-top: 12px;">
LEFT
</div>
<div id="d-toggle" class="right-links" style="text-align: center; padding-top: 12px;">
RIGHT
</div>
<div class="main">
<p style="padding: 15px;">The WASD keys should trigger boxes to slide out in their respective directions, but only the W/upward direction responds the way it is intended to.<br><br>The A/left direction triggers a box that slides up and down starting from the middle (as does
the D/right direction), but ideally it would move from inside of the box outward.<br><br>The S/downward direction triggers the box to float up from below, rather than from above (to mirror the W/upward direction).</p>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
$('#w-toggle').hide();
$('#a-toggle').hide();
$('#s-toggle').hide();
$('#d-toggle').hide();
$(document).keypress(function(event) {
var keycode = (event.keyCode ? event.keyCode : event.which);
if (keycode == '119' || keycode == '87') {
$('#w-toggle').slideToggle();
$('#a-toggle').hide();
$('#s-toggle').hide();
$('#d-toggle').hide();
} else if (keycode == '97' || keycode == '65') {
$('#w-toggle').hide();
$('#a-toggle').slideToggle();
$('#s-toggle').hide();
$('#d-toggle').hide();
} else if (keycode == '115' || keycode == '83') {
$('#w-toggle').hide();
$('#a-toggle').hide();
$('#s-toggle').slideToggle();
$('#d-toggle').hide();
} else if (keycode == '100' || keycode == '68') {
$('#w-toggle').hide();
$('#a-toggle').hide();
$('#s-toggle').hide();
$('#d-toggle').slideToggle();
}
});
});
</script>
</body>
</html>

有一个主要内容，然后 WASD 键旨在显示附加内容，就好像它从主要内容内部沿按下键的方向(W 向上，A 向左等(出来一样。它适用于"W"(内容从内容下方向上滑动(，但不适用于任何其他方向。"A"使内容已经出现在框外，并在两个方向上垂直展开，而"S"使内容从页面底部向上滑动，而不是从主要内容后面向下滑动。

这是我的第二次尝试，其中 .slideToggle(( 保留了向上方向，但我尝试使用 .animate(( 来为两侧工作。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Bootstrap Practice</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="./stylesheets/styles.css">
<style>
.main {
border: solid 1px black;
position: fixed;
left: 50%;
top: 50%;
background-color: white;
z-index: 100;
height: 400px;
margin-top: -200px;
width: 600px;
margin-left: -300px;
}
.downward-text {
writing-mode: vertical-lr;
text-orientation: upright;
margin: 0!important;
}
.up-links {
border: solid 1px black;
position: fixed;
left: 50%;
top: 42.5%;
background-color: white;
z-index: 100;
height: 50px;
margin-top: -200px;
width: 600px;
margin-left: -300px;
}
.down-links {
border: solid 1px black;
position: fixed;
left: 50%;
top: 96.5%;
background-color: white;
z-index: 100;
height: 50px;
margin-top: -200px;
width: 600px;
margin-left: -300px;
}
.left-links {
border: solid 1px black;
position: fixed;
left: 44%;
top: 50%;
background-color: white;
z-index: 100;
height: 400px;
margin-top: -200px;
width: 50px;
margin-left: -300px;
}
.right-links {
border: solid 1px black;
position: fixed;
left: 90%;
top: 50%;
background-color: white;
z-index: 100;
height: 400px;
margin-top: -200px;
width: 50px;
margin-left: -300px;
}
.a-toggle {
float: left;
overflow: hidden;
}
</style>
</head>
<body>
<div id="w-toggle" class="up-links" style="text-align: center; padding-top: 12px;">
UP
</div>
<div id="s-toggle" class="down-links" style="text-align: center; padding-top: 12px;">
DOWN
</div>
<div id="a-toggle" class="left-links a-toggle" style="text-align: center; padding-top: 12px;">
LEFT
</div>
<div id="d-toggle" class="right-links a-toggle" style="text-align: center; padding-top: 12px;">
RIGHT
</div>
<div class="main"> 
<p style="padding: 15px;">This one is pretty much the same as the last one, except now when you press A/a, instead of expanding from the middle, it slides from left to right (rather than the intended right to left).</p>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<script> 
$(document).ready(function() {
$('#w-toggle').hide();
$('#a-toggle').hide();
$('#s-toggle').hide();
$('#d-toggle').hide();
$(document).keypress(function(event) {
var keycode = (event.keyCode ? event.keyCode : event.which);
if (keycode == '119' || keycode == '87') {
$('#w-toggle').slideToggle();
$('#a-toggle').hide();
$('#s-toggle').hide();
$('#d-toggle').hide();
}
else if (keycode == '97' || keycode == '65') {
$('#w-toggle').hide();
$('#a-toggle').animate({width:'toggle'});
$('#s-toggle').hide();
$('#d-toggle').hide();
}
else if (keycode == '115' || keycode == '83'){
$('#w-toggle').hide();
$('#a-toggle').hide();
$('#s-toggle').slideToggle();
$('#d-toggle').hide();
}
else if (keycode == '100' || keycode == '68') {
$('#w-toggle').hide();
$('#a-toggle').hide();
$('#s-toggle').hide();
$('#d-toggle').animate({width:'toggle'});
}
});
});
</script>
</body>
</html>

使用 .animate((，内容从左向右滑动，因此从技术上讲，它适用于右侧，但左侧向错误的方向滑动，这可以通过按"A"看到。

我还没有弄清楚如何让事情向下工作，但即使我找到了其他一些特定的功能来使其向下工作，这些不同的功能的行为也不同(在第二个链接中，请注意"W"如何从框下方滑动，而"A"首先显示为一条细线，然后展开(。理想的最终目标是一个功能，可以稍微改变以改变幻灯片的方向。如果除了向上、向下、向左和向右之外，还可以对角线滑动，那就更好了。

我不确定解决这个问题的最佳方法是什么。任何建议都会有所帮助！

这里没有jQuery。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Bootstrap Practice</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="./stylesheets/styles.css">
<style>
.main {
position: relative; /* make sure the children of this container is related to it */
display: flex;
align-items: center;
justify-content: center;
border: solid 1px black;
left: 50%;
top: 50%;
background-color: white;
height: 400px;
margin-top: -200px;
width: 600px;
margin-left: -300px;
z-index: 2;
}

.up-links,
.down-links,
.left-links,
.right-links {
display: flex;
justify-content: center;
align-items: center;
border: solid 1px black;
background-color: white;
position: absolute;
z-index: -1;
width: 600px;
height: 50px;
transition: .3s all linear;
}
.left-links,
.right-links {
width: 398px;
transform: rotate(-90deg);
writing-mode: vertical-rl;
text-orientation: mixed;
}

.up-links.move {
top: -51px;
}
.down-links.move {
bottom: -51px;
}

.left-links.move {
left: -37.7%;
}

.right-links.move {
right: -37.7%;
}

.up-links {
top: 0;
}
.down-links {
bottom: 0;
}

.left-links {
left: calc(-37.7% + 50px);
}
.right-links {
right: calc(-37.7% + 50px);
}

.text-wrapper {
position: relative;
z-index: 1;
background: white;
height: 100%;
}
</style>
</head>
<body>
<div class="main">
<div id="w-toggle" class="up-links">
UP
</div>
<div id="s-toggle" class="down-links">
DOWN
</div>
<div id="a-toggle" class="left-links">
LEFT
</div>
<div id="d-toggle" class="right-links">
RIGHT
</div>
<div class="text-wrapper">
<p style="padding: 15px;">The WASD keys should trigger boxes to slide out in their respective directions, but only the W/upward direction responds the way it is intended to.<br><br>The A/left direction triggers a box that slides up and down starting from the middle (as does
the D/right direction), but ideally it would move from inside of the box outward.<br><br>The S/downward direction triggers the box to float up from below, rather than from above (to mirror the W/upward direction).</p>
</div>
</div>

<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

<script>
let wBox = document.getElementById("w-toggle"),
aBox = document.getElementById("a-toggle"),
sBox = document.getElementById("s-toggle"),
dBox = document.getElementById("d-toggle"),
allBoxes = document.querySelectorAll("[class*=-links]");

// make general function to remove classes called .move
function boxesRemoveClass() {
for (box of allBoxes) {
box.classList.remove("move")
};
}
document.addEventListener("keypress", e => {
let theKeyCode = event.keyCode;
// toggle W box
(theKeyCode == '119' || theKeyCode == '87') ? boxesRemoveClass() & wBox.classList.add("move") : "";
// toggle A box
(theKeyCode == '97' || theKeyCode == '65') ? boxesRemoveClass() & aBox.classList.add("move") : "";
// toggle S box
(theKeyCode == '115' || theKeyCode == '83') ? boxesRemoveClass() & sBox.classList.add("move") : "";
// toggle D box
(theKeyCode == '100' || theKeyCode == '68') ? boxesRemoveClass() & dBox.classList.add("move") : "";
})
</script>
</body>
</html>

请注意这些更改

  1. 我对HTML结构和CSS进行了一些关键而重要的更改。
  2. 我没有检查这种方法的响应能力，所以如果你想要它，你最好检查一下

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium