jquery滚动以锚定不同的页面水平图像

Question

我需要一些 JavaScript 帮助！

我有两页。一个有图像缩略图，另一个页面有在水平滚动导航中放大的相同图像（这里的图像大小约为 600 像素高度）。

所以第一页（selected.html）看起来像这样：

    <div class="thumbs">    

    <a href="work.html#1"><img src="images/1.jpg" height="170"></a>
    <a href="work.html#2"><img src="images/2.jpg" height="170"></a>
    <a href="work.html#3"><img src="images/3.jpg" height="170"></a>
    <a href="work.html#4"><img src="images/4.jpg" height="170"></a>
    <a href="work.html#5"><img src="images/5.jpg" height="170"></a>
    <a href="work.html#6"><img src="images/6.jpg" height="170"></a>
    <a href="work.html#7"><img src="images/7.jpg" height="170"></a>
    <a href="work.html#8"><img src="images/8.jpg" height="170"></a>
</div>

第二页（work.html）看起来像这样：

<div class="images">    

    <a name="1"><img src="images/1.jpg"></a>
    <a name="2"><img src="images/2.jpg"></a>
    <a name="3"><img src="images/3.jpg"></a>
    <a name="4"><img src="images/4.jpg"></a>
    <a name="5"><img src="images/5.jpg"></a>
    <a name="6"><img src="images/6.jpg"></a>
    <a name="7"><img src="images/7.jpg"></a>
    <a name="8"><img src="images/8.jpg"></a>

</div>

页面的css：

.thumbs {

    margin-top: 60px;   
    margin-left:auto;
    margin-right:auto;  
    text-align: center;}

.thumbs img {

    padding: 10px 10px 10px 10px;}


.images  {

        white-space: nowrap; width: auto; margin-top: 25px; }

.images img {

        padding: 0 50px 0 50px; margin: 50px 0 0 0; max-width: 100%; height: auto; width: auto\9; /* ie8 */ }

我的问题是...我需要什么代码，以便当我单击 selected.html 页面中的一个缩略图时，它会将我带到 work.html 页面并自动滚动到同一图像的锚 id（并在页面中水平居中）？我试过滚动到插件没有运气。

任何知道自己在做什么的人的帮助将不胜感激！

谢谢。

Answer 1

对于传递数据，在您的情况下是图像的 id，从一个页面到另一个页面，您可以使用 localstorage html5。
例如，如果您有这个名为 p1.html 的页面并带有此代码

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('a').click(function(){
        var id=$(this).attr('id')
        localStorage["idImage"] = id;
    })
})
</script>
</head>
<body>
<div class="thumbs">
    <a id="image1" href="p2.html"><img src="one.jpg" width="110" height="80"></a>
    <a id="image2" href="p2.html"><img src="two.jpg" width="110" height="80"></a>
</div>
</body>
</html>

和另一个名为 p2 的页面使用此代码

<!DOCTYPE HTML>
<html>
<head>
<style>
img{display:none;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    var id=localStorage["idImage"]
    $('#'+id).show()
    alert(id)
})
</script>
</head>
<body>
<img id="image1" src="big-one.jpg" width="520" height="300">
<img id="image2" src="big-two.jpg" width="520" height="300">
</body>
</html>

如果您用自己的图像替换图像（保持相同的示例 ID），您会看到通过单击 p1.html 的缩略图，您将转到 p2.​​html，其中显示具有相同 ID 的图像该页面和一条警报消息会显示单击图像的 ID。
在单击的第一页中，链接的 id 保存在本地存储中，在第二页中，该数据会显示正确的图像。
对于脚本的操作，第一页链接的ID必须与第二页中的图像ID相同