runoo' blog - 网站代码

方便快捷让我迷倒的jquery

jordanqiu@msn.com(admin) — Sun,28 Sep 2008 13:18:32 +0800

超级方便的编写，不用再去写getElementById，getElementByTagName，不用在去for(i=1;i<×.length,i++)，不用去担心ie和ff的兼容，超多共享的插件，还有那让人着迷的$美刀，哈哈，js狂泻n行，jquery三言两语搞定，没有办法不喜欢，一些随之简单，方便，快捷，
收集了一些jquery的资料
jquery官方网站
jquery ui里面有很多经典的
jquery中文api帮助
cssrain 起步学不错里面有很多案例
www.cnjquery.com/
50多个强大的jQuery插件应用实例

动画效果打开层关闭层

jordanqiu@msn.com(admin) — Wed,09 Apr 2008 09:22:05 +0800

HTML代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>DOM_text01</title>
<style type="text/css">
body,span,div,td{font-size:12px;line-height:1.5em;color:#849BCA;}
#bodyL{
	float:left;
	width:84px;
	margin-right:2px;
}
a.od{
	width:80px;
	height:25px;
	line-height:25px;
	text-align:center;
	font-weight:bold;
	border: 2px solid #849BCA;	
	display:block;
	color:#547BC9;
	float:left;
	text-decoration:none;
	margin-top:2px;
}
a.od:link{
	background:#EEF1F8;
}
a.od:visited{
	background:#EEF1F8;
}
a.od:hover{
	background:#EEE;
}
a.od:active{
	background:#EEE;
}
#fd{	
	width:500px;
	height:200px;
	background:#EDF1F8;	
	border: 2px solid #849BCA;
	margin-top:2px;
	margin-left:2px;
	float:left;
	overflow:hidden;
	position:absolute;
	left:0px;
	top:0px;
	cursor:move;
	float:left;
	/*filter:alpha(opacity=50);*/
	
}
.content{
	padding:10px;
}
</style>
</head>
<body>
<div id="bodyL">
	<a href="#" class="od" onclick = "show('fd');return false;">
		[打开层]
	</a>
	<a href="#" class="od" onclick = "closeed('fd');return false;">
		[关闭层]
	</a>
</div>	
<div id="fd" style="display:none;filter:alpha(opacity=100);opacity:1;">
	<div class="content">移动层</div>	
</div>
	
<script type="text/javascript">
	var prox;
	var proy;
	var proxc;
	var proyc;
	function show(id){/*--打开--*/
		clearInterval(prox);
		clearInterval(proy);
		clearInterval(proxc);
		clearInterval(proyc);
		var o = document.getElementById(id);
		o.style.display = "block";
		o.style.width = "1px";
		o.style.height = "1px"; 
		prox = setInterval(function(){openx(o,500)},10);
	}	
	function openx(o,x){/*--打开x--*/
		var cx = parseInt(o.style.width);
		if(cx < x)
		{
			o.style.width = (cx + Math.ceil((x-cx)/5)) +"px";
		}
		else
		{
			clearInterval(prox);
			proy = setInterval(function(){openy(o,200)},10);
		}
	}	
	function openy(o,y){/*--打开y--*/	
		var cy = parseInt(o.style.height);
		if(cy < y)
		{
			o.style.height = (cy + Math.ceil((y-cy)/5)) +"px";
		}
		else
		{
			clearInterval(proy);			
		}
	}	
	function closeed(id){/*--关闭--*/
		clearInterval(prox);
		clearInterval(proy);
		clearInterval(proxc);
		clearInterval(proyc);		
		var o = document.getElementById(id);
		if(o.style.display == "block")
		{
			proyc = setInterval(function(){closey(o)},10);			
		}		
	}	
	function closey(o){/*--打开y--*/	
		var cy = parseInt(o.style.height);
		if(cy > 0)
		{
			o.style.height = (cy - Math.ceil(cy/5)) +"px";
		}
		else
		{
			clearInterval(proyc);				
			proxc = setInterval(function(){closex(o)},10);
		}
	}	
	function closex(o){/*--打开x--*/
		var cx = parseInt(o.style.width);
		if(cx > 0)
		{
			o.style.width = (cx - Math.ceil(cx/5)) +"px";
		}
		else
		{
			clearInterval(proxc);
			o.style.display = "none";
		}
	}	
	
	
	/*-------------------------鼠标拖动---------------------*/	
	var od = document.getElementById("fd");	
	var dx,dy,mx,my,mouseD;
	var odrag;
	var isIE = document.all ? true : false;
	document.onmousedown = function(e){
		var e = e ? e : event;
		if(e.button == (document.all ? 1 : 0))
		{
			mouseD = true;			
		}
	}
	document.onmouseup = function(){
		mouseD = false;
		odrag = "";
		if(isIE)
		{
			od.releaseCapture();
			od.filters.alpha.opacity = 100;
		}
		else
		{
			window.releaseEvents(od.MOUSEMOVE);
			od.style.opacity = 1;
		}		
	}
	
	
	//function readyMove(e){	
	od.onmousedown = function(e){
		odrag = this;
		var e = e ? e : event;
		if(e.button == (document.all ? 1 : 0))
		{
			mx = e.clientX;
			my = e.clientY;
			od.style.left = od.offsetLeft + "px";
			od.style.top = od.offsetTop + "px";
			if(isIE)
			{
				od.setCapture();				
				od.filters.alpha.opacity = 50;
			}
			else
			{
				window.captureEvents(Event.MOUSEMOVE);
				od.style.opacity = 0.5;
			}
			
			//alert(mx);
			//alert(my);
			
		} 
	}
	document.onmousemove = function(e){
		var e = e ? e : event;
		
		//alert(mrx);
		//alert(e.button);		
		if(mouseD==true && odrag)
		{		
			var mrx = e.clientX - mx;
			var mry = e.clientY - my;	
			od.style.left = parseInt(od.style.left) +mrx + "px";
			od.style.top = parseInt(od.style.top) + mry + "px";			
			mx = e.clientX;
			my = e.clientY;
			
		}
	}
	
	
