所以我有 4 个不同的房间转换(上、下、左、右)。我希望能够将每个转换设置为转到特定页面,并在再次单击相同转换时重复。
例如,让“left”(数据动画 55)转到“Page1.html”,如果我已经在“Page1.html”上,那么它会直接转换回页面。我会有“右”按钮,转到“Page2.html”等。
https://github.com/cweigen/page_transition_room
有 github 存储库,但这是我一直在弄乱的代码,尝试使用它的不同版本来尝试转到特定页面,如果单击相同的按钮则重复,但转到另一个特定页面是另一个菜单单击按钮。
<div class="pt-triggers">
<div id="dl-menu" >
<ul class="dl-menu">
<li data-animation="54"><a href="#" > right </a></li>
<div class="pt-triggers1">
<li data-animation="55"><a href="#" > left</a></li>
<div class="pt-triggers2">
<li data-animation="56"><a href="#" > down</a></li>
<div class="pt-triggers3">
<li data-animation="57"><a href="#" > up</a></li></div>
</ul>
</div>
</div>
<div id="pt-main" class="pt-perspective">
<div class="pt-page pt-page-1"><iframe src="http://visiondigit.al/VisionDigital_Launch/" width="100%" height="100%"> </iframe></div>
<div class="pt-page pt-page-2"><iframe src="http://scsuchat.com" width="100%" height="100%"> </iframe></div>
</div>
您正在使用的库并不是您任务的最佳选择。然而,它确实提供了多达 67 种不同的过渡效果,这些效果在
**pagetransions.js**
中定义,并使用 data-animation
属性调用。查看 js 文件,您可以选择您要查找的特定动画。
要解决您的其他问题,您必须编写一些自己的代码,因为作者没有提供将每个按钮与特定页面链接的功能,也没有在您已经位于该页面时隐藏该按钮。您可以使用 jQuery 来执行此操作。
但就像我说的,这不是最好的也不是唯一的选择。 检查
我创建了一个主要模仿您的要求的结构。玩一玩并尝试理解演示。结构非常简单。它使用两个外部资源,您可以从小提琴中查看和下载。