又一些CSS代码

CSS实现的中英文双语导航菜单

<div id=""top"">
<ul>
<ul>
	<li><a class=""bi"" href=""index.html"">Home<span>首　页</span></a></li>
</ul>
</ul>

<ul>
<ul>
	<li><a class=""bi"" href=""about.html"">About us<span>关于我们</span></a></li>
</ul>
</ul>

<ul>
<ul>
	<li><a class=""bi"" href=""products.html"">Products<span>产品展示</span></a></li>
</ul>
</ul>

<ul>
<ul>
	<li><a class=""bi"" href=""services.html"">Services<span>售后服务</span></a></li>
</ul>
</ul>

<ul>
<ul>
	<li><a class=""bi"" href=""contact.html"">Contact<span>联系我们</span></a></li>
</ul>
</ul>






</div>

小方框中浏览大图

<script type="text/javascript">// <![CDATA[

<!--
var p = new Array();
var speed = 0.05;  //速度
var picWidth = 1280;  // 大图的宽高
var picHeight = 971;
var x,y // 鼠标点下去时背景的坐标
var x_new,y_new  //位移
var haveclick = false;

function getmouseposition(event)
{
	if(document.all)
	{
		x = document.body.scrollLeft+event.clientX;
		y = document.body.scrollTop+event.clientY;
	}else
	{
		x = event.layerX;
		y = event.layerY;
	}	
	haveclick = true;
}
function movestop()
{
	haveclick = false;
}

function movestart(event)
{
if(haveclick)
{
	if(document.getElementById('pic').style.backgroundPosition.length==0)
		{document.getElementById('pic').style.backgroundPosition="0px 0px";}
	p = document.getElementById('pic').style.backgroundPosition.split(" ")

	if(document.all)
	{	
		x_new = document.body.scrollLeft+event.clientX;
		y_new = document.body.scrollTop+event.clientY;
	}else
	{	 
		x_new = event.layerX;
		y_new = event.layerY;	
	}

	x2 = (speed*(x_new-x)+parseInt(p[0])).toString(10);    // 计算位移量
	y2 = (speed*(y_new-y)+parseInt(p[1])).toString(10);

	if (x2<-picWidth+420) x2=-picWidth+420;
	if (y2>0) y2=0;
	if (x2>0) x2=0;
	if (y2<-picHeight+300) y2=-picHeight+300;

	document.getElementById('pic').style.backgroundPosition=x2+"px "+y2+"px";
}
}
-->
// ]]></script>

简洁的表单验证程序

<script type="text/javascript" language=""JavaScript"">// <![CDATA[

//程序基本思路：通过扩展对象来实现，将String扩展 将默认的表单元素扩展 定义两个自定义对象。
//String.isEmail
//String.isUrl
//表单元素.required
//表单元素.isvalid
//表单元素.validate
//

