我想在单击图像时产生与Pinterest相同的效果:打开模态窗口,但页面的URL也更改。最后一部分至关重要:浏览器地址栏中的URL已更改,但我们仍在后台看到原始页面内容(这就是为什么我称它为模式的原因,尽管它可能比这复杂得多)。
我理想地在寻找jQuery解决方案。

[编辑]
我应该补充一点,当然,Pinterest的行为不会破坏返回按钮,这也是至关重要的。

最佳答案

这是我对 Pinterest 如何实现其独特模态外观以及如何复制它的评估。

首先,URL链接处理是服务器端分析的,以查看链接是否源自Pinterest网站本身。就是说,浏览器URL地址栏历史是动态创建的,而实际上不是访问者执行的

需要说明的是:在进行模型体验时,地址栏不是您的实际位置!为了证明这一点,请单击 Pinterest对象,然后在模式 View 中转到地址栏,然后在该URL位置的最后,将鼠标光标放在此处,然后单击输入。然后,您将自己重定向到位置!要进一步确认您从未离开过主页,请在Firebug / Firefox中查看网络选项卡,在Chrome中查看网络选项卡

访问主页时, Pinterest 正在执行以下方法。请小心查看:

  • 显示主页。
  • 等待访问者单击Pinterest对象。
  • 单击的对象具有用于直接访问的唯一网页。
  • 不遵循单击的对象。
  • 浏览器栏将使用此单击的对象位置填充自己,但您所在的位置实际上并不存在。
  • 浏览器历史记录将通过JavaScrict或服务器端处理接收点击的位置。
  • AJAX将从对象的页面加载一段数据(通过ID的模式数据)。可通过HTTPRequest验证。
  • 主页上单击的对象已消失(可以通过Inspect Element进行验证)。
  • AJAX进程会将这些数据放置在屏幕中央,并带有白色覆盖层。
  • 当AJAX“模态”数据通过#zoomScroll接收滚动事件时,滚动主页被禁用。
  • 单击模式背景将对象返回到网页,URL地址栏将“以可视方式”还原。

  • 为了重新创建 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/

    10-12 01:08
    查看更多