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

[编辑]
我应该补充一点,当然Pinterest行为不打破后退按钮,这是,再次,至关重要。

解决方法

这是我对Pinterest如何实现它独特的模式外观和如何复制它的评估。

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

澄清:地址栏不是实际的模型体验发生的地方!为了证明这一点,点击Pinterest对象,当在模态视图中转到地址栏,在该URL位置的结尾,将鼠标光标放在那里,然后点击enter。然后您将自己重定向到该位置!为了进一步验证您从未离开主页,请在Firebug / Firefox或Chrome中的“网络标签”中查看Net标签。

以下方法是Pinterest在访问主页时所做的。请查看姜:

>显示首页。
>等待访问者点击Pinterest对象。
>点击的对象具有用于直接访问的唯一网页。
>未跟踪单击的对象。
>浏览器栏将填充这个点击的对象位置,但你实际上不在那里。
>浏览器历史记录将通过JavaScrict或服务器端处理接收单击的位置。
> AJAX将从对象的页面加载一块数据(通过ID模式的肉)。可通过HTTPRequest验证。
>主页面上的单击对象已消失(这可以通过Inspect Element验证)。
> AJAX过程会将该条数据放置在屏幕中央,并带有白色覆盖。
>滚动主页被禁用,而AJAX“模态”数据通过#zoomScroll接收滚动事件。
>点击模态背景将对象返回到网页,并且URL地址栏被“视觉”恢复。

重新创建模型效果Pinterest使用我会调查支持HTML / iframed内容的不同灯箱。查看上述编号步骤将显示如何为您的网站实现所需的外观。

关键步骤是设置lightBox使用所有的视口,修改lightBox CSS规则,如果需要避免任何关闭按钮皮肤图形和边框。

然后,lightBox可以使用由AJAX填充的div的单个模板文件。所述div在半透明背景上的视口中水平地居中。 iframe本身是透明的,这将允许底层主页显示。

抛出一些类似于Pinterest的滚动规则,你有一个体面的克隆方法使用。

至于复制Pinterest的页面布局,参见SO Answer

要使用自定义Pinterest按钮,即文本链接,缩略图或两者的组合,请参阅SO Answer

对于数据Scrape处理与jsfiddle教程,参见这SO Answer

jquery – 如何复制Pinterest网站的模式效果?的更多相关文章

  1. HTML5 播放 RTSP 视频的实例代码

    目前大多数网络摄像头都是通过 RTSP 协议传输视频流的,但是 HTML 并不标准支持 RTSP 流。本文重点给大家介绍HTML5 播放 RTSP 视频的实例代码,需要的朋友参考下吧

  2. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现,如何实现爱心点赞功能,这篇文章主要为大家详细介绍了jquery点赞功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  3. 浅析HTML5中的download属性使用

    这篇文章主要介绍了浅析HTML5中的download属性使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  4. HTML5 Blob 实现文件下载功能的示例代码

    这篇文章主要介绍了HTML5 Blob 实现文件下载功能的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  5. web字体加载方案优化小结

    这篇文章主要介绍了web字体加载方案优化小结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  6. ios – 在WKWebView中获取链接URL

    我想在WKWebView中获取tapped链接的url.链接采用自定义格式,可触发应用中的某些操作.例如HTTP://我的网站/帮助#深层链接对讲.我这样使用KVO:这在第一次点击链接时效果很好.但是,如果我连续两次点击相同的链接,它将不报告链接点击.是否有解决方法来解决这个问题,以便我可以检测每个点击并获取链接?任何关于这个的指针都会很棒!解决方法像这样更改addobserver在observeValue函数中,您可以获得两个值

  7. ios – 加载空白页面的SFSafariViewController

    我正在使用SFSafariViewController在我的iOS应用程序中打开一个URL..它在iOS9上完美运行但在将我的设备更新到iOS10后,它只是在地址栏中加载了一个没有URL的空白页面.甚至safariViewController(控制器:SFSafariViewController,didCompleteInitialLoaddidLoadSuccessfully:Bool)在控制器

  8. ios – 应用更新,NSURL和文档目录

    我应该存储相对图像网址或字符串来表示这些资源的位置,还是应该可以存储最终成为绝对网址的内容?

  9. ios – 从Facebook这样的任何URL获取特定图像

    我的问题看起来可能与其他问题类似,但事实并非如此.(据我所知).我无法理解如何从任何URL获取特定图像像Facebook一样,我无法向您显示屏幕截图,因为我没有真正的设备.但我可以告诉你Skype的屏幕截图来自MAC.任何帮助将不胜感激.thanks.编辑:我使用这个link获得了favicon,但它非常小我想要更大的尺寸.解决方法最后,我得到了答案.这可能对你有帮助,这就是为什么我发布这个答案.

  10. ios – 资产目录与文件夹参考:何时使用其中一个?

    我可以将文件放入Assets.xcassets,或者我可以将文件放入文件夹引用.我何时会选择一个而不是另一个?

