jQuery响应式网页设计 [英] jQuery for responsive web design

问题描述

大家好，我是jQuery的新手. 现在，我一直在阅读一些博客，描述javascript如何响应性地处理魔术.有很多插件，但我想我的工作不需要它们. 我试图根据屏幕分辨率加载动态图像，但是以某种方式无法设置屏幕尺寸. 这是我的代码:

Hey Guys, I am new to jQuery. Now I've been reading some blogs describing how javascript can responsively do magical stuff. There are lots of plugins out there but I guess for my work I don't need them. I am trying to have dynamic images loaded according to the screen resolution but somehow I am unable to set the dimensions for the screen. Here is my code:

$(window).resize(function() {
    if($(window).width() >= 1000 && $(window).width()<=1400 ){    
        $('#myFirstImage').attr('src', 'img/bgLow.jpg');
    }
});

现在，随着调整浏览器大小，javascript将查找尺寸. 我无法以某种方式在1000和1500像素范围内进行设置.你们能告诉我if-logic错误在哪里. 谢谢.

Now as the browser is resized javascript will look for dimensions. Somehow I am unable to set something within 1000 and 1500 px range. Can you guys tell me where I am doing this if-logic wrong. Thanks.

推荐答案

尝试将通用代码放入函数中，然后绑定事件并调用函数:

Try placing the common code in a function, then bind the event, and call the function:

$(document).ready(function() {

    // Optimisation: store the references outside the event handler:
    var $window = $(window);

    function checkWidth() {
        var windowsize = $window.width();
        if (windowsize >= 1000 && windowsize <= 1400) {
            $('#myFirstImage').attr('src', 'img/bgLow.jpg');
        }
    }

    // Execute on load
    checkWidth();

    // Bind event listener
    $(window).resize(checkWidth);
});

这篇关于jQuery响应式网页设计的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！