如何在两个HTML页面之间向右滑动

Question

Im having trouble with transitioning between two html pages. 我在两个HTML页面之间进行转换时遇到麻烦。 When the enter button is pressed you will be brought to another page, When this button is pressed the page should simply slide in from the right. 当按下回车按钮时，您将带到另一页。当按下此按钮时，页面应从右侧滑入。 http://jsfiddle.net/fs488b3r/5/ in this fiddle is a perfect example of what Im looking for. http://jsfiddle.net/fs488b3r/5/在这个小提琴中是我正在寻找的完美示例。

Ive tried this code with my own code however it doesn't seem to be working the way it should. 我已经用我自己的代码尝试过此代码，但是它似乎并没有按照预期的方式工作。 Anyone know how I can fix this? 有人知道我该如何解决吗？ or properly implement this? 或正确实施？ Below is my code, Any help would be much appreciated 下面是我的代码，任何帮助将不胜感激

<!DOCTYPE html>
<html>
<head>
<title>Landing Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

<style type="text/css">

@font-face {
font-family: Geoma Regular Demo;
src: url(Geoma Regular Demo.otf);
}


@font-face {
font-family: Geoma Demo;
src: url(Geoma Light demo.otf);
}





@media screen and (max-width: 425px){

html,body{
overflow-x: hidden;
    width: 100%;
    margin: 0;
}


#logo {
margin: 0 auto;
display: block;
margin-top: 50px;}


h1 {color: white;
text-align: center;
font-family: Geoma Regular Demo;
font-size: 28px;
margin: 0;
padding-bottom: 25px;}

p{text-align: center;
color: white;
font-size: 16px;
font-family: Geoma Demo;
margin: 0 ;
padding-bottom: 35px;
}

#enter {margin: 0 auto;
display: block;
font-size: 16px;
color: white;
font-family: Geoma Demo;
border: 2px solid white;
background-color:#0BF446 ;
border-radius: 0 15px 0 15px;
padding: 10px 30px;}

#enter:hover {background-color:#04A12B;}

.green {margin-top: 50px;
background-color: #0BF446;
border-radius: 20px 20px 0 0;
padding: 40px 30px 30px 30px;
position: absolute;
bottom: 0;
top: 150px;
}



}


</style>

</head>
<body>

<img src="biglogo.png" id ="logo">

<div class = "green">
<h1>Welcome to Elemental!</h1>

<p>Elemental is an interactive platform,
that allows creative people to discover and
explore design elements inspired by nature
throughout the world</p>


<a href="homepage.html"><button id = "enter">Enter</button></a>



</div>

<script>

function transitionPage() {
    // Hide to left / show from left
    $("#enter").toggle("slide", {direction: "left"}, 500);

    // Show from right / hide to right
    $("#about-2").toggle("slide", {direction: "right"}, 500);
}

$(document).ready(function() {
    $('#enter').click(transitionPage);
    $('#about-2').click(transitionPage);
});


</script>
</body>
</html>

Answer 1

What this js fiddle essentially does is shift the view within the same page, not load a new page.the jsfiddle has 2 divs (containers of content) which are actually on the same page. 这个js小提琴实质上是在同一页面内移动视图，而不是加载新页面.jsfiddle实际上有2个div（内容容器）在同一页面上。 Your button 您的按钮

<a href="homepage.html"><button id = "enter">Enter</button></a>

is a button link to the new page. 是指向新页面的按钮链接。 basically this opens the link before the javascript is run. 基本上，这会在运行javascript之前打开链接。 for the javascript to be run on the same page, your first step, would be to remove the a href 为了使javascript在同一页面上运行，第一步是删除a href

<button id = "enter">Enter</button>

now this would run the code without loading the new page. 现在，这将在不加载新页面的情况下运行代码。

here is something close to what you want to do from my understanding 根据我的理解，这很接近您想要做的事情
- the "landing page" - “目标网页”
or view the github repo 或查看github仓库

this code only works for me within the jsfiddle, below is just the javascript portion. 此代码仅在jsfiddle中对我有效，下面仅是javascript部分。

function transitionPage() {
// Hide to left / show from left
$("#about-1").toggle("slide", {direction: "left"}, 500);

window.open("homepage.html","_self");


// Show from right / hide to right
$("#about-2").toggle("slide", {direction: "right"}, 500);
}

$(document).ready(function() {
$('#about-1').click(transitionPage);
$('#about-2').click(transitionPage);
});

this would be everything in one page (except jquery which is linked) , also fix your css to match the exacts of your page. 这将是一页中的所有内容（链接的jquery除外），还可以修复CSS以匹配页面的精确度。 below would be your landingpage.html 下面是您的Landingpage.html

<!DOCTYPE html>
<html>
<head>
<title>Landing Page</title>


<link rel="stylesheet" 
href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="Scripts/js/jquery-3.3.1.min.js"></script>


<style type="text/css">
html, body {
font: normal normal 16px Arial;
width: 100%;
height: 100%;
}

p {
font-size: 20px;
margin: 100px 0 0 0;
}

.nodisplay {
display: none;
}

#about {
position: relative;
width: 100%;
height: 100%;
}

.page {
position: absolute;
width: 100%;
height: 100%;
text-align: center;
}

#logo {
margin: 0 auto;
display: block;
margin-top: 50px;}


#about-1 {
background-color: #003366;
color: #FFFFFF;
display:inline-block;
}

#about-2 {
background-color: #F6BC0C;
color: #000000;
float:left;
}
</style>

<script>
function transitionPage() {
// Hide to left / show from left
$("#about-1").toggle("slide", {direction: "left"}, 500);

window.open("homepage.html","_self");


// Show from right / hide to right
$("#about-2").toggle("slide", {direction: "right"}, 500);
}

$(document).ready(function() {
$('#about-1').click(transitionPage);
$('#about-2').click(transitionPage);
});
</script>

</head>


<body>
<img src="biglogo.png" id ="logo">

<div id="about">
<div id="about-1" class="page">
    <p>Welcome to Elemental!
Elemental is an interactive platform, that allows creative people to 
discover and explore design elements inspired by nature throughout the 
world</p>
<br>
<button id = "enter" style="color:#000">Enter</button>
</div>
<div id="about-2" class="page nodisplay">
    <p>Content for about 2</p>
</div>
</div>


</body>
</html>

then you just need your second page 那你只需要第二页

<html>
<head>
<title>
    Page 2
</title>
 <link rel="stylesheet" 
href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css">
<style>

html, body {
font: normal normal 16px Arial;
width: 100%;
height: 100%;
background-color: #F6BC0C;
}

#about-2 {
background-color: #F6BC0C;
color: #000000;
float:left;
}

.page {
position: absolute;
width: 100%;
height: 100%;
text-align: center;
}
p {
font-size: 20px;
margin: 100px 0 0 0;
}
</style>
</head>
<body>



<div id="about-2" class="page nodisplay">
    <p>Content for about 2</p>
</div>
</body>

如何在两个HTML页面之间向右滑动

问题描述

1 个解决方案

解决方案1
1 2019-03-26 21:32:18

如何在两个HTML页面之间向右滑动

问题描述

1 个解决方案

解决方案1 1 2019-03-26 21:32:18

解决方案1
1 2019-03-26 21:32:18