</script>
</body>
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

css技巧之PDF、ZIP、DOC链接的标注

jordanqiu@msn.com(admin) — Tue,04 Sep 2007 17:32:49 +0800

有时候我们希望能明确的用小图标来标明我们的超链接的类型。是一个zip文档还是一个pdf文件。这样访问者就知道他所要点击的这个链接是下载而不是打开另一个页面了。如果所有的人都使用IE7或者FF的话。我们完全可以使用[att$=val]属性选择器，寻找以特定值（比如.zip和.doc）结尾的属性。

程序代码

a[href$=".pdf"] { padding-right: 19px; background: url(pdf.gif) no-repeat 100% .5em; }
a[href$=".zip"] { padding-right: 17px; background: url(zip.gif) no-repeat 100% .5em; }

不幸的是IE6以下浏览器不支持属性选择器。好在，可以通过在每个元素中添加类，使用JavaScript和DOM实现相似的效果。

下面给出了一个解决办法:

程序代码

当然，你需要在你的css文件中，增加这几个css类：
[code]
.pdfLink { padding-right: 19px; background: url(pdf.gif) no-repeat 100% .5em; }
.docLink { padding-right: 19px; background: url(doc.gif) no-repeat 100% .5em; }
.zipLink { padding-right: 17px; background: url(zip.gif) no-repeat 100% .5em; }[code]
一点小问题，使用indexof来判断，那如果我的文件名是doc.PDF，如何判断呢？

飞来飞去的邮件选择，强

jordanqiu@msn.com(admin) — Tue,04 Sep 2007 10:37:20 +0800

HTML代码

