产品的Javascript图像框答案

【问题标题】：Javascript image box for products产品的Javascript图像框
【发布时间】：2011-10-14 14:38:00
【问题描述】：

我正在寻找类似于以下示例的“图像显示”脚本。悬停小图像时，较大的图像会发生变化（类似于 Amazon.com、eBay 和许多其他电子商务网站）。

是否有任何可用的库/代码来执行此操作？

示例 1

---------------------------------------------------------

示例 2

【问题讨论】：

这是css、php还是javascript问题？如果一切都在一起，那么那里就有数以百万计的画廊。如果是关于“如何使图像出现在悬停的大框中”的问题，那么最简单的事情就是document.getElementById('largeImage').src=this.src;。请更具体

标签： php javascript css web-applications

【解决方案1】：

这是一个小例子，当悬停较小的图像时，它会改变较大的图像

<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <script>
    $(document).ready(function() {
        $('.smallImage').hover(function() {
            $('.bigImage').attr('src',this.src);
        });
    });
    </script>
    <style>
        .bigImage {
            width: 100px;
            height: 100px;
            display: block;
        }
        .smallImage {
            width: 50px;
            height: 50px;
            display: inline;
        }
    </style>
</head>
<body>
    <div id="imagesDiv">
        <img class="bigImage" src="Blue hills.jpg"></img>
        <img class="smallImage" src="Blue hills.jpg"></img>
        <img class="smallImage" src="Sunset.jpg"></img>
        <img class="smallImage" src="Water lilies.jpg"></img>
    </div>
</body>
</html>

【讨论】：