Question

我想使用获取屏幕大小的代码以及一起调整搜索栏大小的代码。目前所做的一切都是在最大分辨率上调整搜索栏的大小。这是一个示例http://www.jsfiddle.net/1eddy87/R7kSA的链接。您需要不断更改分隔符的大小并以不同的大小运行代码以查看问题的区别，但我只是想提一下。

此代码获取屏幕大小：

var w = window,
    d = document,
    e = d.documentElement,
    g = d.getElementsByTagName('body')[0],
    x = w.innerWidth || e.clientWidth || g.clientWidth,
    y = w.innerHeight|| e.clientHeight|| g.clientHeight;

这段代码在调整窗口大小时给出了我的大小：

$(document).ready(function(){
    $(window).resize(function(){
      window.x = x;
   });
});

此代码根据屏幕大小重新调整搜索栏的大小。我需要将正在调整大小的代码放入函数中，这样我就不会继续重用代码。

if (window.x >= 1200) {

    $('#search_bar_box').focus(function () {
        $(this).animate({
            width: '600px'
        }, 500, function () {
            // Animation complete.
        });
    });

    $('#search_bar_box').blur(function () {
        $(this).animate({
            width: '100%'
        }, 0.1, function () {
            // Animation complete.
        });
    });

} else if (window.x >= 992 && window.x < 1200) {

    $('#search_bar_box').focus(function () {
        $(this).animate({
            width: '350px'
        }, 500, function () {
            // Animation complete.
        });
    });

    $('#search_bar_box').blur(function () {
        $(this).animate({
            width: '100%'
        }, 0.1, function () {
            // Animation complete.
        });
    });

} else if (window.x >= 768 && window.x < 992) {

    $('#search_bar_box').focus(function () {
        $(this).animate({
            width: '100px'
        }, 500, function () {
            // Animation complete.
        });
    });

    $('#search_bar_box').blur(function () {
        $(this).animate({
            width: '100%'
        }, 0.1, function () {
            // Animation complete.
        });
    });

} else {
    //default
}

Answer 1

您需要在窗口resize()事件上执行搜索栏调整大小代码，这就是我的代码工作方式。请参阅此jsiffdle：jsfiddle.net/R7kSA/3/

$(document).ready(function () {
    $(window).resize(function () {
        /* winWidth() is the function for getting the screen size. 
           set() is the function that handles the search bar resize and
           accepts the argument value for 'x'             
        */
        set(winWidth());
    }).trigger('resize');
});

我需要根据窗口大小调整来调整搜索栏的大小，我需要为搜索栏调整代码调整功能

1 个答案: