我想在单击图像时产生与Pinterest相同的效果:打开模态窗口,但页面的URL也更改。最后一部分至关重要:浏览器地址栏中的URL已更改,但我们仍在后台看到原始页面内容(这就是为什么我称它为模式的原因,尽管它可能比这复杂得多)。
我理想地在寻找jQuery解决方案。
[编辑]
我应该补充一点,当然,Pinterest的行为不会破坏返回按钮,这也是至关重要的。
最佳答案
这是我对 Pinterest 如何实现其独特模态外观以及如何复制它的评估。
首先,URL链接处理是服务器端分析的,以查看链接是否源自Pinterest网站本身。就是说,浏览器URL地址栏和历史是动态创建的,而实际上不是访问者执行的。
需要说明的是:在进行模型体验时,地址栏不是您的实际位置!为了证明这一点,请单击 Pinterest对象,然后在模式 View 中转到地址栏,然后在该URL位置的最后,将鼠标光标放在此处,然后单击输入。然后,您将自己重定向到位置!要进一步确认您从未离开过主页,请在Firebug / Firefox中查看网络选项卡,在Chrome中查看网络选项卡。
访问主页时, Pinterest 正在执行以下方法。请小心查看:
#zoomScroll
接收滚动事件时,滚动主页被禁用。 为了重新创建 Pinterest 使用的模型效果,我将研究支持 HTML / iframed 内容的其他灯箱的。查看上面过程中编号的步骤将显示如何实现您的网站所需的外观。
关键步骤是将灯箱设置为使用所有视口(viewport)的,并根据需要修改灯箱CSS规则,以避免出现任何“关闭按钮”皮肤图形和边框。
然后,灯箱可以使用单个模板文件和AJAX填充的
div
。所述div
在半透明背景上的视口(viewport)中水平居中。 iframe本身是透明的,这将允许基础主页显示出来。抛出一些类似于 Pinterest 的滚动规则,您可以使用体面的克隆方法。
至于复制 Pinterest页面布局,请参阅此SO Answer。
要使用自定义 Pinterest按钮,即文本链接,缩略图或两者的组合,请参阅此SO Answer。
有关使用jsFiddle教程的 Data Scrape Pinterest 流程的信息,请参见此SO Answer。
关于jquery - 如何复制Pinterest网站的模式效果?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/11252579/