0

有谁知道如何转换这个 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>
4

1 回答 1

0

我认为您的意思是背景图像没有缩放。

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

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

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

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

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

于 2014-05-12T16:46:14.603 回答