2012-04-07 102 views
0

我认为这很简单,但经过2天的尝试,我仍然无能为力。基本上,如果屏幕宽度超过767像素,则需要运行一组命令,而如果屏幕不超过767像素,则需要使用另一组命令。根据窗口宽度更改JavaScript

当屏幕比767个像素宽,我想:

<script type="text/javascript"> 

    var jsReady = false;//for flash/js communication 

    // FLASH EMBED PART 
    var flashvars = {}; 
    var params = {}; 

    params.quality = "high"; 
    params.scale = "noscale"; 
    params.salign = "tl"; 
    params.wmode = "transparent"; 
    params.bgcolor = "#111111";//change flash bg color here 
    params.devicefont = "false"; 
    params.allowfullscreen = "true"; 
    params.allowscriptaccess = "always"; 
    var attributes = {}; 
    attributes.id = "flashPreview"; 

    swfobject.embedSWF("preview.swf", "flashPreview", "100%", "100%", "9.0.0", "expressInstall.swf", flashvars, params, attributes); 

    <!-- and much more code... --> 

</script> 

当屏幕比768个像素窄,我想运行:

<script type="text/javascript"> 

     jQuery(function($){ 
      $.supersized({ 
       //Background image 
       slides : [ { image : 'img/some_image.jpg' } ]     
      }); 
     }); 

</script> 

这是正确的?对于台式机和平板电脑,我想显示全屏视频背景。对于较小的屏幕(小于767像素),我想显示单个静止图像背景。

+1

您的意思是窗口(视口)宽度或物理屏幕(设备)的宽度?如果您的意思是视口,请使用Starx的答案。如果你的意思是设备,请使用庞查的答案。视口宽度在调整大小时发生变化。设备宽度不变(不需要调整大小处理程序)。请参阅http://responsejs.com/labs/dimensions/ – ryanve 2012-04-07 23:20:49

+0

是的,我的意思是视口。我确实读了我的问题,但总是错过了一些东西!我会调查Starx的答案。谢谢! – awDemo 2012-04-07 23:34:20

回答

2

您可以使用$(window).width()获取窗口的正确大小,并在窗体的resize事件上附加处理程序。对于简单的使用,它就像

$(window).resize(funcion() { 
    $width = $(window).width(); 
    if($width < 767) { 
      $.supersized({ 
       //Background image 
       slides : [ { image : 'img/some_image.jpg' } ]     
      }); 
    } else { 
     //if width is greater than 767 
    } 
}); 
+0

谢谢Starx!我是一个新手,所以在这里帮助一下...我可以在这里看到超大的代码,但我在哪里可以放置其他代码(当视口大于767时? – awDemo 2012-04-07 23:35:31

+0

@awDemo,您可以使用else block来检查,检查我的更新 – Starx 2012-04-08 02:58:32

+0

非常感谢! – awDemo 2012-04-08 08:46:30

2
if(screen.width > 767) { 
    code A... 
} else { 
    code B... 
} 
+0

这给出了设备宽度。如果这就是我们的意思,这很好。请参阅:http://responsejs.com/labs/dimensions/ – ryanve 2012-04-07 23:15:29

+0

对。这是OP提到的(屏幕)。如果意图是处理视口宽度,那么必须以不同的方式完成,并考虑视口的更改(调整大小)。 – poncha 2012-04-07 23:35:24

+0

我的意思是视口(对不起),但这也是很好的知道!谢谢。 – awDemo 2012-04-07 23:41:54

1

由于您使用JQuery,你可以这样做:

if ($(window).width > 767) { ... } 

,返回窗口的当前大小,而不是最大。