前端开发 – 第 2 页

Javascript2010年5月14日2011年10月18日

jquery ui accordion高度自适应

官网上提供了accordion的一些介绍，根据这些，能够实现当浏览器大小改变时，accordion自动适应其父 […]

UI, 移动开发2010年5月11日2011年10月4日

WEB下使用的OFFICE控件介绍

首先来个名词解释，Office网络文档控件，就是在网页中编辑office文档的控件（前提是browser已经安 […]

Javascript2010年5月5日2011年10月18日

IE图片预加载

&lt;html&gt;
&lt;head&gt;
&lt;title&gt;IE图片预加载类&lt;/title&gt;
&lt;script language="javascript"&gt;
function LoadImageClass()
{
	var me = this;
	var a = []; //图片数组
	this.Idx = 0; //已经被加载的图片个数
	this.Num = 0; //图片总数
	//下载图片
	this.LoadImages = function (s)
	{
		a = s.split(",");
		this.Num = a.length;
		DownImg();
	}

	function DownImg()
	{
		var i = new Image();
		var f = true;
		i.onload = function ()
		{
			if (f)
			{
				f = false
				me.Idx++;
				if (me.LoadIng) me.LoadIng();
				if (me.Idx &lt; me.Num) DownImg();
				else if (me.CallBack) me.CallBack(a);
			}
		}
		i.src = a[me.Idx];
	}
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id="counter" style="position:absolute; z-index:98; left:expression(document.body.clientwidth/2-60); top:expression(document.body.clientheight/2-10); width:120px; height:20px; background:#000000; color:#ffffff;"&gt;
	图片加载中…
&lt;/div&gt;
&lt;div id="divPageMask" style="position:absolute;z-index:99; left:0px; top:0px; width:expression(document.body.clientwidth); height:expression(document.body.clientheight); background:black; filter:alpha(opacity=50);"&gt;
&lt;/div&gt;
&lt;div id="box"&gt;
&lt;/div&gt;
&lt;script language="javascript"&gt;
var o = document.getElementById("counter");
var t = new LoadImageClass();
t.LoadIng = function ()
{
	o.innerHTML = "加载进度：" + Math.floor(t.Idx / t.Num * 100) + "%"
};
t.CallBack = function (arr)
{
	window.setTimeout(function ()
	{
		o.style.display = 'none';
		alert('图片加载完毕！')
	}, 1000);
	document.getElementById('divPageMask').style.display = 'none';
	var str = "";
	for (var i = 0; i &lt; arr.length; i++)
	{
		str += '&lt;img src="+arr[i]+" /&gt;&lt;br/&gt;';
	}
	document.getElementById("box").innerHTML = str;
}
t.LoadImages('http://photo1.bababian.com/upload3/20070726/90C803067E6AE5F138890F7EDBD6A5B2_240.jpg,http://photo1.bababian.com/upload3/20070726/AE9544EED47E210930511245D43E61C9_240.jpg,http://photo1.bababian.com/upload3/20070726/C0C286574F4D794190BC893B8FF9699B_240.jpg,http://photo1.bababian.com/upload3/20070726/153DCE973D5A68BCF1581C598D58FCC1_240.jpg,http://photo1.bababian.com/upload3/20070726/2882CBEC90AE58AB3AE56A157B3B9D4F_240.jpg,http://photo1.bababian.com/upload3/20070726/40C80D0BD65E5D0EA82CDE6556A53815_240.jpg,http://photo1.bababian.com/upload3/20070726/F098FDD6147BFABC4796CFC463A025A9_240.jpg');&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

<html>

<head>

<title>IE图片预加载类</title>

function LoadImageClass()

{

var me = this;

var a = []; //图片数组

this.Idx = 0; //已经被加载的图片个数

this.Num = 0; //图片总数

//下载图片

this.LoadImages = function (s)

{

a = s.split(",");

this.Num = a.length;

DownImg();

}

function DownImg()

{

var i = new Image();

var f = true;

i.onload = function ()

{

if (f)

{

f = false

me.Idx++;

if (me.LoadIng) me.LoadIng();

if (me.Idx < me.Num) DownImg();

else if (me.CallBack) me.CallBack(a);

}

i.src = a[me.Idx];

}

</script>

</head>

<body>

图片加载中…

</div>

</div>

</div>

var o = document.getElementById("counter");

var t = new LoadImageClass();

t.LoadIng = function ()

{

o.innerHTML = "加载进度：" + Math.floor(t.Idx / t.Num * 100) + "%"

};

t.CallBack = function (arr)

{

window.setTimeout(function ()

{

o.style.display = 'none';

alert('图片加载完毕！')

}, 1000);

document.getElementById('divPageMask').style.display = 'none';

var str = "";

for (var i = 0; i < arr.length; i++)

{

str += '<img src="+arr[i]+" /><br/>';

}

document.getElementById("box").innerHTML = str;

}

t.LoadImages('http://photo1.bababian.com/upload3/20070726/90C803067E6AE5F138890F7EDBD6A5B2_240.jpg,http://photo1.bababian.com/upload3/20070726/AE9544EED47E210930511245D43E61C9_240.jpg,http://photo1.bababian.com/upload3/20070726/C0C286574F4D794190BC893B8FF9699B_240.jpg,http://photo1.bababian.com/upload3/20070726/153DCE973D5A68BCF1581C598D58FCC1_240.jpg,http://photo1.bababian.com/upload3/20070726/2882CBEC90AE58AB3AE56A157B3B9D4F_240.jpg,http://photo1.bababian.com/upload3/20070726/40C80D0BD65E5D0EA82CDE6556A53815_240.jpg,http://photo1.bababian.com/upload3/20070726/F098FDD6147BFABC4796CFC463A025A9_240.jpg');</script>

</body>

</html>

Javascript2010年4月24日2011年10月18日

&lt;style type=text/css&gt;
#master{ margin:0 auto; width:600px;position:absolute; left:100px; top:780px; z-index:999;
 background:#ebd7a2;
 height:28px;
 filter:alpha(opacity=80); /* IE */
 -moz-opacity:0.8; /* Moz FF */
 opacity: 0.8; /* 支持CSS3的浏览器（FF 1.5也支持）*/
}
#master table{ width:600px; text-align:center;}
&lt;/style&gt;

&lt;div id="master"&gt;

&lt;/div&gt;

&lt;script language="JavaScript"&gt;
 var oldPosition = 0;
    function flow() {
  var scrollPos;
  var cHeight;

  if (typeof window.pageYOffset != 'undefined') {
     scrollPos = window.pageYOffset;
     cHeight=document.documentElement.clientHeight;
  }
  else if (typeof document.compatMode != 'undefined' &amp;&amp;
    document.compatMode != 'BackCompat') {
     scrollPos = document.documentElement.scrollTop;
     cHeight=document.documentElement.clientHeight;
  }
  else if (typeof document.body != 'undefined') {
     scrollPos = document.body.scrollTop;
     cHeight=document.body.clientHeight;
  }
  var a=scrollPos+cHeight-document.getElementById("master").offsetHeight;
  if(a!=oldPosition){
   document.getElementById("master").style.top = a+'px';
   oldPosition = a;
  }
 }
 window.setInterval("flow()",1);
&lt;/script&gt;

#master{ margin:0 auto; width:600px;position:absolute; left:100px; top:780px; z-index:999;

background:#ebd7a2;

height:28px;

filter:alpha(opacity=80); /* IE */

-moz-opacity:0.8; /* Moz FF */

opacity: 0.8; /* 支持CSS3的浏览器（FF 1.5也支持）*/

}

#master table{ width:600px; text-align:center;}

</style>

</div>

var oldPosition = 0;

function flow() {

var scrollPos;

var cHeight;

if (typeof window.pageYOffset != 'undefined') {

scrollPos = window.pageYOffset;

cHeight=document.documentElement.clientHeight;

}

else if (typeof document.compatMode != 'undefined' &&

document.compatMode != 'BackCompat') {

scrollPos = document.documentElement.scrollTop;

cHeight=document.documentElement.clientHeight;

}

else if (typeof document.body != 'undefined') {

scrollPos = document.body.scrollTop;

cHeight=document.body.clientHeight;

}

var a=scrollPos+cHeight-document.getElementById("master").offsetHeight;

if(a!=oldPosition){

document.getElementById("master").style.top = a+'px';

oldPosition = a;

}

window.setInterval("flow()",1);

</script>

Javascript2009年4月22日2011年10月19日

分类：前端开发

jquery ui accordion高度自适应

WEB下使用的OFFICE控件介绍

IE图片预加载

jquery技巧: 图片大小自适应

jQuery的radio,checkbox,select操作

浏览器兼容性测试工具大全

escape、encodeURI 和encodeURIComponent 的区别

pjblog css架构

浮动页面下方层

prototype.js

网站配色,CSS主色调配色方案

几种典型配色方案

漫谈网站的logo设计

如何做一名优秀的UI设计师

网页设计中的文字运用

平面设计常见表现手法

形成视觉冲击的几种方式

网页色彩的搭配

用VBScript实现对Windows注册表的修改

VBScript 函数集

VBScript 词汇表

VBScript 区域设置 ID (LCID) 表

VBScript 字符集

VBScript 语法错误

VBScript 运行时错误