Question

我需要一些javascript帮助！

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

所以第一页（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保存在localstorage中，在第二页中，此数据显示正确的图像。
对于脚本的操作，第一页链接的ID必须与第二页中的图像ID相同

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

1 个答案: