Question

我正在使用具有基本图像推子的主页：

<div id="cycle">
    <img src="/images/bath.jpg">
    <img src="/images/desk.jpg">
    <img src="/images/car.jpg">
</div>

在文档的底部，我有一些jQuery：

jQuery(document).ready(function($){
    if ($(window).width() > 480) {
        $('#cycle').fadeIn(4000).cycle({
            timeout: 8000,
            speed: 4000
        }); 
    }
});

因此，如果屏幕宽度在加载时大于480px，我只希望运行此脚本。这是最好的方法吗？我想我可以使用媒体查询隐藏.cycle div，但我不希望脚本在后台执行它的操作。

使用调整大小时.cycle div淡出的唯一方法是：

$(window).resize(function() {});

Answer 1

这样的事情对你有用吗？这是fiddle example ... fiddle code here

function checkSize(){
    if ($(window).width() > 480) {
        cycleImages();
    }else{
        $('#cycle').fadeOut().cycle('stop');
    }
}

function cycleImages(){
    $('#cycle').fadeIn(4000).cycle({
        timeout: 8000,
        speed: 4000
    }); 
}

checkSize();

$(window).resize(function() {
    checkSize();
});

如果屏幕大小大于值，请运行脚本

1 个答案: