【问题标题】: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>

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-10-21
    • 1970-01-01
    • 2014-11-19
    • 1970-01-01
    相关资源
    最近更新 更多