<html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>">
<head>
<title>博客邮箱飞来飞去效果演示</title>
<script type="text/javascript">
/**
 * @author cuilin www.cuilin.name
 * @mail:cuilin0@gmail.com
 */
	var ev={};
	var flyDiv="bxAddrFly";//发送的层
	var inceptDiv="SendAddress";//负责接收层效果的控件
	var addEvent="addAddress()";//层发送成功后的接收事件
	function oo(obj){return (document.getElementById) ? document.getElementById(obj): document.all[obj];}
	function isNone(str){return str==null||str==""?true:false}
	//=================兼容Firefox/Event=================
	//因为要将表现与行为分离所在此处浪费了很多代码
	var Browser = new Object();
	Browser.isFirefox = (navigator.userAgent.toLowerCase().indexOf("firefox")!=-1);
	if (Browser.isFirefox) { extendEventObject();}
	function extendEventObject() {
	
		window.constructor.prototype.__defineGetter__("event", function(){
		var o = arguments.callee.caller;
		var e;
		while(o != null){
			e = o.arguments[0];
			if(e && (e.constructor == Event || e.constructor == MouseEvent)) return e;
			o = o.caller;
		}
		return null;
		});
		
		Event.prototype.__defineGetter__("srcElement", function () {
			var node = this.target;
			while (node.nodeType != 1) node = node.parentNode;
			return node;
		});	
	}
	window.onload = function(){
		var addrTree = oo('tbAddrTree');
		addrTree.onmouseover = function(){addrTree_event(event)};
		addrTree.onmouseout = function(){addrTree_event(event)};
		addrTree.onclick = function(){addrTree_event(event)};
	}
	function addrTree_event(e){	
		var memberID,tr
		var ee = e.srcElement; 
		if(ee.tagName=="A"&&e.type=="mouseover"){ee.style.textDecoration="underline"}
		if(ee.tagName=="A"&&e.type=="mouseout"){ee.style.textDecoration=""}
		if(e.type=="click"&&e.srcElement.tagName=="A"){			
			var li=ee.parentNode.parentNode;
			ev.AddInfo="\""+li.getAttribute("memberName")+"\"<\""+li.getAttribute("email")+"\">"
			oo(flyDiv).innerHTML=li.getAttribute("memberName");
			addrTree_add(e.clientX,e.clientY)
		}
	}
	function addrTree_add(ex,ey){
		if(oo(flyDiv).style.display=='none'||oo(flyDiv).style.display==''){oo(flyDiv).style.display='block';}
		//此处获取控件的坐标
		var inceptE = oo(inceptDiv);
		var inceptEX = inceptE.offsetTop;   
		var inceptEY = inceptE.offsetLeft;   
		while(inceptE = inceptE.offsetParent){
			inceptEX += inceptE.offsetTop;   
			inceptEY += inceptE.offsetLeft;   
		}
		ev.flyArr=new Array(ex,ey,inceptEX,inceptEY,10);
		fly(flyDiv,addEvent);
	}
	//
	function fly(flyObj,flyRun){
		var obj,a=ev.flyArr,x,y
		if(flyObj!=null){
			if(ev.flyObj!=null){
				window.clearTimeout(ev.flyTm);
				ev.flyObj.style.top=-900;
			}
			a[5]=0;
			ev.flyObj=oo(flyObj);
			ev.flyRun=flyRun;
		}
		
		obj=ev.flyObj;
		if(a[4]==null){a[4]=1}
		a[5]+=a[4]/Math.sqrt(Math.pow(a[2]-a[0],2)+Math.pow(a[3]-a[1],2));
		if(a[5]>1){
			obj.style.top=-900;
			eval(ev.flyRun);
			ev.flyObj=null;
			return;
		}
		
		window.clearTimeout(ev.flyTm);
		x=(a[2]-a[0])*a[5]+a[0];
		y=(a[3]-a[1])*a[5]+a[1];
		obj.style.left=x;
		obj.style.top=y;
		document.body.style.overflowX="hidden";	
		ev.flyTm=window.setTimeout("fly()",10)
	}
	//事件处理
	function addAddress()
	{
		var key=ev.AddInfo;
		if (oo(inceptDiv).value.indexOf(key)==-1)
		{
			oo(inceptDiv).value+=key+",";
		}
	}
</script>
<style type="text/css">
ul{ list-style:none; margin:0; padding:0;}
li{ margin:0; padding:0;}
#content{width:100%;}
#sendmail{float:left; width:60%;}
#friendlist{float:left; width:30%;}
#bxAddrFly{position:absolute;height:15px; width:50px;background:#e5edf6; border:1px #7F9DB9 solid;display:none;}
#tbAddrTree{ width:190px; float:left; padding:4px;border:1px #7F9DB9 solid;}
#tbAddrTree li{ width:100%; float:left;}
#tbAddrTree a{backgroud: #fff;width: 100%;color:#494949;text-decoration: none;float:left;}
#tbAddrTree a:hover{background: #e5edf6;}
</style>
</head>
<body>
<div id="content">
  <div id="sendmail">
    <input name="textfield" type="text" id="SendAddress" size="70">
  </div>
  <div id="friendlist">
    <div id="tbAddrTree">
      <ul>
        <li membername="test0" email="test0@163.com"><nobr><a>test0</a></nobr></li>
        <li membername="test1" email="test1@163.com"><nobr><a>test1</a></nobr></li>
        <li membername="test2" email="test2@163.com"><nobr><a>test2</a></nobr></li>
        <li membername="test3" email="test3@163.com"><nobr><a>test3</a></nobr></li>
        <li membername="test4" email="test4@163.com"><nobr><a>test4</a></nobr></li>
        <li membername="test5" email="test5@163.com"><nobr><a>test5</a></nobr></li>
        <li membername="test6" email="test6@163.com"><nobr><a>test6</a></nobr></li>
        <li membername="test7" email="test7@163.com"><nobr><a>test7</a></nobr></li>
      </ul>
    </div>
    <div id="bxAddrFly"> </div>
  </div>
</div>
</body>
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

很全面的ad广告

jordanqiu@msn.com(admin) — Thu,09 Aug 2007 17:47:20 +0800

http://www.knowsky.com/tools/ad/
myie或者ff拦截广告功能去除就可以看到，很全面，有代码演示和下载

弹出效果

jordanqiu@msn.com(admin) — Fri,27 Jul 2007 09:52:28 +0800

HTML代码

