雨无形的BLOG » JavaScript

根据访问者分辨率，自动调用不同版式CSS的代码

雨无形 — Wed, 08 Jul 2009 02:03:33 +0000

虽然现在已经基本淘汰800分辨率了1024已经成为主流，但是随着大屏幕液晶的不断降价，更高的分辨率将会逐步成为主流，为了适应越来越大的分辨率，有时候我们会采用流体布局，但是流体布局有时候也有局限性，下面一段js可以实现根据用户客户端分辨率的不同，调用不同的css代码来实现适应不同分辨率的效果。

var Swidth = screen.width;
var Surl = "http://www.yours.com/";
var Skin = ["cssstyle1.css", "cssstyle2.css"];
var Skintemp;
if (Swidth >= 1280) {
    Surl += "skin_1200";
} else {
    Surl += "skin";
}
for (var i = 0; i < Skin.length; i++) {
    Skintemp = document.createElement("link");
    Skintemp.type = "text/css";
    Skintemp.rel = "stylesheet";
    Skintemp.href = Surl + "/" + Skin[i];
    document.getElementsByTagName("head")[0].appendChild(Skintemp);
}

让IE支持min-height/width max-height/width 的JS

雨无形 — Wed, 23 Jan 2008 08:45:47 +0000

ie不支持min-width/max-width min-height/min-width有时候做些效果有些不便，这个js可以让IE支持这个效果 minmax.js

图片超过大小自动缩放代码

雨无形 — Tue, 22 Jan 2008 11:47:13 +0000

以下是网页中图片超过指定大小自动缩放，并且可以点击看大图的代码

[CODE=javascript] //改变图片大小 function resizeImg() { var contentwidth=565;//设置图片最大宽度 var imageAll=document.getElementById("con").getElementsByTagName("img");//con为图片所在层的ID var turewidth,tureheight; if (imageAll !=null) { for (i=0; iimageAll[i].width) { if(imageAll[i].height==tureheight) { imageAll[i].style.height=imageAll[i].height/turewidth*imageAll[i].width+"px"; } imageAll[i].onclick=function(){window.open(this.src)}; imageAll[i].style.cursor="pointer"; imageAll[i].title="点击查看原始尺寸："+turewidth+"*"+tureheight+"px"; } else { imageAll[i].style.width=turewidth+"px"; } } } } if (window.addEventListener) window.addEventListener("load", resizeImg, false); else if (window.attachEvent) window.attachEvent("onload", resizeImg); else window.onload=resizeImg [/CODE]

由修改漂浮广告代码而学到的DOCTYPE声明对JS的影响

雨无形 — Mon, 21 Jan 2008 15:15:46 +0000

经常有些JS代码明明在别人网页上可以运行，拷贝过来运行却出错，这个时候可以检查下是不是DOCTYPE声明的问题

在没有DOCTYPE声明的情况下:

document.body.clientWidth

document.body.clientHeight

为当前窗口的宽度/高度;

在DOCTYPE声明以后

document.body.clientWidth

document.body.clientHeight

为整个页面的宽度/高度;

document.documentElement.clientWidth

document.documentElement.clientHeight

为当前窗口的宽度/高度;

同样增加DOCTYPE声明后

document.body.scrollLeft

document.body.scrollTop

要改为

document.documentElement.scrollLeft

document.documentElement.scrollTop

我修改的,支持FF和IE的漂浮广告代码

雨无形 — Mon, 21 Jan 2008 15:01:01 +0000

网上搜索的一段代码,但是加上DOCTYPE后就不能用了,于是乎修改了一下,现在完美支持FF和IE

JS代码如下：

var img = document.getElementById("img");
var xPos = 20;
var yPos = document.documentElement.clientWidth - img.offsetHeight;
var step = 1;
var delay = 5;
var height = 0;
var Hoffset = 0;
var Woffset = 0;
var yon = 0;
var xon = 0;
var pause = true;
var interval;
img.style.top = yPos + "px";
function changePos() {
width = document.documentElement.clientWidth;
height = document.documentElement.clientHeight;
Hoffset = img.offsetHeight;
Woffset = img.offsetWidth;
img.style.left = xPos + document.documentElement.scrollLeft + "px";
img.style.top = yPos + document.documentElement.scrollTop + "px";
if (yon) {
yPos = yPos + step;
} else {
yPos = yPos - step;
}
if (yPos < 0) {
yon = 1;
yPos = 0;
}
if (yPos >= (height - Hoffset)) {
yon = 0;
yPos = (height - Hoffset);
}
if (xon) {
xPos = xPos + step;
}
else {
xPos = xPos - step;
}
if (xPos < 0) {
xon = 1;
xPos = 0;
}
if (xPos >= (width - Woffset)) {
xon = 0;
xPos = (width - Woffset);
}
}
function start() {
img.visibility = "visible";
interval = setInterval(‘changePos()’, delay);
}
start();