Question

我无法在两个html页面之间进行转换。当按下回车按钮时，您将带到另一页。当按下此按钮时，页面应从右侧滑入。 http://jsfiddle.net/fs488b3r/5/是我正在寻找的东西的一个完美示例。

我已经用我自己的代码尝试了此代码，但是它似乎并没有按照预期的方式工作。有人知道我该如何解决吗？或正确实施？下面是我的代码，任何帮助将不胜感激

<!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

这个js小提琴实质上是在同一页面内移动视图，而不是加载新页面.jsfiddle实际上有2个div（内容容器）在同一页面上。您的按钮

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

是指向新页面的按钮链接。基本上，这会在运行javascript之前打开链接。为了使javascript在同一页面上运行，第一步是删除a href

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

现在，这将在不加载新页面的情况下运行代码。

根据我的理解，这是您想要做的事情
- the "landing page"
或 view the github repo

此代码仅在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);
});

这将是一页中的所有内容（链接的jquery除外），还修复了CSS以匹配页面的精确度。下面是您的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>

那你只需要第二页

<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 个答案: