#javascript #html #css #responsive-design #css-transitions
#javascript #HTML #css #адаптивный дизайн #css-переходы
Вопрос:
У меня возникли проблемы с переходом между двумя 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:
Что по сути делает этот js fiddle, так это смещает представление в пределах одной страницы, а не загружает новую страницу.jsfiddle имеет 2 divs (контейнера содержимого), которые фактически находятся на одной странице. Ваша кнопка
<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, чтобы он соответствовал требованиям вашей страницы. ниже будет ваш 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>