0

我有一个脚本正在计算屏幕的宽度 -225px 但是我想在屏幕达到 1100px 时更改它，以便该函数只使用整个宽度。

这是我正在使用的代码：

     function slide_holder(){
     $('#main').css({'width': (($(window).width()) - 225 )+'px'});
     $('.flexslider-container').css({'height': (($(window).height()) - 85 )+'px', 'width': (($(window).width()) - 225 )+'px'});
     $('.flexslider').css({'height': (($(window).height()) - 275 )+'px'});
     $('#tS3').css({'height': (($(window).height()) - 200 )+'px'});
     $('#foot').css({'width': (($(window).width()) - 325 )+'px'});
 }

这就是它的名称：

$(document).ready(function() {  
    slide_holder();
    $(window).bind('resize', slide_holder);
});

我曾想过像这样尝试，但我遇到了很大的失败：

$(window).bind("resize", resizeWindow);
        function resizeWindow(e){
            var newWindowWidth = $(window).width();

            // If width width is below 600px, switch to the mobile stylesheet
            if(newWindowWidth < 1100){              

                    function slide_holder(){
                        $('#main').css({'width': (($(window).width()) - 0 )+'px'});
                        $('.flexslider-container').css({'height': (($(window).height()) - 85 )+'px', 'width': (($(window).width()) - 0 )+'px'});
                        $('.flexslider').css({'height': (($(window).height()) - 275 )+'px'});
                        $('#tS3').css({'height': (($(window).height()) - 200 )+'px'});
                        $('#foot').css({'width': (($(window).width()) - 105 )+'px'});
                    }

            }           
            // Else if width is above 600px, switch to the large stylesheet             

            else if(newWindowWidth > 1100){

                function slide_holder(){
                    $('#main').css({'width': (($(window).width()) - 225 )+'px'});
                    $('.flexslider-container').css({'height': (($(window).height()) - 85 )+'px', 'width': (($(window).width()) - 225 )+'px'});
                    $('.flexslider').css({'height': (($(window).height()) - 275 )+'px'});
                    $('#tS3').css({'height': (($(window).height()) - 200 )+'px'});
                    $('#foot').css({'width': (($(window).width()) - 325 )+'px'});
                }
            }
        }
4

1 回答 1

1

阅读您对您尝试实现的效果的描述，并假设您不打算使用基于 CSS 媒体查询的解决方案，您应该能够对原始功能进行（相对）最小的更改：

function slide_holder(){
   var winWidth = $(window).width(),
       winHeight = $(window).height(),
       smallMode = (winWidth < 1100);

   $('#main').css({ 'width': (winWidth - (smallMode ? 225 : 0)) +'px' });
   $('.flexslider-container').css({
       'height': (winHeight - (smallMode ? 85 : 0)) +'px',
       'width':  (winWidth - (smallMode ? 225 : 0)) +'px'
   });
   $('.flexslider').css({'height': (winHeight-(smallMode ? 275 : 0)) + 'px'});
   $('#tS3').css({ 'height': (winHeight - (smallMode ? 200 : 0)) + 'px' });
   $('#foot').css({ 'width': (winWidth - (smallMode ? 325 : 0)) + 'px' });
 }

我在那里做的是在函数开始时获取宽度和高度一次，而不是连续调用$(window).width()and $(window).height()，然后设置一个布尔值smallMode，用于决定使用如下表达式的偏移量：

(winWidth - (smallMode ? 225 : 0))

这表示 if smallModeistrue减去255否则减去0（显然您应该替换自己的偏移量而不是0）。

阅读您更新的“失败”代码，您似乎想slide_holder()根据 if / else if 条件的结果重新定义函数。在一般意义上这是可能的，但不是您使用的语法。如果您使用以下形式的函数声明：

function slide_holder() {
   /* function body */
}

JavaScript 将声明“提升”到包含范围的顶部，即，它假装您的声明位于开头。这意味着不可能使用该语法（在某些浏览器中存在违规行为）有条件地在if块中声明函数。实际上，来自the和块的函数声明都被“提升”到顶部，如果您声明两个具有相同名称的函数，则第二个函数将覆盖第一个函数。ifelse

声明函数的另一种方法是这样的：

var slide_holder = function() {
                     /* function body */
                   };

尽管变量slide_holder也将被“提升”到作用域的顶部，但在赋值行之前，它不会被分配对实际函数的引用。这意味着您可以像这样执行有条件的 this 或 that 函数“声明”：

var slide_holder;

if ($(window).width() < 1100) {
    slide_holder = function() {
                      /* one version of function */
                   };
} else {
    slide_holder = function() {
                      /* other version of function */
                   };
}

$(window).bind('resize',slide_holder);

就像我最初所说的那样，您可以使用原始函数的版本来实现该效果，但在一般意义上，函数声明的这种行为很可能是您更新代码的（主要）问题。

于 2012-02-08T04:23:44.243 回答