<html><HEAD><TITLE>支付宝 - 网上支付 安全快速！</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<META content=网上购物/网上支付/安全支付/安全购物/购物，安全/支付,安全/支付宝/安全,支付/安全，购物/支付,在线/付款,收款/网上,贸易/网上贸易. name=description>
<META content=网上购物/网上支付/安全支付/安全购物/购物，安全/支付,安全/支付宝/安全,支付/安全，购物/支付,在线/付款,收款/网上,贸易/网上贸易. name=keywords><LINK href="<a href="https://img.alipay.com/img/icon/favicon.ico" target="_blank">https://img.alipay.com/img/icon/favicon.ico</a>" type=image/x-icon rel=icon><LINK href="<a href="https://img.alipay.com/img/icon/favicon.ico" target="_blank">https://img.alipay.com/img/icon/favicon.ico</a>" type=image/x-icon rel="shortcut icon"><LINK media=screen href="<a href="https://img.alipay.com/css/empty.css" target="_blank">https://img.alipay.com/css/empty.css</a>" type=text/css rel=stylesheet><LINK href="<a href="https://img.alipay.com/pcss/layout.css" target="_blank">https://img.alipay.com/pcss/layout.css</a>" type=text/css rel=stylesheet>
<STYLE type=text/css media=screen>	@import url('<a href="https://img.alipay.com/css/v1.1.css?t=20070514.css" target="_blank">https://img.alipay.com/css/v1.1.css?t=20070514.css</a>');	@import url('<a href="https://img.alipay.com/css/layout.css?t=20070514.css" target="_blank">https://img.alipay.com/css/layout.css?t=20070514.css</a>');	@import url('<a href="https://img.alipay.com/css/component.css?t=20070524.css" target="_blank">https://img.alipay.com/css/component.css?t=20070524.css</a>');	@import url('<a href="https://img.alipay.com/css/form.css?t=20070514.css" target="_blank">https://img.alipay.com/css/form.css?t=20070514.css</a>');	@import url('<a href="https://img.alipay.com/css/tabs.css?t=20070524.css" target="_blank">https://img.alipay.com/css/tabs.css?t=20070524.css</a>');	</STYLE>
</HEAD>
<BODY><A id=n2SPopClickGrab style="DISPLAY: none; Z-INDEX: 225; POSITION: absolute; BACKGROUND-COLOR: transparent"></A><SPAN id=AllCatPopoverDiv_OuterX><SPAN class=n2Pop onmousemove=oAllCatPopover.mouseMove(event); id=AllCatPopoverDiv onmouseover=oAllCatPopover.mouseOver(); style="DISPLAY: inline; LEFT: 0px; VISIBILITY: hidden; TOP: 0px" onmouseout=oAllCatPopover.mouseOut(event);><SPAN class=n2>-- CONTENT GOES HERE (simple)--</SPAN></SPAN></SPAN>
<SCRIPT language=javascript src="<a href="https://img.alipay.com/pjs/quicklinks.js" target="_blank">https://img.alipay.com/pjs/quicklinks.js</a>" type=text/javascript></SCRIPT>
<SCRIPT src="<a href="https://img.alipay.com/pjs/quicklinks_a.js" target="_blank">https://img.alipay.com/pjs/quicklinks_a.js</a>" type=text/javascript></SCRIPT>
<SCRIPT src="<a href="https://img.alipay.com/pjs/quicklinks_b.js" target="_blank">https://img.alipay.com/pjs/quicklinks_b.js</a>" type=text/javascript></SCRIPT>
<SCRIPT src="<a href="https://img.alipay.com/pjs/quicklinks_c.js" target="_blank">https://img.alipay.com/pjs/quicklinks_c.js</a>" type=text/javascript></SCRIPT>
<DIV id=MyMenu>
<DIV class=MyMenubg>
<DIV id=QuickMenu><SPAN><A id=cc href="#" name=two-tabs|he|all-links>支付宝快速入口</A></SPAN> 
<DIV id=all-links>
<DIV id=MyMenuLinks>
<UL>
<LI class=home><A class=R href="<a href="https://www.alipay.com/user/ma_index.htm" target="_blank">https://www.alipay.com/user/ma_index.htm</a>">我的支付宝首页</A> </LI>
<LI>账户管理 
<UL>
<LI><A href="<a href="https://www.alipay.com/user/account_balance.htm" target="_blank">https://www.alipay.com/user/account_balance.htm</a>">账户余额查询</A> </LI>
<LI><A href="<a href="https://www.alipay.com/user/user_info_console.htm" target="_blank">https://www.alipay.com/user/user_info_console.htm</a>">账户信息管理</A> </LI>
<LI><A href="<a href="https://www.alipay.com/user/unicard_wizard.htm" target="_blank">https://www.alipay.com/user/unicard_wizard.htm</a>">支付宝卡通</A> </LI></UL></LI>
<LI>资金管理 
<UL>
<LI><A href="<a href="https://www.alipay.com/user/inpour_request.htm" target="_blank">https://www.alipay.com/user/inpour_request.htm</a>">充值</A> </LI>
<LI><A href="<a href="https://www.alipay.com/user/draw_request.htm" target="_blank">https://www.alipay.com/user/draw_request.htm</a>">提现</A> </LI>
<LI><A href="<a href="https://www.alipay.com/user/query_account_detail.htm" target="_blank">https://www.alipay.com/user/query_account_detail.htm</a>">账户明细查询</A> </LI>
<LI><A href="<a href="https://www.alipay.com/user/draw_request_query.htm" target="_blank">https://www.alipay.com/user/draw_request_query.htm</a>">提现申请查询</A> </LI></UL></LI>
<LI>增值服务 
<UL>
<LI><A href="<a href="https://www.alipay.com/securitycenter/sc_index.htm" target="_blank">https://www.alipay.com/securitycenter/sc_index.htm</a>">安全中心</A> </LI>
<LI><A href="<a href="https://www.alipay.com/user/mobile_center.htm" target="_blank">https://www.alipay.com/user/mobile_center.htm</a>">手机服务</A> </LI>
<LI><A href="<a href="https://www.alipay.com/user/customize_information.htm" target="_blank">https://www.alipay.com/user/customize_information.htm</a>">信使</A> </LI>
<LI><A href="<a href="https://www.alipay.com/static/production/index_ma.htm" target="_blank">https://www.alipay.com/static/production/index_ma.htm</a>">产品中心</A> </LI></UL></LI></UL></DIV></DIV></DIV></DIV></DIV>
<SCRIPT type=text/javascript>	function userMark(tradeNo)	{	window.open("<a href="https://www.alipay.com/trade/user_mark_trade.htm?dt_from=" target="_blank">https://www.alipay.com/trade/user_mark_trade.htm?dt_from=</a>" + "&trade_no=" + tradeNo); 	}</SCRIPT>
<DIV class=animatedBox id=goN2UAnimatedBox></DIV></BODY></html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

发一个有意思的表单

jordanqiu@msn.com(admin) — Thu,17 May 2007 09:58:40 +0800

HTML代码

<SCRIPT language=javascript>
function isIE(){
	var  navName=navigator.appName; 
	if(navName.indexOf('Microsoft')<0){
		return false;
	}
	else{
		return true;
	}
}

function Jtrim(str){
	var p=/\s/g;
	return str.replace(p,"");
}

function singleCheck(v,tID){
	//var U_v=eval("document.all.u"+tID);
	var U_v=document.getElementById("u"+tID);
	var votein_v=document.getElementById("voteIn"+tID);
	
	U_v.innerHTML=votein_v.value=v.value;
}

function textChange(v,tID){
	var U_v=document.getElementById("u"+tID);
	var votein_v=document.getElementById("voteIn"+tID);
	U_v.innerHTML=votein_v.value=v.value;
}

}
</SCRIPT>
<FORM name=form1 action="" method=post>

<TABLE cellSpacing=0 cellPadding=2 width="100%"  border=0>
 <TBODY> 
<TR> 
<TD ><STRONG>1.你是否超级喜欢抓图网(<a href=http://www.zhuatu.com>zhuatu.com</a>)：</STRONG>  
<A id=u741 style="COLOR: #ff3300; TEXT-DECORATION: underline"  onclick="return false;" href="#">  </A>  
<INPUT id=labelID type=hidden value=741 name=subID[]>
<INPUT id=voteIn741 type=hidden name=voteIn[]>
 </TD>
</TR>
<TR> 
<TD >
<INPUT id=r_id18092 onclick=singleCheck(this,741); type=radio  value=是 name=r741>
<LABEL for=r_id18092>是</LABEL>  
<INPUT id=r_id18093 onclick=singleCheck(this,741); type=radio value=否 name=r741>
<LABEL for=r_id18093>否</LABEL>   </TD>
</TR>
 <TR> 
<TD  height=6></TD>
</TR>
<TR> 
<TD align=left width="100%"><STRONG >2.如果你愿意收购，你能承受的价格是多少（单选）：</STRONG> 
<A id=u742  style="COLOR: #ff3300; TEXT-DECORATION: underline" onclick="return false;"  href="#">    </A> 
<INPUT id=labelID type=hidden value=742  name=subID[]>
<INPUT id=voteIn742 type=hidden name=voteIn[]>
</TD></TR><TR> <TD >
<INPUT id=r_id18094 onclick=singleCheck(this,742); type=radio value=10万元以下 name=r742>
<LABEL for=r_id18094>10万元以下</LABEL>  
<INPUT  id=r_id18095 onclick=singleCheck(this,742); type=radio value=30万元~50万元 name=r742>
<LABEL for=r_id18095>30万元~50万元</LABEL>  
<INPUT id=r_id18096 onclick=singleCheck(this,742); type=radio value=50万元~80万元 name=r742>
<LABEL  for=r_id18096>50万元~80万元</LABEL>  
<INPUT  id=r_id18097 onclick=singleCheck(this,742); type=radio value=80万元~100万元 name=r742>
<LABEL for=r_id18097>80万元~100万元</LABEL>  
<INPUT  id=r_id18098 onclick=singleCheck(this,742); type=radio value=100万元~500万元 name=r742>
<LABEL for=r_id18098>100万元~500万元</LABEL>  
<INPUT  id=r_id18099 onclick=singleCheck(this,742); type=radio value=1000万元以上 name=r742>
<LABEL  for=r_id18099>1000万元以上</LABEL>   </TD>
</TR>
<TR> <TD ><STRONG >3.你收购或不收购的理由：</STRONG> 
<A  id=u743 style="COLOR: #ff3300; TEXT-DECORATION: underline" onclick="return false;"  href="#">    </A> 
<INPUT  id=labelID type=hidden value=743 name=subID[]>
<INPUT id=voteIn743 type=hidden  name=voteIn[]>
                              </TD>
                            </TR>
                            <TR> 
                              <TD >
                                <INPUT onblur=textChange(this,743) style="WIDTH: 200px" size=12 name=inText18100>
                              </TD>
                            </TR>
                            
                            <TR> 
                              <TD ><STRONG i>4.你的姓名：</STRONG> 
<A id=u744 style="COLOR: #ff3300; TEXT-DECORATION: underline" onclick="return false;" href="#">    </A> 
                                <INPUT  id=labelID type=hidden value=744 name=subID[]>
                                <INPUT id=voteIn744 type=hidden  name=voteIn[]>
                              </TD>
                            </TR>
                            <TR> 
                              <TD >
                                <INPUT onblur=textChange(this,744) style="WIDTH: 200px" size=12 name=inText18101>
                              </TD>
                            </TR>
                           
                            <TR> 
                              <TD ><STRONG>5.联系地址：</STRONG> 
<A id=u745 style="COLOR: #ff3300; TEXT-DECORATION: underline" onclick="return false;" href="#">    </A> 
                                <INPUT id=labelID type=hidden value=745 name=subID[]>
                                <INPUT id=voteIn745 type=hidden  name=voteIn[]>
                              </TD>
                            </TR>
                            <TR> 
                              <TD >
                                <INPUT onblur=textChange(this,745)  style="WIDTH: 200px" size=12 name=inText18102>
                              </TD>
                            </TR>
                            
                            <TR> 
                              <TD ><STRONG >6.电话或电子邮件：</STRONG> 
 <A id=u746  style="COLOR: #ff3300; TEXT-DECORATION: underline"  onclick="return false;" href="#">    </A> 
                                <INPUT  id=labelID type=hidden value=746  name=subID[]>
                                <INPUT id=voteIn746 type=hidden  name=voteIn[]>
                              </TD>
                            </TR>
                            <TR> 
                              <TD>
                                <INPUT onblur=textChange(this,746)  style="WIDTH: 200px" size=12 name=inText18103>
                              </TD>
                            </TR>
                          </TBODY>
                          </TABLE>
  <INPUT type=hidden value=over name=doit>
                          <INPUT onclick=checkIt(); type=button value=" 提交调查 " name=sub1>
                              
                          <INPUT type=reset value=" 全部重填 " name=res1>
                    </FORM>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

左侧导航代码

jordanqiu@msn.com(admin) — Sun,29 Apr 2007 09:46:08 +0800

HTML代码

<base href="<a href="http://www.blueidea.com/articleimg/2003/09/804/" target="_blank">http://www.blueidea.com/articleimg/2003/09/804/</a>">
<?xml version="1.0" encoding="gb2312"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>">
<head>
<title>DWMX Tutor --- A Simple Menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script>// Example: obj = findObj("image1");
function findObj(theObj, theDoc)
{
  var p, i, foundObj;
  
  if(!theDoc) theDoc = document;
  if( (p = theObj.indexOf("?")) > 0 && parent.frames.length)
  {
    theDoc = parent.frames[theObj.substring(p+1)].document;
    theObj = theObj.substring(0,p);
  }
  if(!(foundObj = theDoc[theObj]) && theDoc.all) foundObj = theDoc.all[theObj];
  for (i=0; !foundObj && i < theDoc.forms.length; i++) 
    foundObj = theDoc.forms[i][theObj];
  for(i=0; !foundObj && theDoc.layers && i < theDoc.layers.length; i++) 
    foundObj = findObj(theObj,theDoc.layers[i].document);
  if(!foundObj && document.getElementById) foundObj = document.getElementById(theObj);
  
  return foundObj;
}
</script>
<style type="text/css">

</style>
<style type="text/css">

</style>
<base target="browserframe"/>
</head>

<body>
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="150" align="center" valign="top" class="explorer" id="menubar"><br />      
            <br />
      <br />      
      <table width="100%" border="0" cellspacing="0" cellpadding="2" onselectstart="return false">
      <tr>
        <td class="folder" onmouseup="with(findObj('blueidea').style){display=display=='none'?'':'none';this.style.backgroundImage=display!='none'?'url(e.gif)':'url(c.gif)'}">Blueidea.com</td>
      </tr>
      <tr>
        <td class="submenu" id="blueidea"><table width="100%" border="0" cellspacing="0" cellpadding="2">
            <tr>
              <td class="folder" onmouseup="with(findObj('forums').style){display=display=='none'?'':'none';this.style.backgroundImage=display!='none'?'url(e.gif)':'url(c.gif)'}">Forums</td>
            </tr>
            <tr>
              <td class="submenu" id="forums"><table width="100%" border="0" cellspacing="0" cellpadding="2">
                  <tr>
                    <td class="iefile"><a href="<a href="http://bbs.blueidea.com/forumdisplay.php?fid=1" target="_blank">http://bbs.blueidea.com/forumdisplay.php?fid=1</a>">JS & DWMX</a></td>
                  </tr>
                  <tr>
                    <td class="iefile"><a href="<a href="http://bbs.blueidea.com/forumdisplay.php?fid=2" target="_blank">http://bbs.blueidea.com/forumdisplay.php?fid=2</a>">Developement</a></td>
                  </tr>
                  <tr>
                    <td class="iefile"><a href="<a href="http://bbs.blueidea.com/forumdisplay.php?fid=3" target="_blank">http://bbs.blueidea.com/forumdisplay.php?fid=3</a>">Fireworks</a></td>
                  </tr>
                  <tr>
                    <td class="iefile"><a href="<a href="http://bbs.blueidea.com/forumdisplay.php?fid=4" target="_blank">http://bbs.blueidea.com/forumdisplay.php?fid=4</a>">Flash</a></td>
                  </tr>
                  <tr>
                    <td class="iefile"><a href="<a href="http://bbs.blueidea.com/forumdisplay.php?fid=7" target="_blank">http://bbs.blueidea.com/forumdisplay.php?fid=7</a>">Photoshop</a></td>
                  </tr>
                </table>
              </td>
            </tr>
            <tr>
              <td class="folder" onmouseup="with(findObj('others').style){display=display=='none'?'':'none';this.style.backgroundImage=display!='none'?'url(e.gif)':'url(c.gif)'}">Others</td>
            </tr>
            <tr>
              <td class="submenu" id="others"><table width="100%" border="0" cellspacing="0" cellpadding="2">
                  <tr>
                    <td class="iefile"><a href="<a href="http://www.blueidea.com/download/index.asp" target="_blank">http://www.blueidea.com/download/index.asp</a>">Download</a></td>
                  </tr>
                  <tr>
                    <td class="iefile"><a href="<a href="http://www.blueidea.com/tech/index.asp" target="_blank">http://www.blueidea.com/tech/index.asp</a>">Documents</a></td>
                  </tr>
                </table>
              </td>
            </tr>
            <tr>
              <td class="iefile"><a href="<a href="http://www.blueidea.com/" target="_blank">http://www.blueidea.com/</a>">Homepage</a></td>
            </tr>
            <tr>
              <td class="iefile"><a href="<a href="http://bbs.blueidea.com/" target="_blank">http://bbs.blueidea.com/</a>">BBS</a></td>
            </tr>
          </table>
        </td>
      </tr>
      <tr>
        <td class="collapsedFolder" onmouseup="with(findObj('lexrus').style){display=display=='none'?'':'none';this.style.backgroundImage=display!='none'?'url(e.gif)':'url(c.gif)'}">LeXRus.com</td>
      </tr>
      <tr>
        <td class="submenu" id="lexrus" style="display:none"><table width="100%" border="0" cellpadding="2" cellspacing="0">
            <tr>
              <td class="iefile"><a href="<a href="http://www.lexrus.com/" target="_blank">http://www.lexrus.com/</a>">Homepage</a></td>
            </tr>
            <tr>
              <td class="iefile"><a href="<a href="http://lexrus.com/blog/" target="_blank">http://lexrus.com/blog/</a>">Blog</a></td>
            </tr>
          </table>
        </td>
      </tr>
    </table></td>
    <td width="1" class="ctrlbar"><button class="ctbutton" onfocus="blur();" onmouseup="with(findObj('menubar').style){display=display=='none'?'':'none';this.innerText=display=='none'?'>':'<'}" onmouseover="this.style.backgroundColor='#ffffff'" onmouseout="this.style.backgroundColor='#eeeeee'"><</button></td>
    <td class="explorer"></td>
  </tr>
</table>
</body>
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

比较舒服的table

jordanqiu@msn.com(admin) — Tue,17 Apr 2007 13:53:37 +0800

HTML代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>
Striped Tables
</title>

#playlist {
		border: 1px solid #666666;
	}

#playlist tbody tr td {
		font-family: "lucida grande", verdana, sans-serif;
		font-size: 8pt;
		padding: 3px 8px;
		border-left: 1px solid #D9D9D9;
	}
	
	#playlist tbody tr.selected td {
		background-color: #3d80df;
		color: #ffffff;
		font-weight: bold;
		border-left: 1px solid #346DBE;
		border-bottom: 1px solid #7DAAEA;
	}
