`history.pushState()`

Question

有没有人知道如何在不重新加载的情况下将图像转换到另一个页面。 http://nahelmoussi.com/就是一个很好的例子。

当您点击案例研究图像时，图像会变大并停留在页面上。

我知道你可以使用CSS Transitions来制作动画，但我感到困惑的是你如何加载一个新的页面（SEO的不同页面）并使它成为一个看起来不像它的图像重装？

Answer 1

`history.pushState()`

DOM窗口对象可通过历史记录对象访问浏览器的历史记录。它公开了有用的方法和属性，让您可以在用户的历史记录中来回移动，以及 - 从HTML5开始 - 操纵历史记录堆栈的内容。

pushState()有三个参数：状态对象，标题（当前被忽略）和（可选）URL。

和AJAX

AJAX代表异步JavaScript和XML。简而言之，它是使用XMLHttpRequest对象与服务器通信。它可以以各种格式发送和接收信息，包括JSON，XML，HTML和文本文件。 AJAX最吸引人的特点是它的异步＆＃34;自然，这意味着它可以与服务器通信，交换数据，更新页面而无需刷新页面。

在动画图像后，我们可以通过附加新位置来更新浏览器的历史记录，并使用AJAX来获取新内容。

操纵history允许用户以与他们以传统方式导航到新位置时相同的方式来回导航。

我们可以使用AJAX获取新数据，并可选择更改部分或全部页面内容以显示此新数据。

组合方法的效果是点击图像后：

图片展开。
其余内容隐藏或覆盖。
获取新数据。
显示新数据。
history已更新。
用户觉得他们已导航到新位置（他们的浏览器历史记录会显示他们确实如此），但他们最初点击的图片始终保留在他们的屏幕上。

一个未经过定义的基本演示：

虽然不是完全功能，但如果由localhost提供，这将展示该过程的基本原理。问题的范围对于狭窄的演示来说太宽了，而且足够广泛的演示以展示完整的功能需要构建整个演示网站。

<!DOCTYPE html>
<html>
  <head>
    <title>Page 1</title>
    <script async>
      ( function( W, D ) {
        var handlePopstate = function( evt ) {
            // handle history navigation through evt.state
            console.log( evt.state );
          },
          getNewContentAndUpdateHistory = function( d, p ) {
            // create and call ajax for new content using destination URL
            console.log( d );
            // update the browser's history and the history.state
            history.pushState( { ps: p }, "", d );
            // handle history navigation through history.state
            console.log( history.state );
          },
          init = function() {
            D.addEventListener( "click", function( evt ) {
              var trg = evt.target;
              if ( trg.tagName.toLowerCase() === "img" && !trg.classList.contains( "bg" ) ) {
                var dest = trg.getAttribute( "data-href" ),
                  page = /(\d+)/.exec( dest )[ 1 ];
                trg.classList.add( "bg", "_" + page );
                // load, parse and display new content and update the browser's history
                getNewContentAndUpdateHistory( dest, page );
              }
            }, false );
          };
        if ( /^(?:complet|interactiv)e$/.test( D.readyState ) ) {
          init();
        } else {
          W.addEventListener( "DOMContentLoaded", init, false );
        }
        W.addEventListener( "popstate", handlePopstate, false );
      } ( window, document ) );
    </script>
    <style>
      html {
        font-size: 10px;
      }
      body {
        font-family: sans-serif;
        font-size: 1.6rem;
        margin: 0;
        padding: 0;
      }
      img {
        position: relative;
        display: block;
        width: 400px;
        height: 200px;
        cursor: pointer;
        transition: width 1s, height 1s;
      }
      .bg {
        position: absolute;
        width: 100vw;
        height: 100vh;
        top: 0;
        left: 0;
        cursor: default;
      }
      ._2 {
        z-index: 2;
      }
      ._3 {
        z-index: 3;
      }
      ._4 {
        z-index: 4;
      }
    </style>
  </head>
  <body>
    <h1>Foo</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<img src="http://lorempixel.com/400/200" data-href="page/2/"></p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<img src="http://lorempixel.com/400/200" data-href="page/3/"></p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<img src="http://lorempixel.com/400/200" data-href="page/4/"></p>
  </body>
</html>

图像页面转换

1 个答案:

`history.pushState()`

和AJAX

一个未经过定义的基本演示：