1

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

您有一个包含不同类别的侧边菜单，当您单击类别时会出现一个隐藏的 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>

谢谢！

4

1 回答 1

0

那么你的代码有几个问题。

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

这是修改后的代码：

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

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

    var myCont = document.getElementById ("imageGallery");
    myCont.scrollTop(100); 
});
于 2012-11-13T08:13:16.603 回答