随机推荐

  1. jquery-plugins – 是否可以使用猫头鹰旋转木马实现循环/无限轮播?

    我正在使用猫头鹰旋转木马,它的工作完美,除了它不支持循环/无限滚动.我没有搜索google和stackoverflow的想法,没有运气.有没有人在猫头鹰旋转木马上实现圆形/无限滚动?

  2. jQuery动态输入字段焦点

    我想使用以下jQuery向我的页面动态添加一个输入字段:在这样做之后,我希望输入字段具有闪烁的文本光标的焦点,所以我想在创建后立即输入.有人可以告诉我我该怎么办?

  3. jquery – 为什么$(window).height()这样错了?

    我试图获取当前浏览器的视口高度,使用但我得到的价值观太低了.当视口高度高达850px时,我从height()获取大约350或400像素的值.这是怎么回事?

  4. jquery – 如果在此div之外和其他draggables内部(使用无效和有效的还原选项),则可拖动恢复

    例如这样但是由于明显的原因,这不行.我可以说这个吗?

  5. 创建一个jQueryUI 1.8按钮菜单

    现在jQueryUI1.8已经出来了,我正在浏览更新,并且遇到了新的Buttonwidget,特别是SplitButtonwithadropdown的演示之一.这个演示似乎表明Buttonwidget可以在这里创建一个下拉菜单.作为讨论的问题,我想知道使用这个新的Button小部件来创建一个下拉菜单有什么方法.干杯.解决方法您必须在按钮下方列出一个列表,方式类似于此处为自动完成提供的演示:http

  6. 灰色divs使用JQuery

    我试图使用这个代码:为了淡出一大堆名为MySelectorDiv的div,唯一的是,它只会淡出第一个而不是所有的div,为什么呢?

  7. 使用jQuery动态插入到列表中

    我有两个订单列表在彼此旁边.当我从一个列表中选出一个节点时,我想按照字母顺序插入到另一个列表中.抓住的是我想要把一个元素放在另一个列表中,而不刷新整个列表.奇怪的是,当我插入到右边的列表中,它工作正常,但是当我插入到左边的列表中时,顺序永远不会出来.我也尝试将所有内容读入数组,并将其排序在一起,以防止children()方法没有按照显示顺序返回任何东西,但是我仍然得到相同的结果.这是我的jQuer

  8. 没有回应MediaWiki API使用jQuery

    我试图从维基百科获取一些内容作为JSON:但我没有回应.如果我粘贴到浏览器的地址栏,就像我得到预期的内容.怎么了?解决方法您需要通过添加&callback=?来触发具有$.getJSON()的JSONP行为?在querystring上,像这样:Youcantestithere.没有使用JSONP,你正在击中same-originpolicy,阻止XmlHttpRequest获取任何数据.

  9. jQuery Ajax请求每30秒

    我有这段代码,但是有些人在我的网站上的值可能会改变.我需要每30秒钟更新一次#financediv.这可以做吗解决方法您可以将代码放在单独的函数中,如下所示:然后每30秒建立一个定时器调用该函数:祝你好运!总结以上是DEVMAX为你收集整理的jQueryAjax请求每30秒全部内容。如果觉得DEVMAX网站内容还不错,欢迎将DEVMAX网站推荐给好友。

  10. jquery – keypress事件在IE和Chrome中不工作,但在FF工作

    任何想法为什么会这样发生?我通常认为Chrome会更加宽容代码?这是我的按键键.我错过了什么吗?右图();和leftimage();是应该工作的功能,因为我在其他地方使用这些功能谢谢您的帮助!

返回
顶部