Как скользить вправо между двумя HTML-страницами - PullRequest
Новая
       12

Как скользить вправо между двумя HTML-страницами

0 голосов
/ 27 марта 2019

У меня проблемы с переходом между двумя 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>

1 Ответ

1 голос
/ 27 марта 2019

Что по сути делает эта js fiddle - это сдвигать представление на одной и той же странице, а не загружать новую страницу. У jsfiddle есть 2 элемента div (контейнера содержимого), которые фактически находятся на одной странице. Ваша кнопка 

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

- кнопка ссылки на новую страницу. в основном это открывает ссылку до запуска javascript. для того, чтобы javascript был запущен на той же странице, вашим первым шагом будет удаление a href 

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

теперь это будет запускать код без загрузки новой страницы.

вот что-то близко к тому, что вы хотите сделать из моего понимания
- «целевая страница»
или просмотр репозитория github

этот код работает только для меня в 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, чтобы он соответствовал точным значениям вашей страницы. ниже будет ваша посадочная страница.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>

...