//字符串验证扩展
//├电子邮件验证
String.prototype.isEmail = function(){
	var tmpStr = this;
	var email = /^w+([-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*$/;
	return email.test(tmpStr)
}
//├http地址验证
String.prototype.isUrl = function(){
	var url = /^http://[A-Za-z0-9]+.[A-Za-z0-9]+[/=?%-&amp;_~`@[]':+!]*([^<>""])*$/;
	var tmpStr = this;
	return url.test(tmpStr);
}
//├日期验证（第一部分）
String.prototype.isDateTime = function(){
	if(Date.parse(this)||Date.parseDate(this))
	{
		return true;
	}
	else
	{
		return false;
	}
}
String.prototype.isInteger = function()
{
	var _i = /^[-+]?d+$/;
	var _s = this; 
	return _i.test(_s);
}
Date.prototype.toIsoDate = function()
{
	var _d = this;
	var _s;
	_Y =_d.getFullYear();
	_M = _d.getMonth() + 1;
	_D = _d.getDate();
	_H = _d.getHours();
	_I = _d.getMinutes();
	_S = _d.getSeconds();
	with(_d)
	{
		_s = [getMonth() + 1,getDate(),getHours(),getMinutes(),getSeconds()];
	}
	for(var i = 0; i < _s.length; i++)
	{
		if (_s<i>.toString().length == 1)_s<i>= '0'+_s<i>;
	}
		return (_Y + '-'+_s[0]+'-'+_s[1]+' '+_s[2]+':'+_s[3]+':'+_s[4])
}
//├日期验证（第二部分）
Date.parseDate = function(str, fmt) {
	fmt = fmt||"%Y-%m-%d %H:%M";
	var today = new Date();
	var y = 0;
	var m = -1;
	var d = 0;
	var a = str.split(/W+/);
	var b = fmt.match(/%./g);
	var i = 0, j = 0;
	var hr = 0;
	var min = 0;
	for (i = 0; i < a.length; ++i) {
		if (!a<i>)
			continue;
		switch (b<i>) {
		    case "%d":
		    case "%e":
			d = parseInt(a<i>, 10);
			break;

		    case "%m":
			m = parseInt(a<i>, 10) - 1;
			break;

		    case "%Y":
		    case "%y":
			y = parseInt(a<i>, 10);
			(y < 100) &amp;&amp; (y += (y > 29) ? 1900 : 2000);
			break;

		    case "%b":
		    case "%B":
			for (j = 0; j < 12; ++j) {
				if (Calendar._MN[j].substr(0, a<i>.length).toLowerCase() == a<i>.toLowerCase()) { m = j; break; }
			}
			break;

		    case "%H":
		    case "%I":
		    case "%k":
		    case "%l":
			hr = parseInt(a<i>, 10);
			break;

		    case "%P":
		    case "%p":
			if (/pm/i.test(a<i>) &amp;&amp; hr < 12)
				hr += 12;
			else if (/am/i.test(a<i>) &amp;&amp; hr >= 12)
				hr -= 12;
			break;

		    case "%M":
			min = parseInt(a<i>, 10);
			break;
		}
	}
	if (isNaN(y)) y = today.getFullYear();
	if (isNaN(m)) m = today.getMonth();
	if (isNaN(d)) d = today.getDate();
	if (isNaN(hr)) hr = today.getHours();
	if (isNaN(min)) min = today.getMinutes();
	if (y != 0 &amp;&amp; m != -1 &amp;&amp; d != 0)
		return new Date(y, m, d, hr, min, 0);
	y = 0; m = -1; d = 0;
	for (i = 0; i < a.length; ++i) {
		if (a<i>.search(/[a-zA-Z]+/) != -1) {
			var t = -1;
			for (j = 0; j < 12; ++j) {
				if (Calendar._MN[j].substr(0, a<i>.length).toLowerCase() == a<i>.toLowerCase()) { t = j; break; }
			}
			if (t != -1) {
				if (m != -1) {
					d = m+1;
				}
				m = t;
			}
		} else if (parseInt(a<i>, 10) <= 12 &amp;&amp; m == -1) {
			m = a<i>-1;
		} else if (parseInt(a<i>, 10) > 31 &amp;&amp; y == 0) {
			y = parseInt(a<i>, 10);
			(y < 100) &amp;&amp; (y += (y > 29) ? 1900 : 2000);
		} else if (d == 0) {
			d = a<i>;
		}
	}
	if (y == 0)
		y = today.getFullYear();
	if (m != -1 &amp;&amp; d != 0)
		return new Date(y, m, d, hr, min, 0);
	return today;
};
//扩展完成

//对象定义

var vform = new Object;
//获取弹出提示的显示位置
vform.getAbsolutePos = function(el) {
	var _p = { x: 0, y: 0 };
	 do{
				_p.x += (el.offsetLeft - el.scrollLeft);
				_p.y += (el.offsetTop - el.scrollTop); 
		}
		 while(el=el.offsetParent)
     return _p;
      };
vform.toString = function()
{
	return("vForm表单验证程序
版本：1.0beta
作者：雷晓宝
时间：2006-07-31
网址：<a href="http://lxbzj.com" target="_blank">http://lxbzj.com</a>
许可：LGPL");
}
vform.rules = new Array;
vform.rules.add = function(obj,minLength,dataType,errmsg,maxLength,rule,patams)
{
    var curlen = this.length;
        this[curlen] = [obj,minLength,dataType,errmsg,maxLength,rule,patams];
        //this[curlen] = [ 0 ,    1    ,    2   ,   3  ,   4  ,  5 ,   6  ];

    return this.length;
}
vform.init= function()
{
	if(document.getElementById(this.form_id))
	{
		//获取表单
		var o = document.getElementById(this.form_id);
		//遍历规则
		for(var i = 0 ;i< this.rules.length;i++)
		{
			_r = this.rules<i>
			//如果存在元素，则添加验证程序
			if(_o = o.elements[_r[0]])
			{
				//判断是是否必填,是否有最小长度
				if(_r[1] > 0 )
				{
					_o.required = true;//必填的含义和最小长度为1是一样的
					_o.minLength = parseInt(_r[1]);
				}
				else
				{
					_o.required = false;
					_o.minLength = 0;
				}
				//判断是否有最大长度;
				if(_r[4])
				{
					_o.maxLength = parseInt(_r[4]);
				}
				//添加长度验证函数
				_o.validLength = function ()
				{
					var b =true;
					if(this.minLength)
					{
						b = (this.minLength <= this.value.length);
					}
					if(this.type == 'textarea' &amp;&amp; this.maxLength )
					{
						b = b &amp;&amp; (this.maxLength >= this.value.length );
					}
					return (b);
				}
				//添加验证，进行格式验证
				switch(_r[2])
				{
					case 'e-mail':
						_o.validate = function()
						{
							this.isvalid = this.validLength() &amp;&amp; this.value.isEmail();
							return (this.isvalid);
						};
						break;
					case 'url':
						_o.validate = function()
						{
							if (this.value.substring(0,7) != '<a href="http://" target="_blank">http://</a>')this.value = '<a href="http://" target="_blank">http://</a>' +this.value;
							this.isvalid = this.validLength() &amp;&amp; this.value.isUrl();
							return (this.isvalid);
						}
						break;
					case 'date':
						_o.validate = function()
						{
							var _d = Date.parse(this.value)||Date.parseDate(this.value);
							this.value =  _d.toIsoDate();

							this.isvalid = this.validLength() &amp;&amp; this.value.isDateTime();
							return (this.isvalid);
							a=a>b?1:1;
						}
						break;
					case 'number':
						_o.validate = function()
						{
							this.isvalid = this.validLength() &amp;&amp; this.value.isInteger();
							return (this.isvalid);

						}
						break;
					case 'any':
						_o.validate = function()
						{
							this.isvalid = this.validLength();
							return  this.isvalid
						}
						break;
					default :
						var regexp = /^w+$/;
						if ( regexp.test(_r[2]))//表示必须和同表单下的某个字段的值一样。用于重复输入的验证
						{
							_el = _r[2].substring(1);
							if (o.elements[_el]){
								_o.equal = _el;
								_o.validate = function()
								{
									if(_o = this.form.elements[this.equal])
									{
										if ( (_o.value == this.value) &amp;&amp; this.validLength())
										{
											return true;
										}else {
										return false;
										}
									}else{
										alert('setup error');
									}

								}
							}else
							{
								alert(_el + 'is not a valid form element');
								_o.validate = function(){return true;}
							}
						}
						var regexp1 = /^(==|!=|>=|<=|>|<)/;
						if ( regexp1.test(_r[2]) )
						{
							_s0 = _r[2];
							_s1 = RegExp.$1;
							_s2 = _s0.replace(regexp1,'');
							_operator = _s1.substring(0);//比较操作符
							var regexp2 = /^w+$/;
							if (regexp2.test(_s2))//是一个标志符，整数 或者变量
							{
								_o.operation = _operator+_s2;
								_o.validate = function()
								{
									_b = true;
									if (this.value.length !=0)
									{
										_b = eval(this.value+this.operation+';');
									}									
									_b = _b &amp;&amp; this.validLength();
									return _b;
								}
							}
						};
						break;

				}
				//添加验证提示(div标签)并初始化
				var _p = vform.getAbsolutePos(_o);
				_o.tip = new tip(_r[3],vform.err_class,_p.x+_o.offsetWidth+3,_p.y);

				_o.tip.init();
				//失去焦点时，开始验证
				_o.onblur =function(e)
				{
					if(this.minLength || this.value.length >0) 
					{ 
						if( this.validate() )
						{
							this.tip.hide();
						}else
						{
							this.tip.show();//显示错误信息
							//this.focus(); 添加这句在ie里会导致死循环 :(
							return false;
						}
					}
				}
			}
		}
	//焦点验证可能会失败,所以最后需要表单提交前的验证作为最后的补充。
		document.getElementById(this.form_id).onsubmit = function()
		{
			var valid = true;
			for(i=0;i
<this.elements.length;i++)
			{
				_o = this.elements<i>;
				if(_o.minLength &amp;&amp; !_o.isvalid)
				{
					_o.tip.show();
					valid = false;
				}
			}
			return valid;
		}
	}
}
//弹出提示定义
function tip(text,className,x,y)
{
	var o = document.createElement("div");
	o.style.display = "none";
	o.innerHTML = text;
	//var t = document.createTextNode(text);
	document.body.appendChild(o);
	//o.appendChild(t);

	this.init = function(dis)
	{
		o.className = "info";
		o.style.left = x+"px";
		o.style.top = y+"px";
		o.style.zindex = 100;
		if(dis)
		{
			o.style.display = "";
		}
		else
		{
			o.style.display = "none";
		}
	}
	this.show = function()
	{
		o.style.display = "";
	}
	this.hide = function()
	{
		o.style.display = "none";
	}
}

function start()
{
		vform.form_id = 'form1';//必须是表单的id
		vform.err_class = 'info';//出错提示的样式
	//验证规则，逐条填写
vform.rules.add('frm_name',1,'e-mail','请您按照 user@domain.com 的格式输入电子邮件地址。
<span style="color:#f00">必填项目</span>');
		vform.rules.add('myweb',1,'url','请您按照 <a href="http://" target="_blank">http://</a>www.domain.com 的格式输入您的网址。
<span style="color:#f00">必填项目</span>');
		vform.rules.add('dateinput',0,'date','请按2000-03-05 的格式输入日期。
<span style="color:#f00">必填项目</span>');
		vform.rules.add('qq',0,'number','这必须是一个整数');
		vform.rules.add('least10',10,'any','您必须至少填写10个
<span style="color:#f00">必填项目</span>');
		vform.rules.add('ok100',1,'any','这里被限制为100个字符
<span style="color:#f00">必填项目</span>',100);
		vform.rules.add('r_pass0',5,'any','密码最短5位最长20位
<span style="color:#f00">必填项目</span>',20);
		vform.rules.add('r_pass1',5,"
_pass0",'确认密码错误
<span style="color:#f00">必填项目</span>',20);
		vform.rules.add('frm_sel',1,">2",'必须大于2000
<span style="color:#f00">必填项目</span>');
		vform.init();

}

// ]]></script>
<form id=""form1"" action="""" method=""get"" name=""form1""><label for=""frm_name"">e-mail: <input id=""frm_name"" class=""text_input"" title=""输入一个电子邮箱地址"/" type=""text"" name=""frm_name"" /> </label>
*<label for=""r_pass0"">输入密码：</label>

<input id=""r_pass0"" class=""text_input"" title=""输入您希望的密码" type=""text"" name=""r_pass0"" />
*

<label for=""r_pass1"">密码确认：</label>

<input id=""r_pass1"" class=""text_input"" title=""将密码确认一次"" type=""text"" name=""r_pass1"" />
*

<label for=""frm_sel"">选择：
</label>

请选择一个答案

1000

2000

3000

4000

5000

6000

*



<label for=""input3"">输入网址：</label>

<input id=""input3"" class=""text_input"" title=""输入一个网址"" onmousemove="""" type=""text"" name=""myweb"" value=""<a" />http://" maxlength="100"/>

*

<label for=""dateinput"">输入日期</label>

<input id=""dateinput"/" class=""text_input"" title=""输入一个日期"" type=""text"" name=""dateinput"" />
*

<label for=""mub"">输入数字</label>

<input id=""mub"/" class=""text_input"" title=""填写数字"" type=""text"" name=""qq"" />

<label for=""len"">输入任意但长度限制为10个</label>

<input id=""len"/" class=""text_input"" type=""text"" name=""least10"" maxlength=""88"" /> *


<label for=""text"">只能输入100个
<textarea id=""text"" title=""详细内容"" name=""ok100"" rows=""5"" cols=""40""></textarea>
*
</label>





<input type=""submit"" name=""Submit"" value=""提交"" /> <button onclick=""alert(vform)"">关于验证程序</button>

</form><!--具体的日期设置，必须放在body的结束标签前面-->
<script type="text/javascript">// <![CDATA[

		vform .init();
				Calendar.setup({
			inputField     :    "dateinput",   // 把这个改成你需要的 id
			ifFormat       :    "%Y-%m-%d %H:%M", // format of the input field
			showsTime      :    true,
			//button		   :    "dateinput_btn", 
			timeFormat     :    "24"
		 });
	
// ]]></script>
<!--END具体的日期设置，必须放在body的结束标签前面-->
<div class=""title"">
<h1>vForm1.0beta</h1>

<ul>
<ul>
	<li>作者：雷晓宝</li>
</ul>
</ul>

<ul>
<ul>
	<li>时间：2006-08-08</li>
</ul>
</ul>

<ul>
<ul>
	<li>网址：<a href=""http://lxbzj.com"" target=""_blank"">http://lxbzj.com</a></li>
</ul>
</ul>

<ul>
<ul>
	<li>e-mail:lxbzmy@163.com</li>
</ul>
</ul>

<ul>
<ul>
	<li>许可：LGPL</li>
</ul>
</ul>



<h2>功能简述：</h2>

<ol>
<ol>
	<li>
<h3>验证：</h3>

<ul>
<ul>
	<li>http地址。</li>
</ul>
</ul>

<ul>
<ul>
	<li>时间日期</li>
</ul>
</ul>

<ul>
<ul>
	<li>e-mail</li>
</ul>
</ul>

<ul>
<ul>
	<li>数字</li>
</ul>
</ul>

<ul>
<ul>
	<li>字符长度检查</li>
</ul>
</ul>

<ul>
<ul>
	<li>一项输入与另一项输入比较（例如：密码的确认输入）</li>
</ul>
</ul>

<ul>
<ul>
	<li>大小比较（只能有一个比较符号）</li>
</ul>
</ul>


</li>
</ol>
</ol>

<ol>
<ol>
	<li>
<h3>特点</h3>

<ul>
<ul>
	<li>扩展容易，可以方便的添加自己需要的验证方式</li>
</ul>
</ul>

<ul>
<ul>
	<li>兼容性好（ie5,6 firefox,oprea）。</li>
</ul>
</ul>

<ul>
<ul>
	<li>可用性好，没有使用alert()来弹出提示;</li>
</ul>
</ul>


</li>
</ol>
</ol>





<h2>使用方法</h2>


使用时，需要定义一个出错提示框的样式，本例的样式为：<code>div.info {
width: 170px;</code>

overflow:visible;

height:auto;

font-size: small;

position: absolute;

background-color: #FFffdd;

border: 1px solid #000;

filter:progid:DXImageTransform.Microsoft.Shadow(color=#111111,direction=135,strength=3);

padding: 5px;

}



然后在网页部分中添加<code><script type="text/javascript" src=""calendar/calendar.js""></script></code>

，然后可以写一个函数设置表单名称，验证规则，<code>function start()</code>

{

vFormvform.form_id = 'form1';

vform.err_class = 'info';

// (obj,required(true/false),dataType,errmsg,minlen,maxlen,rule,patams)

//验证规则，逐条填写

vform.rules.add('frm_name',1,'e-mail','请您按照 user@domain.com 的格式输入电子邮件地址。
<span>必填项目</span>');

vform.rules.add('myweb',1,'url','请您按照 <a href=""http://"" target=""_blank"">http://</a>www.domain.com 的格式输入您的网址。
<span>必填项目</span>');

vform.rules.add('dateinput',0,'date','请按2000-03-05 的格式输入日期。
<span>必填项目</span>');

vform.rules.add('qq',0,'number','这必须是一个整数');

vform.rules.add('least10',10,'any','您必须至少填写10个
<span>必填项目</span>');

vform.rules.add('ok100',1,'any','这里被限制为100个字符
<span>必填项目</span>',100);

vform.init();

}最后为body添加onload事件。 <code>
</code>




</div>


 
 

模仿IE自动完成功能

 
 
 
 New Document 
 
 
 

<script type="text/javascript" language=""JavaScript"">// <![CDATA[

<!--

// script by blueDestiny
// email : blueDestiny [at] 126 . com

// Object: jsAuto
// browser: ie, mf.
// example:

// step1 : 
// create autocomplete container, return object and bind event to the object, and 
///create a new jsAuto instance:
//
<div id="divautocomplete"></div>

// var autocomplete = new jsAuto("autocomplete","divautocomplete")
// handle event:
// autocomplete.handleEvent(value, returnObjectID)
//
<input id="rautocomplete" onkeyup="autocomplete.handleEvent(this.value,"ratocomplete",event)>

// step2 :
// add autocompete item:
// autocomplete.item(string)
// string must be a string var, you can split the string by ","
// autocomplete.item("blueDestiny,never-online,csdn,blueidea")

// <a href="http://" target="_blank">http://</a>www.never-online.com

function jsAuto(instanceName,objID)
{
	this._msg = [];
	this._x = null;
	this._o = document.getElementById( objID );
	if (!this._o) return;
	this._f = null;
	this._i = instanceName;
	this._r = null;
	this._c = 0;
	this._s = false;
	this._v = null;
	this._o.style.visibility = "hidden";
	this._o.style.position = "absolute";
	this._o.style.zIndex = "9999";
this._o.style.overflow = "auto";
this._o.style.height = "50";
	return this;
};

jsAuto.prototype.directionKey=function() { with (this)
{
	var e = _e.keyCode ? _e.keyCode : _e.which;
	var l = _o.childNodes.length;
	(_c>l-1 || _c<0) ? _s=false : "";

	if( e==40 &amp;&amp; _s )
	{
		_o.childNodes[_c].className="mouseout";
		(_c >= l-1) ? _c=0 : _c ++;
		_o.childNodes[_c].className="mouseover";
	}
	if( e==38 &amp;&amp; _s )
	{
		_o.childNodes[_c].className="mouseout";
		_c--<=0 ? _c = _o.childNodes.length-1 : "";
		_o.childNodes[_c].className="mouseover";
	}
	if( e==13 )
	{
		if(_o.childNodes[_c] &amp;&amp; _o.style.visibility=="visible")
		{
			_r.value = _x[_c];
			_o.style.visibility = "hidden";
		}
	}
	if( !_s )
	{
		_c = 0;
		_o.childNodes[_c].className="mouseover";
		_s = true;
	}
}};

// mouseEvent.
jsAuto.prototype.domouseover=function(obj) { with (this)
{
	_o.childNodes[_c].className = "mouseout";
	_c = 0;
	obj.tagName=="DIV" ? obj.className="mouseover" : obj.parentElement.className="mouseover";
}};
jsAuto.prototype.domouseout=function(obj)
{
	obj.tagName=="DIV" ? obj.className="mouseout" : obj.parentElement.className="mouseout";
};
jsAuto.prototype.doclick=function(msg) { with (this)
{
	if(_r)
	{
		_r.value = msg;
		_o.style.visibility = "hidden";
	}
	else
	{
		alert("javascript autocomplete ERROR :

 can not get return object.");
		return;
	}
}};

// object method;
jsAuto.prototype.item=function(msg)
{
	if( msg.indexOf(",")>0 )
	{
		var arrMsg=msg.split(",");
		for(var i=0; i<arrMsg.length; i++)
		{
			arrMsg<i> ? this._msg.push(arrMsg<i>) : "";
		}
	}
	else
	{
		this._msg.push(msg);
	}
	this._msg.sort();
};
jsAuto.prototype.append=function(msg) { with (this)
{
	_i ? "" : _i = eval(_i);
	_x.push(msg);
	var div = document.createElement("DIV");

	//bind event to object.
	div.onmouseover = function(){_i.domouseover(this)};
	div.onmouseout = function(){_i.domouseout(this)};
	div.onclick = function(){_i.doclick(msg)};
	var re  = new RegExp("(" + _v + ")","i");
	div.style.lineHeight="140%";
	div.className = "mouseout";
	if (_v) div.innerHTML = msg.replace(re , "<strong>$1</strong>");
	div.style.fontFamily = "verdana";

	_o.appendChild(div);
}};
jsAuto.prototype.display=function() { with(this)
{
	if(_f&amp;&amp;_v!="")
	{
		_o.style.left = _r.offsetLeft;
		_o.style.width = _r.offsetWidth;
		_o.style.top = _r.offsetTop + _r.offsetHeight;
		_o.style.visibility = "visible";
	}
	else
	{
		_o.style.visibility="hidden";
	}
}};
jsAuto.prototype.handleEvent=function(fValue,fID,event) { with (this)
{
	var re;
	_e = event;
	var e = _e.keyCode ? _e.keyCode : _e.which;
	_x = [];
	_f = false;
	_r = document.getElementById( fID );
	_v = fValue;
	_i = eval(_i);
	re = new RegExp("^" + fValue + "", "i");
	_o.innerHTML="";

	for(var i=0; i<_msg.length; i++)
	{
		if(re.test(_msg<i>))
		{
			_i.append(_msg<i>);
			_f = true;
		}
	}

	_i ? _i.display() : alert("can not get instance");

	if(_f)
	{
		if((e==38 || e==40 || e==13))
		{
			_i.directionKey();
		}
		else
		{
			_c=0;
			_o.childNodes[_c].className = "mouseover";
			_s=true;
		}
	}
}};
window.onerror=new Function("return true;");
//-->
// ]]></script>




<h1>Autocomplete Function</h1>

<div align=""center""><input id=""auto"" onkeyup=""jsAutoInstance.handleEvent(this.value,'auto',event)"" type="text" /></div>

<div id=""divf"">Power By Miracle, never-online</div>
<script type="text/javascript" language=""JavaScript"">// <![CDATA[

<!--
var jsAutoInstance = new jsAuto("jsAutoInstance","divc");
jsAutoInstance.item("a-start,b-start,c-start,d-start,e-start,f-start,g-start,h-start,i-start,j-start,k-start,l-start,m-start,n-start,o-start,p-start,q-start,r-start,s-start,t-start,u-start,v-start,w-start,x-start,y-start,z-start,z-start,a-start,b-start,c-start,d-start,e-start,f-start,g-start,h-start,i-start,j-start,k-start,l-start,m-start,n-start,o-start,p-start,q-start,r-start,s-start,t-start,u-start,v-start,w-start,x-start,y-start,z-start,z-start,a-start,b-start,c-start,d-start,e-start,f-start,g-start,h-start,i-start,j-start,k-start,l-start,m-start,n-start,o-start,p-start,q-start,r-start,s-start,t-start,u-start,v-start,w-start,x-start,y-start,z-start,z-start,a-start,b-start,c-start,d-start,e-start,f-start,g-start,h-start,i-start,j-start,k-start,l-start,m-start,n-start,o-start,p-start,q-start,r-start,s-start,t-start,u-start,v-start,w-start,x-start,y-start,z-start,z-start,a-start,b-start,c-start,d-start,e-start,f-start,g-start,h-start,i-start,j-start,k-start,l-start,m-start,n-start,o-start,p-start,q-start,r-start,s-start,t-start,u-start,v-start,w-start,x-start,y-start,z-start,z-start,a-start,b-start,c-start,d-start,e-start,f-start,g-start,h-start,i-start,j-start,k-start,l-start,m-start,n-start,o-start,p-start,q-start,r-start,s-start,t-start,u-start,v-start,w-start,x-start,y-start,z-start,z-start,a-start,b-start,c-start,d-start,e-start,f-start,g-start,h-start,i-start,j-start,k-start,l-start,m-start,n-start,o-start,p-start,q-start,r-start,s-start,t-start,u-start,v-start,w-start,x-start,y-start,z-start,z-start,a-start,b-start,c-start,d-start,e-start,f-start,g-start,h-start,i-start,j-start,k-start,l-start,m-start,n-start,o-start,p-start,q-start,r-start,s-start,t-start,u-start,v-start,w-start,x-start,y-start,z-start,z-start,a-start,b-start,c-start,d-start,e-start,f-start,g-start,h-start,i-start,j-start,k-start,l-start,m-start,n-start,o-start,p-start,q-start,r-start,s-start,t-start,u-start,v-start,w-start,x-start,y-start,z-start,z-start,a-start,b-start,c-start,d-start,e-start,f-start,g-start,h-start,i-start,j-start,k-start,l-start,m-start,n-start,o-start,p-start,q-start,r-start,s-start,t-start,u-start,v-start,w-start,x-start,y-start,z-start,z-start,a-start,b-start,c-start,d-start,e-start,f-start,g-start,h-start,i-start,j-start,k-start,l-start,m-start,n-start,o-start,p-start,q-start,r-start,s-start,t-start,u-start,v-start,w-start,x-start,y-start,z-start,z-start,a-start,b-start,c-start,d-start,e-start,f-start,g-start,h-start,i-start,j-start,k-start,l-start,m-start,n-start,o-start,p-start,q-start,r-start,s-start,t-start,u-start,v-start,w-start,x-start,y-start,z-start,z-start");
jsAutoInstance.item("blueDestiny");
jsAutoInstance.item("BlueMiracle,Blue");
jsAutoInstance.item("angela,geniuslau");
jsAutoInstance.item("never-online");
//-->
// ]]></script>

模仿combox(select)控件

simulate combox control - <a href=""http://"" target=""_blank"">http://</a>www.never-online.net



<script type="text/javascript" language=""JavaScript"">// <![CDATA[

<!--
//-------------------------------------------------------------
//  @ Module: simulate select control, IE only.
//  @ Debug in: IE 6.0
//  @ Script by: blueDestiny, never-online
//  @ Up&#100;ated: 2006-3-22
//  @ Version: 1.0 apha
//  @ Email: blueDestiny [at] 126.com
//  @ Website: <a href="http://" target="_blank">http://</a>www.never-online.net
//  @ Please Hold this item please.
//
//  API
//  @ class: simulateSelect()
//
//  @ object.style(ctlStyle[,selStyle][,unselStyle])
//    ctlStyle: main control combox css class name
//    selStyle: when mouseover o&#114; option focus css class name
//    unselStyle: options blur's css class name
//
//  @ object.width=(widthPX)
//    widthPX must be a digit number.
//
//  @ object.height=(heightPX)
//    heightPX must be a digit number.
//
//  @ object.getValue(ctlSelID)
//    ctlSelID is the unique select control ID
//
//  -------------- for the next Version ----------
//  @ object.readOnly = (blnReadOnly)
//    blnReadOnly must be a boolean type o&#114; a number type.
//  @ object.addEvent(w, h)
//    w: fire handler's event.
//    h: handler function.
//-------------------------------------------------------------

function $(objID)
{
	return document.getElementById(objID);
};
function Offset(e)
{
	var t = e.offsetTop;
	var l = e.offsetLeft;
	var w = e.offsetWidth;
	var h = e.offsetHeight-2;

	while(e=e.offsetParent)
	{
		t+=e.offsetTop;
		l+=e.offsetLeft;
	}
	return {
		top : t,
		left : l,
		width : w,
		height : h
	}
}
//-----------------------------------------------
function simulateSelect() { with(this)
{
	this.IDs = [];
	this.name = this;
	//  property for beta Version
	//  can editable combox
	this.readonly = true;
	this.height = 20;
	this.width = null;
	this.ctlStyle = "CtlSelect";
	this.selStyle = "selected";
	this.unselStyle = "unselected";
	this.elementPrefix = "e__";
	this.inputPrefix = "i__";
	this.containerPrefix = "c__";
	this.buttonPrefix = "b__";
	return this;
}};
simulateSelect.prototype.init = function(ctlSelIDs) { with(this)
{
	eval(name).append(ctlSelIDs);
	eval(name).simulates();
}};

simulateSelect.prototype.style = function() { with(this)
{
	ctlStyle = arguments[0];
	selStyle = arguments[1];
	unselStyle = arguments[2];

}};
//-----------------------------------------------
simulateSelect.prototype.append = function(ctlSelIDs) { with(this)
{
	if( ctlSelIDs.indexOf(",")>0 )
	{
		var arrCtlSel = ctlSelIDs.split(",");
		for(var i=0; i<arrCtlSel.length; i++)
		{
			eval(name).IDs.push(arrCtlSel<i>);
		}
	}
	else
	{
		eval(name).IDs.push(ctlSelIDs);
	}
}};
simulateSelect.prototype.checkupOnMouseDown = function(e) { with(this)
{
	// here compatible mf.
	var el = e ? e.srcElement: e.target;
	if( el.id.indexOf(elementPrefix)>-1 || 
	el.id.indexOf(inputPrefix)>-1 || 
	el.id.indexOf(containerPrefix)>-1 || 
	el.id.indexOf(buttonPrefix)>-1 )
	{
		return;
	}
	else
	{
		for(var i=0; i<eval(name).IDs.length; i++)
		if( $(containerPrefix + IDs<i>) )
		$(containerPrefix + eval(name).IDs<i>).style.display = "none";
	}

}};
simulateSelect.prototype.simulates = function() { with(this)
{
	for(var i=0; i<IDs.length; i++)
	eval(name).simulate(IDs<i>);
}};
simulateSelect.prototype.simulate = function(ctlSelID) { with (this)
{
	var input;
	var button;
	var object;
	var offset;

	object = $(ctlSelID);
	offset = Offset(object);
	input = document.createElement("INPUT");
	button = document.createElement("BUTTON");
	button.setAttribute("id", buttonPrefix + ctlSelID);
	//button.value = "⊿";
	button.value = "6";
	button.style.fontFamily = "Webdings, Marlett";
	button.style.background = "";
	button.onclick = input.onclick = function()
	{
		this.blur();
		eval(name).expand(ctlSelID, offset);
	}
	input.onselectstart = function() { eval(name).expand(ctlSelID, offset); event.returnValue = false; };
	input.setAttribute("id", inputPrefix + ctlSelID);
	input.title = button.title = "click expand options";
	input.style.cursor = button.style.cursor = "default";
	input.className = button.className = ctlStyle;
	input.style.width = (width>0 ? width : object.offsetWidth);
	height ? input.style.height=button.style.height=height : "";
	input.value = object[0].text;
	if( readonly==true ) input.readOnly=true;

	// this method is only IE.
	object.insertAdjacentElement("afterEnd",button);
	object.insertAdjacentElement("afterEnd",input);
	object.style.display = 'none';
}};
simulateSelect.prototype.expand = function(ctlSelID, offset) { with(this)
{
	var div, btn_off;
	var object = $(ctlSelID);

	if( !$(containerPrefix + ctlSelID) )
	{
		div = document.createElement("DIV");
		div.style.position = "absolute";
		div.style.display = "block";
		div.setAttribute("id", containerPrefix + ctlSelID);
		div.className = ctlStyle;
		div.style.left = offset.left;
		div.style.top = offset.top + offset.height;
		div.style.width = (width ? width : offset.width) + 20;
		div.style.height = offset.height;
		document.body.appendChild(div);

		for(var i=0; i<object.length; i++)
		{
			div = document.createElement("DIV");
			div.setAttribute("id", div.id = elementPrefix + ctlSelID + i);
			div.style.cursor = "default";

			if( object<i>.text==$(inputPrefix + ctlSelID).value )
			div.className = selStyle;
			else
			div.className = unselStyle;

			div.innerText = div.title = object<i>.text;
			div.style.height = height;
			div.setAttribute("value", object<i>.value);

			div.onmouseover = function()
			{
				for(var j=0; j<$(containerPrefix + ctlSelID).childNodes.length; j++)
				{
					if($(containerPrefix + ctlSelID).childNodes[j]==this)
					$(containerPrefix + ctlSelID).childNodes[j].className = selStyle;
					else
					$(containerPrefix + ctlSelID).childNodes[j].className = unselStyle;
				}						
			};
			div.onclick = function()
			{
				$(inputPrefix + ctlSelID).value = this.innerText;
				$(containerPrefix + ctlSelID).style.display = "none";
			};
			$(containerPrefix + ctlSelID).appendChild(div);
		}
		return;
	}

	if( $(containerPrefix + ctlSelID).style.display=="none" )
	{
		for(var i=0; i<object.length; i++)
		{
			if( object<i>.text==$(inputPrefix + ctlSelID).value )
			$(elementPrefix + ctlSelID + i).className = selStyle;
			else
			$(elementPrefix + ctlSelID + i).className = unselStyle;
		}
		$(containerPrefix + ctlSelID).style.display="block";
		return;
	}

	if( $(containerPrefix + ctlSelID).style.display=="block" )
	{
		$(containerPrefix + ctlSelID).style.display="none";
		return;
	}
}};
simulateSelect.prototype.getValue = function(ctlSelID) { with(this)
{
	if( $(inputPrefix + ctlSelID) )
	return $(inputPrefix + ctlSelID).value;
	else
	return null;
}};
simulateSelect.prototype.addEvent = function(w, h) { with(this)
{
}};
//-----------------------------------------------
//window.onerror = Function("return true;");
//  IE only.
document.attachEvent("onmousedown", function() {
						a.checkupOnMouseDown(event);
						b.checkupOnMouseDown(event);
						c.checkupOnMouseDown(event)
						}
					);
//-->
// ]]></script>
<h1>simulate combox control</h1>

<h4>demonstrate</h4>


- please select your options -



option1



option2



option3



option4



option5





- please select your options -



1option1



1option2



1option3



1option4



1option5





- please select your options -



2option1



2option2



2option3



2option4



2option5





- please select your options -



3option1



3option2



3option3



3option4



3option5



<button onclick=""alert(a.getValue('s1')">' + b.getValue('s2'))" class="CtlSelect"> Get value

</button>

<script type="text/javascript" language=""JavaScript"">// <![CDATA[

<!--
	var a = new simulateSelect();
	a.style("CtlSelect", "selected", "unselected");
	a.init("s1");
	var b = new simulateSelect();
	b.style("CtlSelect1", "selected1", "unselected1");
	b.width = 300;
	b.init("s2");
	var c = new simulateSelect();
	c.style("CtlSelect2", "selected2", "unselected2");
	c.width = 320;
	c.init("s3");
//-->
// ]]></script>
<h4>description</h4>

<pre>//-------------------------------------------------------------
//  @ Module: simulate select control, IE only.
//  @ Debug in: IE 6.0
//  @ Script by: blueDestiny, never-online
//  @ Updated: 2006-3-22
//  @ Version: 1.0 apha
//  @ Email: blueDestiny [at] 126.com
//  @ Website: <a href=""http://"" target=""_blank"">http://</a>www.never-online.net
//  @ Please Hold this item please.
//
//  API
//  @ simulateSelect(ctlSelIDs)
//    ctlSelIDs: select control IDs, split by ","
//
//  @ simulateSelect.style(ctlStyle[,selStyle][,unselStyle])
//    ctlStyle: main control combox css class name
//    selStyle: when mouseover or option focus css class name
//    unselStyle: options blur's css class name
//
//  @ simulateSelect.width=(widthPX)
//    widthPX must be a digit number.
//
//  @ simulateSelect.height=(heightPX)
//    heightPX must be a digit number.
//
//  -------------- for the next Version ----------
//  @ simulateSelect.readOnly = (blnReadOnly)
//    blnReadOnly must be a boolean type or a number type.
//  @ simulateSelect.addEvent(w, h)
//    w: fire handler's event.
//    h: handler function.
//-------------------------------------------------------------</pre>
<div class=""copyright"">Power By blueDestiny, never-online
<a href=""http://www.fightfly.com"" target=""_blank"">http://www.fightfly.com</a></div>

好看的按钮

用css定义渐变背景
1.颜色渐变

2.背景图渐变
<img src=""未命名-1.jpg"" alt="" width="400" height="300" />

3.表格颜色渐变
<table>
<tbody>
<tr>
<td>dkkkkkkkkkkkkkkkkkkkkk</td>
</tr>
</tbody>
</table>

<table style=""filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#1CA4FF',;">
<tbody>
<tr>
<td>fdsafdafdsafda</td>
</tr>
</tbody>
</table>


<button class="btn" title=""好看的按钮"">好看的按钮</button>



<button></button> onmouseover="this.className='btn1_mouseover'"
onmouseout="this.className='btn1_mouseout'"
title="好看的按钮">好看的按钮
<button></button> onmouseover="this.className='btn1_mouseover'"
onmouseout="this.className='btn1_mouseout'" DISABLED>好看的按钮


<button class="btn2" title=""好看的按钮"">好看的按钮</button>
<button class="btn3_mouseout" onmouseover=""this.className='btn3_mouseover'"<br"></button> onmouseout="this.className='btn3_mouseout'"
onmousedown="this.className='btn3_mousedown'"
onmouseup="this.className='btn3_mouseup'"
title="好看的按钮">好看的按钮
<button class="btn_2k3" title=""好看的按钮"">好看的按钮</button>

<div align=""center""><img src=""images/weather/hn2_sunny.gif"" alt="" width=""9"" height=""9"" /></div>


搜索结果