存档

‘JavaScript’ 分类的存档

推荐一个不错的jq的UI库

2009年8月25日 雨无形 2 条评论

最近忙着移动网站改版的任务,博客也有近两周没更新了,在这次改版的过程中发现了不少好用的东西将陆续来分享。

今天要介绍的就是一个非常好用的jq的UI库,叫jquery tools,它的官方网站是http://flowplayer.org/tools/index.html这个UI库提供了我们在做网站的过程中需要用到的一些常用JS效果的方案,我试用了一下常用的tab和Scrollable感觉还比较灵活,配合CSS可以实现我们想做的大多数效果。

这个UI库包含了6大工具

1、选项卡功能(Tabs)

2、提示工具条功能(ToolTips)

3、信息滚动功能(Scrollable)

4、遮罩效果(overlay)

5、突出效果(expose)

6、Flash嵌入

http://css9.net/flexible-ui-library-jquery-tools/这个博客上对这个UI库有比较详细的说明,我就不赘述了。有兴趣的可以尝试一下。

分类: JavaScript 标签: , ,

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

2009年7月8日 雨无形 没有评论

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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);
}

一个可以多页签切换的JS焦点图代码

2009年3月4日 雨无形 没有评论

最近的一个项目,在一个tab的区域,每个tab里面都有一个焦点图(没办法,客户的要求就是这么怪),需要用CSS和js实现。 网上找了好久没找到合适的代码,就自己试着写了一个,代码逻辑不是很清晰,而且只适用于目前的三个tab,每个tab里面有5点焦点图的情况。毕竟是第一次写程序,好在实现了功能。以下是js代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
//焦点图
var n=0;
var num=1;
var c=new Array(0,5,10);
function Mea(value){
	n=value;
	if (value<5) {
		num=1;
	} else if ( value>4&value<10 ) {
		num=2;
	} else if (value>9) {
		num=3;
	}
	v = value-5*(num-1);
	aunum = "au"+num;
	setBg(value);
	plays(v);
	conaus(v);
	}
function setBg(value){
	for(var i=0;i<5;i++) {
	ii=5*(num-1)+i;
	document.getElementById("t"+ii+"").className="bbg0";
	}
	document.getElementById("t"+value+"").className="bbg1";
	}
function plays(v){
	try
	{
		document.getElementById("au"+num).filters[0].Apply();
		var d = document.getElementById("au"+num).getElementsByTagName("div");
		for(i=0;i<5;i++)i==v?d[i].style.display="block":d[i].style.display="none";
		document.getElementById("au"+num).filters[0].play();
	}
	catch(e)
	{
		var d = document.getElementById("au"+num).getElementsByTagName("div");
		for(i=0;i<5;i++)i==v?d[i].style.display="block":d[i].style.display="none";
	}
}
function conaus(v){
	try
	{
		with ("conau"+num){
 
				for(i=0;i<5;i++)i==v?children[i].style.display="block":children[i].style.display="none";
 
				}
	}
	catch(e)
	{
		var d = document.getElementById("conau"+num).getElementsByTagName("div");
		for(i=0;i<5;i++)i==v?d[i].style.display="block":d[i].style.display="none";
	}
 
}
//tab激活该tab的自动播放
function autorun(m){
    for(i=0;i<3;i++){
		if(i==num-1){
			c[i]=n;
		}
	}
	clearAuto();
	if(m==num){
		setAuto();
	} else{
		num=m;
		n=c[m-1];
		setAuto();
	}
}
 
function clearAuto(){clearInterval(autoStart)}
function setAuto(){autoStart=setInterval("auto(n)", 3000)}
function auto(){
	n++;
	if(n>5*(num-1)+4)n=5*(num-1);
	Mea(n);
	conaus(n-5*(num-1));
}
setAuto();

然后在tab的每个tab上加上autorun(1);autorun(2);autorun(3)…

全部代码直接看实例页面

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

2008年1月23日 雨无形 没有评论

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

分类: JavaScript, 网页设计 标签: ,

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

2008年1月22日 雨无形 没有评论

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

[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的影响

2008年1月21日 雨无形 没有评论

经常有些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