当前位置:主页 > 网页教程 > 网络编程 > JavaScript > 内容欢迎大家投稿

JS判断不同分辨率,调用不同CSS的方法

时间:2011-12-22 15:48来源:未知 作者:大宝库 点击:读取中
阅读工具:字体:
大家可能在做网页设计中会碰到这个特殊需求,要求像FLASH那样,背景会随着不同分辨率自动放大缩小。

 
但光靠CSS是无法实现这个效果的,目前网页中要实现类似效果就是把背景图做到最大,背景不动,分辨率大的看到的就多,分辨率小的看的的就少。

 
那么通过JS判断 ,可以比较麻烦的解决一个奇怪的需求。(在不同CSS中使用了不同的大小背景图片,都保持全屏完整显示)

 

 

 
代码如下:

 
 
<SCRIPT LANGUAGE="JavaScript">

 
<!--

 
if (window.navigator.userAgent.indexOf("MSIE")>=1)

 
{

 
var IE1024="";

 
var IE800="";

 
var IE1152="";

 
var IEother="";

 

 

 
ScreenWidth(IE1024,IE800,IE1152,IEother)

 
}else{

 
if (window.navigator.userAgent.indexOf("Firefox")>=1)

 
{

 
//如果浏览器为Firefox

 
var Firefox1024="";

 
var Firefox800="";

 
var Firefox1152="";

 
var Firefoxother="";

 

 

 
ScreenWidth(Firefox1024,Firefox800,Firefox1152,Firefoxother)

 
}else{

 
//如果浏览器为其他

 
var Other1024="";

 
var Other800="";

 
var Other1152="";

 
var Otherother="";

 
ScreenWidth(Other1024,Other800,Other1152,Otherother)

 
}

 
}

 

 

 
function ScreenWidth(CSS1,CSS2,CSS3,CSS4){

 
if ((screen.width == 1024) && (screen.height == 768)){

 
setActiveStyleSheet(CSS1);

 
}else{

 
if ((screen.width == 800) && (screen.height == 600)){

 
setActiveStyleSheet(CSS2);

 
}else{

 
if ((screen.width == 1152) && (screen.height == 864)){

 
setActiveStyleSheet(CSS3);

 
}else{

 
setActiveStyleSheet(CSS4);

 
}}}

 
}

 

 

 
function setActiveStyleSheet(title){ 

 
  document.getElementsByTagName("link")[0].href="style/" title; 

 
}

 
//-->

 
</SCRIPT>

 
解释: 
var IE1024=""; 
var IE800=""; 
var IE1152=""; 
var IEother=""; 
引号里面分别填写,用户使用IE的时候并且分辨率为1024*768,800*600,1152*864要使用的css文件名.

 
var Firefox1024=""; 
var Firefox800=""; 
var Firefox1152=""; 
var Firefoxother=""; 
引号里面分别填写,用户使用FF的时候并且分辨率为1024*768,800*600,1152*864要使用的css文件名. 
var Other1024=""; 
var Other800=""; 
var Other1152=""; 
var Otherother=""; 
引号里面分别填写,用户使用其他浏览器的时候并且分辨率为1024*768,800*600,1152*864要使用的css文件名. 
不判断分辨率,只判断浏览器 

 

 
实现根据浏览器类型自动调用不同CSS。 
代码如下:

 
解释: 
如果浏览器为IE,则调用default.css 
如果浏览器为Firefox,则调用default2.css 
如果浏览器为其他,则调用newsky.css 
用法: 
放在 
[codes=xml][/codes] 
前面即可。 
只判断分辨率,不判断浏览器 
(责任编辑:大宝库)


------分隔线----------------------------
推荐内容
赞助商链接
赞助商链接