</style>

// this function is need to work around 
  // a bug in IE related to element attributes
  function hasClass(obj) {
     var result = false;
     if (obj.getAttributeNode("class") != null) {
         result = obj.getAttributeNode("class").value;
     }
     return result;
  }

function stripe(id) {

// the flag we'll use to keep track of 
    // whether the current row is odd or even
    var even = false;
  
    // if arguments are provided to specify the colours
    // of the even & odd rows, then use the them;
    // otherwise use the following defaults:
    var evenColor = arguments[1] ? arguments[1] : "#fff";
    var oddColor = arguments[2] ? arguments[2] : "#eee";
  
    // obtain a reference to the desired table
    // if no such table exists, abort
    var table = document.getElementById(id);
    if (! table) { return; }
    
    // by definition, tables can have more than one tbody
    // element, so we'll have to get the list of child
    // <tbody>s 
    var tbodies = table.getElementsByTagName("tbody");

// and iterate through them...
    for (var h = 0; h < tbodies.length; h++) {
    
     // find all the <tr> elements... 
      var trs = tbodies[h].getElementsByTagName("tr");
      
      // ... and iterate through them
      for (var i = 0; i < trs.length; i++) {

// avoid rows that have a class attribute
        // or backgroundColor style
	    if (!hasClass(trs[i]) && ! trs[i].style.backgroundColor) {
 
         // get all the cells in this row...
          var tds = trs[i].getElementsByTagName("td");
        
          // and iterate through them...
          for (var j = 0; j < tds.length; j++) {
        
            var mytd = tds[j];

// avoid cells that have a class attribute
            // or backgroundColor style
	        if (! hasClass(mytd) && ! mytd.style.backgroundColor) {
        
		      mytd.style.backgroundColor = even ? evenColor : oddColor;
              
            }
          }
        }
        // flip from odd to even, or vice-versa
        even =  ! even;
      }
    }
  }
// -->
</script>

</head>
<body onload="stripe('playlist', '#fff', '#edf3fe');"><a name="top"></a>

<h1>iTunes Stripes</h1>

<table id="playlist" cellspacing="0">
	<tbody>
		<tr>
			<td>1</td>
			<td>Lost In The Plot</td>
			<td>The Dears</td>
		</tr>
		<tr>
			<td>2</td>
			<td>Poison</td>
			<td>The Constantines</td>
		</tr>
		<tr class="selected">
			<td>3</td>
			<td>Plea From A Cat Named Virtute</td>
			<td>The Weakerthans</td>
		</tr>
		<tr>
			<td>4</td>
			<td>Melissa Louise</td>
			<td>Chixdiggit!</td>
		</tr>
	</tbody>
	<tbody>		
		<tr>
			<td>5</td>
			<td>Living Room</td>
			<td>Tegan And Sara</td>

</tr>
		<tr>
			<td>6</td>
			<td>Speed</td>
			<td>Bran Van 3000</td>
		</tr>
		<tr>
			<td>7</td>
			<td>Fast Money Blessing</td>
			<td>King Cobb Steelie</td>
		</tr>
	</tbody>
	<tbody>
		<tr class="selected">
			<td>8</td>
			<td>Sore</td>
			<td>Buck 65</td>
		</tr>
		<tr class="selected">
			<td>9</td>
			<td>Love Travel</td>
			<td>Danko Jones</td>
		</tr>
		<tr>
			<td>10</td>
			<td>You Never Let Me Down</td>
			<td>Furnaceface</td>
		</tr>	
	</tbody>
	
</table>
</div>

</body>
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

15个常用js

jordanqiu@msn.com(admin) — Tue,03 Apr 2007 10:59:38 +0800

这里有15个比较常用的js代码,对于网站设计者是必须掌握的,用来提高网站的交互性以及用户体验,包括:Loading,Tables,DatePicker,可拖放窗口,缩略图缩放等等

runoo' blog - 网站代码

方便快捷让我迷倒的jquery

动画效果打开层 关闭层

css技巧之PDF、ZIP、DOC链接的标注

飞来飞去的邮件选择，强

很全面的ad广告

弹出效果

发一个有意思的表单

左侧导航代码

比较舒服的table

15个常用js

动画效果打开层关闭层