Question

我试图获得与此处相同的效果：http://jsfiddle.net/WV8jX/161/

    $(function(){
    var $win = $(window),
    w = 0,h = 0,
    opacity = 1,
    getWidth = function() {
        w = $win.width();
        h = $win.height();
    };

    $win.mousemove(function(e) {
        getWidth();
        opacity = (e.pageX/w * 0.5) + (e.pageY/h * 0.5);
        console.log(opacity);
        $('#myElement').css('opacity',opacity);

    });
});

但是，当鼠标移动得更远时，不透明度会发生变化，不透明度会根据窗口的宽度而变化。我不想使用基于窗口大小的动画触发器来执行此操作。我正在寻找上面链接中的确切内容，但不是鼠标位置，而是窗口宽度。任何帮助将不胜感激，我已经尝试了很多东西！

Answer 1

喜欢这个吗？

$(window).resize(function() {
    $('#myElement').css('opacity', $(this).width()/1000);
});

您可以将1000更改为您想要的任何内容。此数字将是元素具有opacity: 1的宽度。

以下是一个示例：http://jsfiddle.net/WV8jX/281/

Answer 2

$(function () {
    var w = $(window).width();
    $(window).on('resize', function() {
        $('#myElement').css('opacity', ($(this).width() / w).toFixed(2));
    });
});

FIDDLE

以完全不透明度开始，并在窗口调整大小时淡出

jQuery更改不透明度作为窗口调整大小

2 个答案: