个人中心
gpt4 book ai didi

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

转载 作者：太空宇宙 更新时间：2023-11-04 06:22:28 25 4
gpt4 key购买 nike

我在两个 html 页面之间转换时遇到问题。当按下回车按钮时，您将被带到另一个页面，当按下此按钮时，页面应该只是从右侧滑入。 http://jsfiddle.net/fs488b3r/5/在这个 fiddle 中是我正在寻找的一个完美例子。

我已经用我自己的代码尝试过这段代码，但它似乎没有按应有的方式工作。任何人都知道我该如何解决这个问题？或正确实现这个？下面是我的代码，任何帮助将不胜感激

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

最佳答案

这个 js fiddle 本质上做的是在同一页面内移动 View ，而不是加载新页面。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>

关于javascript - 如何在两个 HTML 页面之间向右滑动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55366218/

25 4 0
文章推荐： c - 我正在尝试将 char 打印到输出文件，但是，我的编译器说我正在打印 int
文章推荐： python - 导入 Myro 未找到的 win32 文件
文章推荐： c++ - 为 C++ 库编写 C 包装器？
文章推荐： python - 使用 Python 进行多元分布
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com