JS 或 CSS 页面在 2 个完整页面之间滑动过渡

2024-01-12

我有两个html页面:Page1.html,Page2.html。 我想在两个页面之间滑动。我发现了很多插件和解决方案可以在两个 div 之间滑动或在容器内滑动,但我需要的是完整的页面更改。

我发现了一些东西 http://www.fasw.ws/faswwp/non-jquery-page-transitions-lightweight/但问题是页面加载时 page2 上的 jquery 代码不会触发。我可以使用 jQuery mobile,但我的项目使用 jQuery ui,它给我带来了一些冲突......所以我需要其他东西。

该项目应该在 iPad 上运行,因此拥有可以拖动的滑动页面会很酷。但我很高兴能为幻灯片找到一个插件。

谢谢。


您几乎没有解决方案,例如使用 Ajax 将内容添加到“新页面”并使用 jQuery 添加一些滑动效果。 Stack Overflow 上有一些关于此的主题:

使用 jQuery 在页面之间滑动 https://stackoverflow.com/questions/9518762/slide-between-pages-using-jquery

页面间滑动效果线索 https://stackoverflow.com/questions/9446921/clues-on-sliding-between-pages-effect

或者只是在页面就绪上添加一些效果,如本示例所示:

<html>
<head>
    <script src="js/jquery-1.7.2.min.js"></script>
    <script>
        $(document).ready(function(){
            $('body div').slideDown();
        });
    </script>
</head>
<body>
    <div style="width: 400px; height: 400px; background-color: blue; display: none;">
        <a href="page2.htm" style="color: white;">PAGE 2>></a>
    </div>
</body>
<html>
<head>
    <script src="js/jquery-1.7.2.min.js"></script>      
    <script>
        $(document).ready(function(){
            $('body div').slideDown();
        });
    </script>
</head>
<body>
    <div style="width: 400px; height: 400px; background-color: red; display: none;">
        <a href="page1.htm" style="color: white;">PAGE 1>></a>
    </div>
</body>

祝你好运!

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

JS 或 CSS 页面在 2 个完整页面之间滑动过渡 的相关文章

  • 如何从 JSON 响应重定向?

    所以我尝试使用 Flask 和 Javascript 上传器 Dropzone 上传文件并在上传完成后重定向 文件上传正常 但在烧瓶中使用传统的重定向 return redirect http somesite com 不执行任何操作 页面
  • 扩展位置绝对div超出溢出隐藏div

    我已经好几个月没有做过CSS了 所以我可能会错过一些简单的东西 但无论解决方案是什么 我都无法弄清楚 所以问题就在这里 这是我的代码的简化版本 div style height 100 width 200px div style margi
  • 如何更改自动完成中的结果过滤器?

    我不想进行字面匹配 而是想通过正则表达式选择结果 我可以覆盖自动完成的默认行为来完成此任务还是需要替代结构 有一个内置的方法可以做到这一点 只需提供一个函数source http jqueryui com demos autocomplet
  • 如何在CSS中制作一个带有边框的可调整大小的心形

    我想要制作一个心形 用户可以将其大小调整为任意宽度和高度 并且边框为 1 像素 我尝试了用纯 CSS 制作的心形 https stackoverflow com a 17386187 1404447 https stackoverflow
  • 在管道中重用变量的功能方式

    在 javascript 和 typescript 中与 Ramda 一起使用函数式编程 我经常发现自己编写如下代码 const myFun c gt const myId c id const value pipe getAnotherO
  • Jquery 在 DIV 中进行多重加载

    这是我的代码 right load textes html nicolas right load textes html antoine 问题是内容divantoine覆盖了右边div nicolas加载的内容div div right l
  • 如何使用 vanilla JS 实现可维护的反应式 UI

    今天我遇到了一个问题 可以通过使用像 Vue 这样的反应式和状态管理框架来轻松解决 遗憾的是 无法使用它 以下 简化 情况 链接到代码笔 https codepen io theiaz pen BazErKV 我们有一个服务器渲染的页面 其
  • 即使在包裹后也具有等宽的弹性项目

    是否可以制作一个像这样的纯 CSS 解决方案 物品有一些min width 它们应该动态增长以填充所有容器宽度 然后换行到新行 列表中的所有项目都应具有相同的宽度 现在看起来是这样的 这就是我希望它看起来像的样子 我已经手动管理这些底部项目
  • 将 CSS 生成的三角形拆分为 2 个水平不同的相同颜色

    正如您应该能够通过此代码看到的那样fiddle http jsfiddle net Xh36r 1 以及下面 我希望能够分割显示在第二个 div 顶部的 CSS 生成的三角形水平均等在 之间orange and green使用的颜色 现在它
  • HTML 元素的默认背景颜色是什么?白色还是透明?

    我只是被一个简单的问题困住了 想弄清楚 HTML 元素的默认背景颜色是什么 是白色的还是透明的 默认背景颜色是透明的 看这里 https developer mozilla org en docs Web CSS background co
  • 元素和 svg 形状之间的白线

    大家好 我正在使用由 shapedivider 生成的 svg 整形器 您可以看到 有一条白线 我不知道为什么它在那里以及如何删除它 请你帮助我好吗 有形状分隔符的代码 custom shape divider bottom 1640714
  • IE 中的每个 JavaScript 支持?

    我有这个代码
  • 将 HTML 表格导出到 Excel

    我在 ASP NET MVC 视图页面上有 HTML 表 现在我必须将该表导出到 Excel 1 我使用部分视图 Inquiries ascx 来显示数据库中的表数据 使用LINQ to Entity 2 我还使用了 UITableFilt
  • Node.js - 重载函数

    有没有一种方法可以重载node js中的函数 类似于 noSuchMethod https developer mozilla org en JavaScript Reference Global Objects Object noSuch
  • 在 HTML5 iOS 7 / iOS 8 中显示十进制键盘

    经过几个小时的搜索后 我只是有一个简单的问题 是否有可能在网络浏览器输入字段中显示小数键盘 input type number 只显示数字 但我需要在左下角使用逗号或点 我尝试过任何事情 pattern step等等 但没有显示十进制键盘
  • Node npm 包抛出使用严格:全局发布和安装后未找到命令

    我正在尝试发布 npm 包 当我全局安装该包并尝试运行 cli 命令时 我收到此错误 nvm versions node v0 12 2 bin myPack line 1 use strict command not found nvm
  • 如何使用 jQuery 或 JavaScript 聚焦 或 标签?

    for var i 0 i
  • 将 RequireJS 与遗留代码结合使用

    我正在处理一个非常大的项目 该项目使用 包含带有脚本标记的 javascript 文件的旧版 JSP 页面 使用其他 javascript 模块而不使用 RequireJS 的骨干模型和视图 现在 我们希望开始将 RequireJS 与 j
  • 在 PHP 中模拟 jQuery.ajax 请求

    我必须在 PHP 中模拟 AJAX 请求 就像在 jQuery 中一样 我当前的代码在这里 原始 AJAX 调用 不得修改 ajax type POST url someFile php data data success function
  • 如何从 bootstrap-markdown.js 调用 .getContent 和 .parseContent

    我是使用 Bootstrap 插件的新手 刚刚通过代码学院 http www codecademy com en skills make an interactive website 我真的很想用这个很棒的引导 Markdown 插件 ht

随机推荐