javascript - 返回主图

标签 javascript image

所以我有一些 javascript 代码,可以在缩略图悬停时交换我的主图像,效果非常好!是他们在悬停时返回主窗口的一种方式吗?我确信有一些 if 语句,但我无法弄清楚!

<div class="product"><img id="main" src="mainImage.jpg" width="550"/></div>
<div class="products">
 <img src="img.jpg" width="200"/>
 <img src="img1.jpg" width="200"/>
 <img src="img2.jpg" width="200"/>
</div>

JavaScript 是

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
 $(document).ready(function(){
$('.products img').mouseover(function() {
    var url = $(this).attr('src');
    $('#main').attr('src', url);
});
});
</script>

最佳答案

<script type="text/javascript">
     $(document).ready(function(){
    var def_url =  $('#main').attr('src');
    $('.products img').hover(function() {
        var url = $(this).attr('src');
        $('#main').attr('src', url);
    }, function() {
       $('#main').attr('src', def_url);
    });
});
</script>

关于javascript - 返回主图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21676706/

相关文章:

html - CSS:圆 Angular + 不透明度 = 图像在 Firefox 19 中消失

javascript - 当解析器不是逗号时如何使用 d3 解析 csv 文件

javascript - Knockout.js:自定义绑定(bind)重置值

javascript - 浏览器如何获取我们的 ID 和密码

android - 如何在 ImageView 中设置运行时决定的图像?

python-3.x - 在 tensorflow 中预处理不同的图像尺寸

javascript - "IONIC 3"页面添加html内容变量

javascript - 菜单的高度不正确 CSS

android - Canvas 缩放转到点 (0,0)

c# - 如何将图像 byte[] 数组压缩为 JPEG/PNG 并返回 ImageSource 对象