当我们点击小图像时,改变大图像

问题描述 投票:-1回答:3

下面有一个链接,打开这个链接,然后点击 table styles. 当我们点击这些小尺寸的表格图片时,它就会显示出所有的表格样本,然后在大图片区域显示出来。

http:/www.pooltables.comcoventry-pool-table?icid=in00007

我想创建一些类似这样的东西,或者找到任何类似的脚本。

javascript
3个回答
2
投票

好吧,你提到的例子是在Flash中创建的,所以要在javascript中获得类似的花哨的外观和感觉并不容易。

但是,在javascript中获得类似的功能是很容易的,但不是花哨的平滑过渡和花哨的工具提示等(这是可能的,但需要更多的东西...)。一个通过点击缩略图来显示图片的简单例子可以是这样的。

<style>
  table#thumbnails{
    background-color:white;
  }
  table#thumbnails tr td img
  {
    cursor: pointer;
  }
</style>

<script type="text/javascript">
function showImage(image){
  var mainImage = document.getElementById('mainImage');
  mainImage.src = image; 
}
function toggleThumbnails(){
  var thumbnails = document.getElementById('thumbnails');
  if(thumbnails.style.display == 'block'){
    thumbnails.style.display = 'none'; 
  } else {
    thumbnails.style.display = 'block'; 
  }
}
</script>
<input type="button" value="Show/hide thumbnail list" onclick="toggleThumbnails()" />
<table id="thumbnails" style="display:none;">
<tr>
 <td><img src="thumb1.png" title="Item 1" onclick="showImage('img1.png')" /></td>
 <td><img src="thumb2.png" title="Item 2" onclick="showImage('img2.png')" /></td>
 <td><img src="thumb3.png" title="Item 3" onclick="showImage('img3.png')" /></td>
</tr>
<tr>
 <td><img src="thumb4.png" title="Item 4" onclick="showImage('img4.png')" /></td>
 <td><img src="thumb5.png" title="Item 5" onclick="showImage('img5.png')" /></td>
 <td><img src="thumb6.png" title="Item 6" onclick="showImage('img6.png')" /></td>
</tr>
<tr>
 <td><img src="thumb7.png" title="Item 7" onclick="showImage('img7.png')" /></td>
 <td><img src="thumb8.png" title="Item 8" onclick="showImage('img8.png')" /></td>
 <td><img src="thumb9.png" title="Item 9" onclick="showImage('img9.png')" /></td>
</tr>
</table>
<div>
<img id="mainImage" src="img1.png" /> 
</div>

1
投票

你可以尝试一下 this line .

在上面的例子中,我把img标签的src改成了 click 关于形象& 关于 mouseleave储存了原始的图像源。


0
投票

如果你想要的是 "类似的东西",你永远也找不到能完全满足你需求的脚本。

你可能想研究javascript库,比如jQuery,它可以让你把代码绑定到事件上,从而使这种事情变得简单。

© www.soinside.com 2019 - 2024. All rights reserved.