gpt4 book ai didi

javascript - jquery 响应式图像淡入淡出过渡

转载 作者:行者123 更新时间:2023-11-28 10:28:40 25 4
gpt4 key购买 nike

有谁知道如何转换此 jQuery 效果,而不是固定大小的图像,我需要设置百分比大小(宽度:100%;高度:自动),以便它们可以响应。有什么想法吗?

    <script type="text/javascript">
$(function (){
$('img.fade').each(function (){
var $$ = $(this);

var target = $$.css('background-image').replace(/^url|[\(\)'"]/g, '');

$$.wrap('<span style="position: relative;"></span>')
.parent() // span elements
.prepend('<img>')
.find('img:first')
.attr('src', target);

$$.css({
'position' : 'absolute',
'left' : 0,
'top' : this.offsetTop
});

$$.hover(function () {
$$.stop().animate({
opacity: 0.2
}, 250);
}, function () {
$$.stop().animate({
opacity: 1
}, 350);
});
});
});

</script>

最佳答案

我想你的意思是背景图像没有缩放。

您可以使用 css 命令“background-size”来解决这个问题..

可以帮助您的值(value)观是“覆盖”或“包含”: http://www.w3schools.com/cssref/css3_pr_background-size.asp

var target = $$.css('background-image').replace(/^url|[\(\)'"]/g, '').css({ 'background-size': 'cover' });

如果这不起作用,您可以读出图像的实际绝对宽度并将其设置为背景大小。但是当你缩放浏览器窗口时你需要一个调整大小的事件..

我建议使用两张图片并显示/隐藏图片,而不是使用背景图像进行悬停。

关于javascript - jquery 响应式图像淡入淡出过渡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23613794/

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