个人中心
gpt4 book ai didi

javascript - 图片页面过渡

转载 作者：太空宇宙 更新时间：2023-11-04 08:30:59 26 4
gpt4 key购买 nike

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

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

我知道您可以将 CSS Transitions 用于动画，但我感到困惑的是您如何加载一个全新的页面(SEO 的不同页面)并使图像看起来永远不会重新加载？

最佳答案

history.pushState()

The DOM window object provides access to the browser's history through the history object. It exposes useful methods and properties that let you move back and forth through the user's history, as well as -- starting with HTML5 -- manipulate the contents of the history stack.

pushState() takes three parameters: a state object, a title (which is currently ignored), and (optionally) a URL.

和AJAX

AJAX stands for Asynchronous JavaScript And XML. In a nutshell, it is the use of the XMLHttpRequest object to communicate with servers. It can send and receive information in various formats, including JSON, XML, HTML, and text files. AJAX’s most appealing characteristic is its "asynchronous" nature, which means it can communicate with the server, exchange data, and update the page without having to refresh the page.

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

操纵历史允许用户来回导航，就像他们以传统方式导航到新位置时一样。

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

组合方法的效果是点击图片后:

  • 图像展开。
  • 其余内容要么被隐藏，要么被覆盖。
  • 获取新数据。
  • 显示新数据。
  • 历史已更新。
  • 在用户看来他们已经导航到一个新位置(并且他们的浏览器历史记录会显示他们这样做了)，但他们最初点击的图像始终保留在他们的屏幕上。

一个未经提炼的基本演示:

虽然不是完全功能，但如果由 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>

关于javascript - 图片页面过渡，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44791544/

26 4 0
文章推荐： java - 在 Acceleo 中注释模板 (ModuleElements)
文章推荐： java - 如何使用ast解析器获取信息
文章推荐： Java Web Start 和主类
文章推荐： java - 错误消息: "identifier expected"
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com