【问题标题】:simple image gallery - change image opacity via jquery?简单的图片库 - 通过 jquery 更改图像不透明度?
【发布时间】:2012-02-03 11:16:24
【问题描述】:

我做了一个非常简单的画廊,使用:

$('#thumbs img').click(function(){
$('#mainimg img').attr('src',$(this).attr('src').replace('thumb','large'));
});

除了第一个/起始拇指之外,我还希望所有缩略图的不透明度降低,直到被点击——此时起始拇指的不透明度会降低,点击的拇指将完全可见,依此类推。 ..添加到我当前的脚本中有多容易? 谢谢

【问题讨论】:

    标签: jquery gallery thumbnails opacity


    【解决方案1】:

    您需要将两张图像叠加在一起才能进行有效的淡入淡出,否则其中一张会在另一张出现之前消失。您可以通过将当前图像设置为背景,然后在顶部淡入图像来做到这一点:

    例如,请参阅:http://jsfiddle.net/Diodeus/gYyBL/

    【讨论】:

    • 对不起,也许我需要描述得更好,我不希望图像看起来像那样 - 不过很好的例子。除了默认/起始缩略图为 100% 之外,我只希望我的缩略图图像具有 60% 的不透明度。然后当点击下一个缩略图时,第一个缩略图加入其他缩略图为 60%,新点击的缩略图变为 100%
    • 这一切都归结为使用这个:$(this).fadeTo('',.01) 其中不透明度在 0 和 1 之间变化 (1=100%)
    • 所以添加 $(this).fadeTo('',1);将当前缩略图设置为正确的不透明度,但是当单击另一个缩略图时,如何使其“丢失”淡入淡出?非常感谢您的帮助!
    猜你喜欢
    • 2021-05-11
    • 2013-02-26
    • 1970-01-01
    • 2012-07-18
    • 2016-09-02
    • 2023-03-04
    • 1970-01-01
    相关资源
    最近更新 更多