最近忙着移动网站改版的任务,博客也有近两周没更新了,在这次改版的过程中发现了不少好用的东西将陆续来分享。
今天要介绍的就是一个非常好用的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库有比较详细的说明,我就不赘述了。有兴趣的可以尝试一下。
虽然现在已经基本淘汰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);
} |
最近的一个项目,在一个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-width/max-width min-height/min-width有时候做些效果有些不便,这个js可以让IE支持这个效果 minmax.js
以下是网页中图片超过指定大小自动缩放,并且可以点击看大图的代码
[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]
经常有些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
最近评论