gpt4 book ai didi

php - 产品的 Javascript 图片框

转载 作者:行者123 更新时间:2023-11-28 16:47:44 24 4
gpt4 key购买 nike

我正在寻找类似于下面示例的“图像显示”脚本。将鼠标悬停在小图片上时,大图片会发生变化(类似于 Amazon.com、eBay 和许多其他电子商务网站)。

是否有任何库/代码可用于执行此操作?

示例 1

Example 1-------------------------------------------- ----------

示例 2

enter image description here

最佳答案

这是一个小例子,当鼠标悬停在较小的图像上时,它会改变较大的图像

<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>

关于php - 产品的 Javascript 图片框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6850720/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com