如何在 HTML/JS/CSS 的视图中实现导航效果？

Question

我想知道如何让观众感觉像浏览单个页面并像下面的链接一样放大/缩小。

https://pudding.cool/2017/09/hip-hop-words/

我查看了检查员的 css 并且它使用了我没有使用过的背景位置？ 我猜它可能与这个属性有关？

但不确定是什么让页面感觉就像我实际上在放大页面。

缩放前

缩放后

Answer 1

也许这有帮助：（它不会缩放，但它会滚动纸张，因此单击的肖像居中）

 var portrait = $(".portrait"); var paper = $("#paper"); portrait.click(function(e) { var myleft=200-$(this).position().left; paper.css({left: myleft}) })

 #paper {width: 300px; height: 300px; border: 1px solid blue; position: absolute; left: 200px;}.portrait { width: 20px; height: 20px; border: 1px dotted pink; position: relative}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="paper"> <div class="portrait" style="left: 50px; top: 100px">:-) </div> <div class="portrait" style="left: 200px; top: 100px">:-( </div> </div>