Question

我正在创建一个包含图片库的网站。

你有一个包含不同类别的侧边菜单，当你点击一个类别时出现的隐藏div，用缩略图填充，当你点击任何缩略图时它会隐藏缩略图div并在其中显示图像库地点。

我想要做的一个例子是：http://www.matitacorp.com/web/portfolio.php

我想要做的是当缩略图div隐藏并且图像库出现时我还希望与点击的缩略图对应的图像出现，即使它在可滚动缩略图库中低3或4张图片。

我尝试过使用.scrolltop（）并设置值，但我认为我错过了一些东西。我的div显示正常，但我没有得到scrolltop值工作或我使用完全错误的功能。希望有人可以提供帮助。

以下是我尝试使用的一段代码：

//thumbnail section
<div id="booth">      
  <a href="#" id="identityoverlay"><img src="thumb1" alt="" /></a>
  <a href="#" id="identityoverlayA"><img src="thumb2" alt="" /></a>
  <a href="#" id="identityoverlayB"><img src="thumb3" alt="" /></a>
</div>

//main image section
<div id="identityOverlay" style="background-image:url(images/bkgrnd_700.gif); height:720px; display:none;">               

    <div id="imageGallery style="padding-left:95px; padding-top:10px; padding-bottom:15px; overflow:auto; height:610px;">            
                <img src="mainImg1" /><br />              
                <img src="mainImg2" /><br />              
                <img src="mainImg3" /><br />              
    </div>
</div>

<script>
    $("#identityoverlay").click(function () {
      $("#identityOverlay").show();     
      $("#booth").hide();
});    

    $("#identityoverlayA").click(function () {       
      var myCont = document.getElementById ("imageGallery");
              myCont.scrollTop(100); 

      $("#identityOverlay").show();       
      $("#booth").hide();
});   
</script>

谢谢！

Answer 1

您的代码存在一些问题。

首先，你应该防止点击默认操作，其次你应该首先隐藏/显示div，然后滚动到想要的位置。

以下是修改后的代码：

$("#identityoverlayA").click(function (e) {
    e.preventDefault;

    $("#booth").hide();
    $("#identityOverlay").show();       

    var myCont = document.getElementById ("imageGallery");
    myCont.scrollTop(100); 
});

滚动到与单击的缩略图对应的图像的图库

1 个答案: