我怎样才能制作一个像 jQuery 的 slideUp() 一样的 function，但是对于向上以外的方向？
[英]How can I make a function that acts like jQuery's slideUp(), but for directions other than up?
问题描述
I am trying to construct/find a function that shows/hides content in a way similar to jQuery's.slideUp(), .slideDown(), and.slideToggle(), except able to slide in directions other than just up.
我正在尝试构建/找到一个 function，它以类似于 jQuery 的.slideUp()、.slideDown() 和 .slideToggle() 的方式显示/隐藏内容，除了能够在除了向上之外的方向上滑动。
Here is where I am starting from:这是我的起点：
<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>
There is a main piece of content, and then the WASD keys are intended to show addition content as if it were coming out from inside of the main content in the direction of the key pressed (W is up, A is left, etc.).有一个主要内容，然后 WASD 键用于显示附加内容，就好像它是从主要内容内部沿按键方向（W 向上，A 向左等）出来的一样. It works for 'W' (the content slides up from under the content), but it doesn't work for any of the other directions.它适用于“W”（内容从内容下方向上滑动），但不适用于任何其他方向。 'A' makes content appear already outside of the box and expands it vertically in both directions, while 'S' has content slide up from the bottom of the page rather than sliding down from behind the main content. “A”使内容已经出现在框外并在两个方向上垂直扩展，而“S”使内容从页面底部向上滑动，而不是从主要内容后面向下滑动。
Here is my second attempt, where.slideToggle() is kept for the up direction, but I tried to use.animate() to work for the sides.这是我的第二次尝试， where.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>
With.animate(), the content slides from left to right, so it technically works for the right side, but the left side is sliding in the wrong direction, which can be seen by pressing 'A'.使用.animate()，内容从左向右滑动，所以它在技术上适用于右侧，但左侧滑动方向错误，可以通过按'A'看到。
I haven't figured out how to get things to work in the downward direction at all, but even if I found some other specific function to make it work for the downward direction, these different functions behave differently (in the second link, notice how 'W' slides from under the box, while 'A' first appears as a thin line and then expands).我还没有弄清楚如何让事情在向下的方向上工作，但即使我找到了一些其他特定的 function 使其适用于向下的方向，这些不同的功能表现不同（在第二个链接中，请注意如何“W”从盒子下方滑出，而“A”首先显示为细线，然后展开）。 The ideal end-goal would be one function which can be altered slightly to change the direction of the slide.理想的最终目标是一个 function 可以稍微改变以改变幻灯片的方向。 It would be even better if it can slide diagonally in addition to up, down, left, and right.如果除了上、下、左、右之外，还能对角滑动，那就更好了。
I'm not exactly sure what the best way to approach this problem would be.我不确定解决这个问题的最佳方法是什么。 Any advice helps!任何建议都有帮助！
1 个解决方案
解决方案1
0 2020-06-24 16:48:16
Here it is without jQuery.这里没有 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>
Please notice these changes请注意这些变化
- I have made some critical and important changes to the HTML structure and CSS我对 HTML 结构和 CSS 进行了一些关键且重要的更改
- I didn't check this approach responsiveness so you better check it if you want it responsive我没有检查这种方法的响应性，因此如果您希望它响应，最好检查它
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
如何在 Typescript 中制作一个像真正的“if”一样的 React“If”组件？ - How can I make a React "If" component that acts like a real "if" in Typescript?
jQuery slideUp（）影响其他列表的slideDown（） - jQuery slideUp() effected for other list's slideDown()
当另一个 div 向下滑动时，我如何才能向上滑动一个 div - How can I slideUp a div when a other div slidesDown
你如何创建一个像jquery一样的函数的包装器对象 - how do you create a wrapper object that acts as a function like jquery
jQuery的slideUp函数不适用于我 - jQuery's slideUp function not working properly for me
在填写表格之前，如何防止 jQuery slideUp？ - How can I prevent jQuery slideUp until form is filled?
如何使jQuery的可拖动函数扩展容器？ - How can I make jQuery's draggable function expand the container?
如何使用jQuery在页面上滑动.HTML？ - How can i slideUp a .HTML on my page with jQuery?
如何使SlideUp和slideDown jQuery动画更平滑 - How to make slideUp and slideDown jQuery animation smoother
如何创建一个像表单元素一样的Web组件？ - How can I create a web component that acts like a form element?
相关标签