He Min Blog» Blog Archive » 各种javascript实例效果更新为2010.07.26

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>二级菜单横向(www.hemin.cn)</title> <script type="text/javascript"> /** *菜单的构造,需要绑定到onload */ startList = function() { if (document.all && document.getElementById) { navRoot = document.getElementById("nav"); for (i=0; i < navRoot.childNodes.length; i++) { node = navRoot.childNodes[i]; if (node.nodeName=="LI") { node.onmouseover=function() { this.className+=" over"; } node.onmouseout=function() { this.className=this.className.replace(" over", ""); } } } } } window.onload = startList; </script> <style type="text/css" media="all"> html { min-width: 742px; } /*css基本规则*/ img { border:0; } p.access { display:none; } div#counters { display:none; }/*计数器暂时不显示*/ a { text-decoration: none; } /* 主要布局 */ body { overflow:auto; text-align: center; margin: 0 auto; padding: 0; border: 0; background: #fff; color: #000; font: small/18px "宋体", Verdana, Helvetica, sans-serif; } ul#nav, ul#nav ul { margin: 0 auto; text-align:left; padding: 0; list-style: none; background:#fff; z-index:99; } ul#nav { width:732px; display:block; height:24px; clear:both; } ul#nav li { position: relative; z-index:999; float:left; } ul#nav ul li { display:block; } ul#nav ul { width:100px; height:auto; position: absolute; text-align:left; left: 0px; display: none; border:solid 1px #697210; } /*当鼠标在子菜单和父菜单上时，父菜单的样式*/ ul#nav li.over a, ul#nav li:hover a { border-color:#E2144A; background: #fdd; font-weight:bold; color: #E2144A; } /*将子菜单的样式清除*/ ul#nav li.over ul a, ul#nav li:hover ul a { background:#fff; font-weight:normal; color:#777; } /*子菜单的hover样式*/ ul#nav li.over ul a:hover, ul#nav li:hover ul a:hover { background:#fff; font-weight:normal; color: #E2144A; background: #fdd; border-color:#E2144A; font-weight:bold; } /* Styles for Menu Items */ ul#nav a { font-size:14px; line-height:17px; display: block; padding:0 0 0 10px; width:78px; color: #777; height:17px; background: #fff; border-left:solid 1px #fff; border-top:solid 1px #fff; border-right:solid 1px #fff; border-bottom:solid 5px #697210; } ul#nav ul li { width:100px; border:0; } /* Fix IE. Hide from IE Mac \*/ * html ul#nav li { float: left; height: 17px; } * html ul#nav li a { height: 17px; } /* End */ ul#nav ul a { padding: 2px 0px 2px 10px; border:0; width:90px; } /* Sub Menu Styles */ ul#nav li:hover ul, ul#nav li.over ul { display: block; } /* The magic */ </style> </head> <body> <p>测试css菜单显示效果</p>  <ul id="nav"> <li><a href="#">文章</a> <ul> <li><a href="#">随笔</a></li> <li><a href="#">小说</a></li> <li><a href="#">诗</a></li> <li><a href="#">文摘</a></li> </ul> </li> <li><a href="#">美图</a> <ul> <li><a href="#">漫画</a></li> <li><a href="#">摄影</a></li> <li><a href="#">CG作品</a></li> <li><a href="#">图+文</a></li> </ul> </li> <li><a href="#">技术</a> <ul> <li><a href="#">在线工具</a></li> <li><a href="#">代码收集</a></li> <li><a href="#">实验室</a></li> <li><a href="#">技术文章</a></li> </ul> </li> <li><a href="#">网站收藏夹</a></li> <li><a href="#">读书笔记</a> <ul> <li><a href="#">哲学</a></li> <li><a href="#">小说</a></li> </ul> </li> <li><a href="#">日记</a> <ul> <li><a href="#">生活</a></li> <li><a href="#">工作</a></li> </ul> </li> <li><a href="#">计划</a> <ul> <li><a href="#">计划要做的事</a></li> <li><a href="#">计划要买的</a></li> </ul> </li> <li><a href="#">其他</a> <ul> <li><a href="#">关于本站</a></li> <li><a href="#">留言</a></li> <li><a href="#">友情链接</a></li> </ul> </li> </ul>  </body> </html>

提示：你可以先修改部分代码再运行。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>二级菜单竖向(www.hemin.cn)</title> <meta http-equiv="Content-Type" content="text/html" charset="utf-8" /> <script type="text/javascript" > // JavaScript Document startList = function() { if (document.all && document.getElementById) { navRoot = document.getElementById("nav"); for (i=0; i < navRoot.childNodes.length; i++) { node = navRoot.childNodes[i]; if (node.nodeName=="LI") { node.onmouseover=function() { this.className+=" over"; } node.onmouseout=function() { this.className=this.className.replace(" over", ""); } } } } } window.onload=startList; </script> <style type="text/css"> body { font: normal 11px verdana; } ul { margin: 0; padding: 0; list-style: none; width: 150px; /* Width of Menu Items */ border-bottom: 1px solid #ccc; } ul li { position: relative; } li ul { position: absolute; left: 149px; /* Set 1px less than menu width */ top: 0; display: none; } /* Styles for Menu Items */ ul li a { display: block; text-decoration: none; color: #777; background: #fff; /* IE6 Bug */ padding: 5px; border: 1px solid #ccc; border-bottom: 0; } /* Fix IE. Hide from IE Mac \*/ * html ul li { float: left; height: 1%; } * html ul li a { height: 1%; } /* End */ ul li a:hover { color: #E2144A; background: #f9f9f9; } /* Hover Styles */ li ul li a { padding: 2px 5px; } /* Sub Menu Styles */ li:hover ul, li.over ul { display: block; } /* The magic */ </style> </head> <body> <ul id="nav"> <li><a href="#">Home</a></li> <li><a href="#">About</a> <ul> <li><a href="#">History</a></li> <li><a href="#">Team</a></li> <li><a href="#">Offices</a></li> </ul> </li> <li><a href="#">Services</a> <ul> <li><a href="#">Web Design</a></li> <li><a href="#">Internet Marketing</a></li> <li><a href="#">Hosting</a></li> <li><a href="#">Domain Names</a></li> <li><a href="#">Broadband</a></li> </ul> </li> <li><a href="#">Contact Us</a> <ul> <li><a href="#">United Kingdom</a></li> <li><a href="#">France</a></li> <li><a href="#">USA</a></li> <li><a href="#">Australia</a></li> </ul> </li> </ul> </body> </html>

提示：你可以先修改部分代码再运行。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>自定义容器和字体大小(www.hemin.cn)</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <meta name="author" content="The Man in Blue" /> <meta name="robots" content="all" /> <meta name="MSSmartTagsPreventParsing" content="true" /> <meta name="description" content="" /> <meta name="keywords" content="" /> <style type="text/css" media="all"> body { margin: 1em; text-align: center; font-family: Arial, Helvetica, sans-serif; } body * { margin: 0; } #content { padding: 1em; background-color: #BBDDFF; background-image: url(column_bg.gif); background-repeat: repeat-y; background-position: 30em 0; text-align: left; } #content p { margin-bottom: 1em; } #footer { margin-top: 1em; padding: 1em; background-color: #0066CC; text-align: left; } #footer a { color: #FFFFFF; } #header { margin-bottom: 1em; padding: 1em; background-color: #0066CC; color: #FFFFFF; text-align: left; } #leftContent { padding-right: 10em; } #options { margin-bottom: 1em; text-align: right; } #options a { color: #000000; } #rightContent { float: right; width: 8em; } #widthContainer { font-size: 0.8em; width: 40em; margin: auto; } .clearer { clear: both; } </style> <script type="text/javascript">  </script> </head> <body onload="scaleWidth();" onresize="scaleWidth();"> <div id="widthContainer"> <div id="options"> <a href="#" onclick="textSize('smaller'); return false;">Text smaller</a> | <a href="#" onclick="textSize('bigger'); return false;">Text bigger</a> </div>  <div id="header"> <h1>Browser-width defined font size</h1> </div>  <div id="content"> <div id="rightContent"> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed lobortis ullamcorper augue. Praesent vel felis vitae purus ornare pretium. Nullam porta sollicitudin lectus. Integer non arcu eu neque tincidunt tincidunt. Nullam sapien arcu, ullamcorper sed, hendrerit in, rutrum in, nibh. Aliquam sed enim. Cras rhoncus ullamcorper justo. Aenean quam dolor, consectetuer sed, dapibus quis, iaculis id, diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut lacinia velit ac elit. Etiam id nulla. Phasellus at arcu ac mauris hendrerit ullamcorper. Quisque posuere sodales risus. Sed nunc nibh, egestas a, blandit eget, facilisis vel, dolor. Cras metus urna, feugiat et, iaculis quis, lacinia a, elit. Etiam enim. Maecenas viverra, est non tincidunt euismod, diam urna volutpat mi, in luctus pede ante sit amet risus. </p> </div>  <div id="leftContent"> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed lobortis ullamcorper augue. Praesent vel felis vitae purus ornare pretium. Nullam porta sollicitudin lectus. Integer non arcu eu neque tincidunt tincidunt. Nullam sapien arcu, ullamcorper sed, hendrerit in, rutrum in, nibh. Aliquam sed enim. Cras rhoncus ullamcorper justo. Aenean quam dolor, consectetuer sed, dapibus quis, iaculis id, diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut lacinia velit ac elit. Etiam id nulla. Phasellus at arcu ac mauris hendrerit ullamcorper. Quisque posuere sodales risus. Sed nunc nibh, egestas a, blandit eget, facilisis vel, dolor. Cras metus urna, feugiat et, iaculis quis, lacinia a, elit. Etiam enim. Maecenas viverra, est non tincidunt euismod, diam urna volutpat mi, in luctus pede ante sit amet risus. </p> <p> Nulla metus. Ut sodales, tortor nec sollicitudin convallis, diam diam vulputate ligula, lobortis tincidunt urna purus at urna. Pellentesque laoreet. Nulla et dolor. Praesent vestibulum quam convallis neque. Praesent sit amet odio a dui iaculis dignissim. In vel nunc a tellus vulputate pellentesque. Maecenas bibendum. Donec mi nibh, euismod in, iaculis a, eleifend et, enim. In eget lectus vitae pede nonummy elementum. Mauris accumsan, lacus ut euismod varius, odio neque egestas quam, non aliquam velit purus et purus. Vestibulum at elit nec felis suscipit pulvinar. Suspendisse at enim quis lacus mattis condimentum. Proin arcu arcu, imperdiet vitae, aliquam non, congue id, ipsum. </p> <p> Aliquam eu dolor nec risus luctus faucibus. Aenean condimentum, tortor in blandit cursus, dolor magna sagittis orci, vel vehicula dolor ante at lacus. Donec vel felis in enim aliquam molestie. Sed non velit id velit pulvinar consequat. Mauris luctus. Phasellus faucibus turpis nec purus. Mauris eget ante. Donec orci enim, luctus eu, posuere at, luctus quis, pede. In in lectus. Quisque blandit, ipsum eget tincidunt scelerisque, mauris ante accumsan erat, quis congue odio erat vitae diam. Donec ut felis fermentum sem viverra pulvinar. Sed neque lorem, adipiscing ut, placerat a, ornare et, dolor. Vestibulum pretium vehicula nibh. Etiam feugiat, ligula sed pulvinar fringilla, eros arcu placerat urna, nec eleifend nisl leo sit amet urna. Suspendisse quis augue ut nibh venenatis nonummy. Nunc ut augue. In fermentum, neque eget eleifend rutrum, nulla lorem fermentum massa, eu cursus lectus mi id libero. </p> <p> Nam congue ligula quis magna. Vivamus porttitor nunc non dui. Aliquam posuere dapibus tortor. Quisque facilisis, quam in semper luctus, lacus dolor gravida massa, ultrices consectetuer risus arcu nec nibh. Nulla facilisi. In a eros id eros lobortis ultrices. Vivamus sit amet neque eu magna venenatis nonummy. Pellentesque consequat. Etiam ut ipsum. Nulla consectetuer est vel quam. </p> <p> Integer eu diam vitae augue sollicitudin congue. Praesent vulputate pede vel velit. Maecenas dapibus tempus lacus. Quisque lectus metus, pretium ac, mollis nec, dignissim quis, mi. Aliquam purus risus, pharetra eget, condimentum ut, blandit sit amet, leo. Suspendisse iaculis purus sed tellus. Nunc sem justo, porttitor ut, pretium eu, hendrerit eu, nunc. Vivamus sit amet neque in est venenatis faucibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam rhoncus, eros id ultrices facilisis, pede ligula dignissim eros, sit amet tempus risus urna sed nibh. Sed massa eros, dapibus tristique, blandit et, molestie sed, enim. Phasellus leo. Integer vestibulum volutpat enim. Duis pulvinar ligula. Pellentesque luctus velit a justo. Quisque volutpat, diam quis varius commodo, neque elit dictum tortor, quis aliquet felis risus vitae wisi. Aliquam bibendum, elit ut gravida vehicula, orci turpis auctor dolor, nec tristique tortor dolor eget ipsum. </p> </div>  <div class="clearer"> </div> </div>  <div id="footer"> <a href="http://www.themaninblue.com/writing/perspective/2003/12/22/">Back to the explanation</a> </div> </div>  </body> </html>

提示：你可以先修改部分代码再运行。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN" xml:lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>预载模拟(www.hemin.cn)</title> <style type="text/css"> .load_ { width:200px; height:40px; padding:20px 50px; margin:20px; font-size:9pt; background:#eee; } .load_ p { margin-bottom:8px; height:12px; line-height:12px; border:1px solid; border-color:#fff #000 #000 #fff; padding:4px 2px 2px; text-align:right; font-size:7pt; font-family:Lucida Sans!important; color:#333; background:#ff0; } </style> <head> <body> <div class="load_"> <p style="width:1%;" id="load_"></p> 正在载入，请稍后... </div> <script type="text/javascript"> function $(id,tag){if(!tag){return document.getElementById(id);}else{return document.getElementById(id).getElementsByTagName(tag);}} function loads_(obj,s){ var objw=$(obj).style.width; if(objw!="101%"){ if(!s){var s=0;} $(obj).innerHTML=objw; $(obj).style.width=s+"%"; s++; setTimeout(function (){loads_(obj,s)},50); } else{ $(obj).innerHTML="完毕!!!!"; } } loads_("load_"); </script> </body> </html>

提示：你可以先修改部分代码再运行。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN" xml:lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>放大缩小容器：仿动画 (www.hemin.cn)</title> <style type="text/css"> *{margin:0;padding:0;} body { padding:1em; } h2 { font-size:2em; } div { display:inline-block; width:10em; padding:.5em; margin-bottom:1em; overflow:hidden; background:#eee; text-align:center; font-size:1em; } p#text { position:absolute; right:10px; top:10px; } </style> </head> <body> <p id="text"></p> <div id="box1" onmouseover="pr_box('box1',150);" onmouseout="pr_box('box1',100);"> <h2>标题</h2> <p>测试鼠标滑动效果</p> </div> <div id="box2" onmouseover="pr_box('box2',150);" onmouseout="pr_box('box2',100);"> <h2>标题</h2> <p>测试鼠标滑动效果</p> </div> <div id="box3" onmouseover="pr_box('box3',150);" onmouseout="pr_box('box3',100);"> <h2>标题</h2> <p>测试鼠标滑动效果</p> </div> <div id="box4" onmouseover="pr_box('box4',150);" onmouseout="pr_box('box4',100);"> <h2>标题</h2> <p>测试鼠标滑动效果</p> </div> </body> <script type="text/javascript"> function getDefaultStyle(obj,attribute){ //返回最终样式函数，兼容IE和DOM，设置参数：元素对象、样式特性 return obj.currentStyle?obj.currentStyle[attribute]:document.defaultView.getComputedStyle(obj,false)[attribute]; } function pr_box(id,e){ clearInterval(document.getElementById(id).maxmin); var obj=document.getElementById(id); var cfont=getDefaultStyle(obj,"fontSize");// 得到默认的大小:附单位 var cp=cfont.replace(/[0-9]|[\.]/g,"");// 得到默认的单位 var fsize=parseFloat(cfont);// 得到默认的大小数值 var s=10;// 运动速度 if(!obj.fsizeTmpe){// 存储默认大小数值 obj.fsizeTmpe=fsize; } if(!objfont){// 如果没有设置当前大小，则赋予其默认大小 obj.style.fontSize = cfont; } var e = obj.fsizeTmpe*e/100;// 需要改变到的大小数值 var objfont = parseFloat(obj.style.fontSize);// 得到当前的大小 if(e < obj.fsizeTmpe){obj.maxmin = setInterval(function(){pr_min(obj,e,cp)},s);} if(e > obj.fsizeTmpe){obj.maxmin = setInterval(function(){pr_max(obj,e,cp)},s);} if(e == obj.fsizeTmpe){ if(objfont < obj.fsizeTmpe){ obj.maxmin = setInterval(function(){pr_max(obj,obj.fsizeTmpe,cp)},s); } if(objfont > obj.fsizeTmpe){ obj.maxmin = setInterval(function(){pr_min(obj,obj.fsizeTmpe,cp)},s); } } } function pr_max(obj,e,cp){ if(!obj.fs){ obj.fs=obj.style.fontSize; } var objfont=parseFloat(obj.fs); if(e > objfont){ //document.getElementById("text").innerHTML+="放大 - 原始值："+objfont+" + 递增值："+e/10+"<br />"; obj.fs = objfont+e/10+cp; obj.style.fontSize = obj.fs; } else if(e < objfont){ obj.fs = e+cp; obj.style.fontSize = obj.fs; } else{clearInterval(obj.maxmin);} } function pr_min(obj,e,cp){ if(!obj.fs){ obj.fs=obj.style.fontSize; } var objfont=parseFloat(obj.fs); if(e < objfont){ //document.getElementById("text").innerHTML+="缩小 - 原始值："+objfont+" - 递减值："+e/10+"<br />"; obj.fs = objfont-e/10+cp; obj.style.fontSize = obj.fs; } else if(e > objfont){ obj.fs = e+cp; obj.style.fontSize = obj.fs; } else{clearInterval(obj.maxmin);} } </script> </html>

提示：你可以先修改部分代码再运行。

<html> <head> <title>DIV显示隐藏效果(www.hemin.cn)</title> <style> * { margin:0; padding:0;} body { text-align:center; font:75% Verdana, Arial, Helvetica, sans-serif;} h1 { font:125% Arial, Helvetica, sans-serif; text-align:left; font-weight:bolder; background:#333; padding:3px; display:block; color:#99CC00} .class1 { width:40%; background:#CCC; position:relative; margin:0 auto; padding:5px;} span { position:absolute; right:10px; top:8px; cursor:pointer; color:yellow;} p { text-align:left; line-height:20px; background:#333; padding:3px; margin-top:5px; color:#99CC00} #class1content { height:300px;overflow:hidden} </style> <script> function $(element){ return element = document.getElementById(element); } function $D(){ var d=$('class1content'); var h=d.offsetHeight; var maxh=300; function dmove(){ h += 50; //设置层展开的速度 if(h >= maxh){ d.style.height='300px'; clearInterval(iIntervalId); }else{ d.style.display='block'; d.style.height=h+'px'; } } iIntervalId=setInterval(dmove,2); } function $D2(){ var d=$('class1content'); var h=d.offsetHeight; var maxh=300; function dmove(){ h-=50;//设置层收缩的速度 if(h<=0){ d.style.display='none'; clearInterval(iIntervalId); }else{ d.style.height=h+'px'; } } iIntervalId=setInterval(dmove,2); } function $use(){ var d=$('class1content'); var sb=$('stateBut'); if(d.style.display=='none'){ $D(); sb.innerHTML='展开'; }else{ $D2(); sb.innerHTML='收缩'; } } </script> </head> <body> <div class="class1"> <h1>Alone展开隐藏效果</h1> <span id="stateBut" onClick="$use()">展开</span> <p id="class1content">小蜗牛问妈妈：为什么我们从生下来，就要背负这个又硬又重的壳呢？<br /> 妈妈：因为我们的身体没有骨骼的支撑，只能爬，又爬不快。所以要这个壳的保护！<br /> 小蜗牛：毛虫姊姊没有骨头，也爬不快，为什么她却不用背这个又硬又重的壳呢？ <br /> 妈妈：因为毛虫姊姊能变成蝴蝶，天空会保护她啊。 <br /> 小蜗牛：可是蚯蚓弟弟也没骨头爬不快，也不会变成蝴蝶他什么不背这个又硬又重的壳呢？ <br /> 妈妈：因为蚯蚓弟弟会钻土, 大地会保护他啊。 <br /> 小蜗牛哭了起来：我们好可怜，天空不保护，大地也不保护。 <br /> 蜗牛妈妈安慰他：所以我们有壳啊！我们不靠天，也不靠地，我们靠自己。</p> </div> </body>

提示：你可以先修改部分代码再运行。

<!DOCTYPE html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="Keywords" content="" /> <meta name="Description" content="" /> <title>PNG-24 For ie6透明(www.hemin.cn)</title>  <style type="text/css"> .example { width:600px; height:400px; float:left; background:url(http://www.hemin.cn/demo/DD_Png/bg.jpg) no-repeat 0 0; position:relative; } .trans { position:absolute; width:200px; height:50px; top:200px; left:200px; color:#fff; font-size:18px; font-family:Georgia; background:url(http://www.hemin.cn/demo/DD_Png/trans.png) repeat; } .box { position:absolute; top:100px; left:200px; } .box a { display:block; width:80px; height:80px; color:#fff; font-size:12px; } .box a:hover { background:url(http://www.hemin.cn/demo/DD_Png/boxbg.png) no-repeat left top; } </style> </head> <body> <div class="example"> <div class="trans">Damn IE6!这是repeat的PNG</div> <div class="box"><a href="">请把鼠标移到这里测试a:hover</a></div> </div> </body> </html>

提示：你可以先修改部分代码再运行。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN" xml:lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>选项卡(www.hemin.cn)</title> <style type="text/css">  </style> </head> <body> <div id="tab01"> <h3>首页</h3> <div class="jj"><p>嘿嘿，无视div原始class值。</p></div> <h3 class="pr">测试</h3> <div><p>继续无视h3原始class值。</p></div> <h3>无聊</h3> <div><p>h3没有值也可以～</p></div> <h3 class="box">傻蛋</h3> <div><p>div没有值一样可以～</p></div> </div> <div id="tab02"> <h4>首页</h4> <ol class="pr"><li>嘿嘿，无视容器原始class值。</li></ol> <h4 class="box">测试</h4> <ol><li>继续无视h3原始class值。</li></ol> <h4>无聊</h4> <ol><li>h3没有值也可以～</li></ol> <h4 class="bb">傻蛋</h4> <ol><li>div没有值一样可以～</li></ol> </div> <div id="tab03"> <h3>首页</h3> <div class="tab"><p>嘿嘿，无视h3原始class值。</p></div> <h3>测试</h3> <div class="tab wushi"><p>继续无视div原始class值。</p></div> <h3>无聊</h3> <div class="tab"><p>h3没有值也可以～</p></div> <h3 class="box">傻蛋</h3> <div class="tab tab123"><p>class值相似一样也可以～</p><div><p>指定class后，即时再多一个div也行。</p></div></div> </div> <script type="text/javascript">  </script> </body> </html>

提示：你可以先修改部分代码再运行。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Table Stripes and Row Locking(www.hemin.cn)</title> <style type="text/css"> body {background:#fff;} h1 {font:bold 20px/26px Arial;} p, li, td {font:normal 12px/17px Arial;} table {border:0;border-collapse:collapse;} td {padding:4px;} th {font:bold 12px/17px Arial;text-align:left;padding:4px;border-bottom:1px solid #333;} tr.odd {background:#e4dcd9;} tr.highlight {background:#BDA9A2;} tr.selected {background:#4a1200;color:#fff;} td+td+td {text-align:right;} </style> <script type="text/javascript"> function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = function() { oldonload(); func(); } } } function addClass(element,value) { if (!element.className) { element.className = value; } else { newClassName = element.className; newClassName+= " "; newClassName+= value; element.className = newClassName; } } function stripeTables() { var tables = document.getElementsByTagName("table"); for (var m=0; m<tables.length; m++) { if (tables[m].className == "pickme") { var tbodies = tables[m].getElementsByTagName("tbody"); for (var i=0; i<tbodies.length; i++) { var odd = true; var rows = tbodies[i].getElementsByTagName("tr"); for (var j=0; j<rows.length; j++) { if (odd == false) { odd = true; } else { addClass(rows[j],"odd"); odd = false; } } } } } } function highlightRows() { if(!document.getElementsByTagName) return false; var tables = document.getElementsByTagName("table"); for (var m=0; m<tables.length; m++) { if (tables[m].className == "pickme") { var tbodies = tables[m].getElementsByTagName("tbody"); for (var j=0; j<tbodies.length; j++) { var rows = tbodies[j].getElementsByTagName("tr"); for (var i=0; i<rows.length; i++) { rows[i].oldClassName = rows[i].className rows[i].onmouseover = function() { if( this.className.indexOf("selected") == -1) addClass(this,"highlight"); } rows[i].onmouseout = function() { if( this.className.indexOf("selected") == -1) this.className = this.oldClassName } } } } } } function selectRowCheckbox(row) { var checkbox = row.getElementsByTagName("input")[0]; if (checkbox.checked == true) { checkbox.checked = false; } else if (checkbox.checked == false) { checkbox.checked = true; } } function lockRow() { var tables = document.getElementsByTagName("table"); for (var m=0; m<tables.length; m++) { if (tables[m].className == "pickme") { var tbodies = tables[m].getElementsByTagName("tbody"); for (var j=0; j<tbodies.length; j++) { var rows = tbodies[j].getElementsByTagName("tr"); for (var i=0; i<rows.length; i++) { rows[i].oldClassName = rows[i].className; rows[i].onclick = function() { if (this.className.indexOf("selected") != -1) { this.className = this.oldClassName; } else { addClass(this,"selected"); } selectRowCheckbox(this); } } } } } } addLoadEvent(stripeTables); addLoadEvent(highlightRows); addLoadEvent(lockRow); function lockRowUsingCheckbox() { var tables = document.getElementsByTagName("table"); for (var m=0; m<tables.length; m++) { if (tables[m].className == "pickme") { var tbodies = tables[m].getElementsByTagName("tbody"); for (var j=0; j<tbodies.length; j++) { var checkboxes = tbodies[j].getElementsByTagName("input"); for (var i=0; i<checkboxes.length; i++) { checkboxes[i].onclick = function(evt) { if (this.parentNode.parentNode.className.indexOf("selected") != -1){ this.parentNode.parentNode.className = this.parentNode.parentNode.oldClassName; } else { addClass(this.parentNode.parentNode,"selected"); } if (window.event && !window.event.cancelBubble) { window.event.cancelBubble = "true"; } else { evt.stopPropagation(); } } } } } } } addLoadEvent(lockRowUsingCheckbox); </script> </head> <body> <h1>Table 2</h1> <table id="striped2" class="pickme" caption="Top Grossing Movies"> <thead> <tr> <th> </th> <th>Category</th> <th>Movie</th> <th>Gross</th> </tr> </thead> <tbody> <tr> <td> <input type="checkbox" name="tablechoice1" value="walalala" /> </td> <td>Domestic</td> <td>Titanic</td> <td>$600,788,188</td> </tr> <tr> <td> <input type="checkbox" name="tablechoice2" value="walalala" /> </td> <td>Adjusted for Inflation</td> <td>Gone with the Wind</td> <td>$1,329,453,600</td> </tr> <tr> <td> <input type="checkbox" name="tablechoice3" value="walalala" /> </td> <td>Worldwide</td> <td>Titanic</td> <td>$1,845,034,000</td> </tr> <tr> <td> <input type="checkbox" name="tablechoice4" value="walalala" /> </td> <td>R-Rating</td> <td>The Passion of the Christ</td> <td>$370,274,604</td> </tr> <tr> <td> <input type="checkbox" name="tablechoice5" value="walalala" /> </td> <td>PG-13 Rating</td> <td>Titanic</td> <td>$600,788,188</td> </tr> <tr> <td> <input type="checkbox" name="tablechoice6" value="walalala" /> </td> <td>PG-Rating</td> <td>Star Wars</td> <td>$460,998,007</td> </tr> <tr> <td> <input type="checkbox" name="tablechoice7" value="walalala" /> </td> <td>G-Rating</td> <td>Finding Nemo</td> <td>$339,714,978</td> </tr> <tr> <td> <input type="checkbox" name="tablechoice8" value="walalala" /> </td> <td>NC-17 Rating</td> <td>Showgirls</td> <td>$20,350,754</td> </tr> <tr> <td> <input type="checkbox" name="tablechoice9" value="walalala" /> </td> <td>Movies that never hit #1</td> <td>My Big Fat Greek Wedding</td> <td>241,438,208</td> </tr> <tr> <td> <input type="checkbox" name="tablechoice10" value="walalala" /> </td> <td>IMAX</td> <td>Everest</td> <td>$87,178,599</td> </tr> </tbody></table> </body> </html>

提示：你可以先修改部分代码再运行。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>符合标准的正常工作的对联广告(www.hemin.cn)</title> <script type="text/javascript">  </script> <style type="text/css">  </style> </head> <body> <div id="leftDiv" style="top:120px; /* 距离顶部120px */ left:2px; /* 距离左侧2px */ ">左侧广告内容</div> <div id="rightDiv" style="top:120px; /* 距离顶部120px */ right:2px; /* 距离右侧2px */ ">右侧广告内容</div> <div id="mm"> </div> </body> </html>

提示：你可以先修改部分代码再运行。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>密码强度提示(www.hemin.cn)</title> <head> <style> body { /*ie needs this*/ margin:0px; padding:0px; /*set global font settings*/ font-size:10px; font-family:Tahoma,Verdana,Arial; } a:hover { color:#fff; } #user_registration { border:1px solid #cccccc; margin:auto auto; margin-top:100px; width:400px; } #user_registration label { display: block; /* block float the labels to left column, set a width */ float: left; width: 70px; margin: 0px 10px 0px 5px; text-align: right; line-height:1em; font-weight:bold; } #user_registration input { width:250px; } #user_registration p { clear:both; } #submit { border:1px solid #cccccc; width:100px !important; margin:10px; } h1 { text-align:center; } #passwordStrength { height:10px; display:block; float:left; } .strength0 { width:250px; background:#cccccc; } .strength1 { width:50px; background:#ff0000; } .strength2 { width:100px; background:#ff5f5f; } .strength3 { width:150px; background:#56e500; } .strength4 { background:#4dcd00; width:200px; } .strength5 { background:#399800; width:250px; } </style> </style> <script> function passwordStrength(password) { var desc = new Array(); desc[0] = "Very Weak"; desc[1] = "Weak"; desc[2] = "Better"; desc[3] = "Medium"; desc[4] = "Strong"; desc[5] = "Strongest"; var score = 0; //if password bigger than 6 give 1 point if (password.length > 6) score++; //if password has both lower and uppercase characters give 1 point if ( ( password.match(/[a-z]/) ) && ( password.match(/[A-Z]/) ) ) score++; //if password has at least one number give 1 point if (password.match(/\d+/)) score++; //if password has at least one special caracther give 1 point if ( password.match(/.[!,@,#,$,%,^,&,*,?,_,~,-,(,)]/) ) score++; //if password bigger than 12 give another 1 point if (password.length > 12) score++; document.getElementById("passwordDescription").innerHTML = desc[score]; document.getElementById("passwordStrength").className = "strength" + score; } </script> </head> <body> <form method="post" action="" id="user_registration" name="user_registration"> <p><h1>Password strength metter</h1></p> <p> <label for="pass">Password</label><input type="password" name="pass" id="pass" onkeyup="passwordStrength(this.value)"/> </p> <p> <label for="pass2">Confirm Password</label><input type="password" name="pass2" id="pass2"/> </p> <p> <label for="passwordStrength">Password strength</label> <div id="passwordDescription">Password not entered</div> <div id="passwordStrength" class="strength0"></div> </p> <p> <input type="submit" name="submit" id="submit" value="Register"> </p> </form> </body> </html>

提示：你可以先修改部分代码再运行。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>单行新闻滚动效果(www.hemin.cn)</title> <style type="text/css"> #rollText{font:12px /20px verdana;} </style> </head> <body> <div id="rollAD" style="height:20px; position:relative; overflow:hidden; border:1px solid #FF0000;"> <div id="rollText" style="font-size:12px; line-height:20px;"> <a href="">1 安理会改革拟新增七理事国</a> <a href="">2 国务院领导工作分工确定</a> <a href="">3 安理会改革拟新增七理事国</a><br /> <a href="">4 国务院领导工作分工确定</a> <a href="">5 安理会改革拟新增七理事国</a> <a href="">6 国务院领导工作分工确定</a><br /> <a href="">7 国务院领导工作分工确定</a> <a href="">8 安理会改革拟新增七理事国</a> <a href="">9 国务院领导工作分工确定</a><br /> </div> </div> <script type="text/javascript"> // <![CDATA[ var textDiv = document.getElementById("rollText"); var textList = textDiv.getElementsByTagName("a"); if(textList.length > 2){ var textDat = textDiv.innerHTML; var br = textDat.toLowerCase().indexOf("<br",textDat.toLowerCase().indexOf("<br")+3); //var textUp2 = textDat.substr(0,br); textDiv.innerHTML = textDat+textDat+textDat.substr(0,br); textDiv.style.cssText = "position:absolute; top:0"; var textDatH = textDiv.offsetHeight;MaxRoll(); } var minTime,maxTime,divTop,newTop=0; function MinRoll(){ newTop++; if(newTop<=divTop+20){ textDiv.style.top = "-" + newTop + "px"; }else{ clearInterval(minTime); maxTime = setTimeout(MaxRoll,5000); } } function MaxRoll(){ divTop = Math.abs(parseInt(textDiv.style.top)); if(divTop>=0 && divTop<textDatH-40){ minTime = setInterval(MinRoll,1); }else{ textDiv.style.top = 0;divTop = 0;newTop=0;MaxRoll(); } } // ]]> </script> </body> </html>

提示：你可以先修改部分代码再运行。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>JS图片加载与获取远程图片大小(www.hemin.cn)</title> </head> <body> <input id="path" value="http://www.google.cn/logos/meilanfang09.gif" style="width:400px" /><button onclick="loadpic($('prev'),$('path').value)">加载</button><button onclick="getImgSize($('path').value);">获取大小</button> <div id="prev"></div> <script type="text/javascript"> var $=function(id){ return document.getElementById(id); } function loadpic(holder,url){ holder.innerHTML='正在加载...'; var img=new Image(); img.src=url; var imgElem=document.createElement('img'); var dick=setInterval(function(){ if(img.complete){ clearInterval(dick); holder.innerHTML=''; imgElem.src=img.src; img=null; holder.appendChild(imgElem); return imgElem; } },50); } function getImgSize(url){ var img=new Image(); img.src=url; var imgElem=document.createElement('img'); var dick=setInterval(function(){ if(img.complete){ clearInterval(dick); imgElem.src=img.src; img=null; document.body.appendChild(imgElem); imgElem.style.visibility='hidden'; alert('图片宽度:'+imgElem.offsetWidth+'\r\n图片高度:'+imgElem.offsetHeight); document.body.removeChild(imgElem); } },50); } </script> </body> </html>

提示：你可以先修改部分代码再运行。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <TITLE>JavaScript碰撞效果(www.hemin.cn)</TITLE> <FCK:META http-equiv=Content-Type content="text/html; charset=gb2312" /> <FCK:META content="Gerard Ferrandez at <a target="_blank" href="http://www.dhteumeuleu.com" rel="external">http://www.dhteumeuleu.com</a>" name=author /> <FCK:META http-equiv=imagetoolbar content=no /> <STYLE type=text/css> BODY { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: #000000; LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; OVERFLOW: hidden; WIDTH: 100%; CURSOR: url('http://www.dhteumeuleu.com/no.cur'); PADDING-TOP: 0px; POSITION: absolute; TOP: 0px; HEIGHT: 100% } SPAN { POSITION: absolute } </STYLE> <SCRIPT type=text/javascript> </SCRIPT> <FCK:META content="MSHTML 6.00.3790.4210" name=GENERATOR /> </HEAD> <BODY> <DIV id=SPAN style="BACKGROUND: #222222; POSITION: absolute"> <DIV id=SPLASH style="BORDER-RIGHT: gray 1px solid; BORDER-TOP: gray 1px solid; FONT-SIZE: 1px; BACKGROUND: #000000; BORDER-LEFT: gray 1px solid; BORDER-BOTTOM: gray 1px solid; POSITION: absolute; TOP: -1000px"></DIV> </DIV> </body> </HTML>

提示：你可以先修改部分代码再运行。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>来回移动(www.hemin.cn)</title> <style type="text/css"> body{margin:0 auto;padding:0;width:80%;height:200px;position:relative;border:solid 1px #aaa;} #a,#b,#c,#d,#e{position:absolute;height:20} #a{width:50px;background:green;top:40px;} #b{width:20px;background:#aaa;top:70px;} #c{width:20px;background:red;top:100px;} #d{width:120px;background:blue;top:130px;} #e{width:20px;background:#000;top:170px;} </style> </head> <body> <h1>容器来回移动</h1> <div id="a">   </div> <div id="b">   </div> <div id="c">   </div> <div id="d">   </div> <div id="e">   </div> </body> </html> <script type="text/javascript"> function moveBlock(obj,speed){ if(!obj.style.left){obj.style.left="0";} //获取#block的宽度 var blockW=parseInt(obj.offsetWidth,10); var blockLeft=parseInt(obj.style.left,10); var bodyW=parseInt(document.body.offsetWidth); //如果块在最左边，那么向右方运动 if(blockLeft==0){ obj.setAttribute("path","true"); } //如果块已经溢出右边界，那么向左运动 if(blockLeft+blockW>=bodyW){ obj.setAttribute("path","false"); } //根据path这个自定义属性，来判断是该向左还是向右运动 if(obj.getAttribute("path")=="true"){ blockLeft+=speed; if(blockLeft+blockW>bodyW){ obj.style.left=bodyW-blockW+"px"; }else{ obj.style.left=blockLeft+"px"; } }else{ blockLeft-=speed; if(blockLeft<0){blockLeft=0;} obj.style.left=blockLeft+"px"; } } function run(obj,speed,delay){window.setInterval(function(){moveBlock(obj,speed);},delay)} var a=document.getElementById("a"); var b=document.getElementById("b"); var c=document.getElementById("c"); var d=document.getElementById("d"); var e=document.getElementById("e"); /* run(容器对象,步长(px),延迟) */ run(a,5,10); run(b,1,10); run(c,10,10); run(d,20,10); run(e,15,50); </script>

提示：你可以先修改部分代码再运行。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Javascript 控制 CheckBox 的全选与取消全选(www.hemin.cn) </title> <script type="text/javascript"> function checkAll(name) { var el = document.getElementsByTagName('input'); var len = el.length; for(var i=0; i<len; i++) { if((el[i].type=="checkbox") && (el[i].name==name)) { el[i].checked = true; } } } function clearAll(name) { var el = document.getElementsByTagName('input'); var len = el.length; for(var i=0; i<len; i++) { if((el[i].type=="checkbox") && (el[i].name==name)) { el[i].checked = false; } } } </script> </head> <body> <input type="checkbox" name="test" value="" onclick="if(this.checked==true) { checkAll('test'); } else { clearAll('test'); }" /> 字母全选开关 <input type="checkbox" name="test" value="a" /> a <input type="checkbox" name="test" value="b" /> b <input type="checkbox" name="test" value="c" /> c <input type="checkbox" name="test" value="d" /> d <input type="checkbox" name="test" value="e" /> e <input type="checkbox" name="test" value="f" /> f <input type="checkbox" name="test" value="g" /> g <br /> <input type="checkbox" name="num" value="" onclick="if(this.checked==true) { checkAll('num'); } else { clearAll('num'); }" /> 数字全选开关 <input type="checkbox" name="num" value="1" /> 1 <input type="checkbox" name="num" value="2" /> 2 <input type="checkbox" name="num" value="3" /> 3 <br /><br /> <input type="button" value="选择所有的字母" onclick="checkAll('test')" /> <input type="button" value="清空选中的字母" onclick="clearAll('test')" /> <br /><br /> <input type="button" value="选择所有的数字" onclick="checkAll('num')" /> <input type="button" value="清空选中的数字" onclick="clearAll('num')" /> </body> </html>

提示：你可以先修改部分代码再运行。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> Fountain </title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> #stage {width:200px; height:400px; border:1px solid #993300; position:relative; margin:auto;} </style> </head> <body> <div id="stage"> <div id="fountain"></div> <input type="button" value="Run" id="run" /> <input type="button" value="Stop" id="stop" /> </div> <script> /** * 小球类 Ball * @param {number} diameter 直径 */ var Ball = function(diameter, x, y, vx, vy) { var ball = document.createElement('div'); var r = Math.floor(Math.random() * 255); var g = Math.floor(Math.random() * 255); var b = Math.floor(Math.random() * 255); ball.style.width = ball.style.height = diameter + 'px'; ball.style.backgroundColor = 'rgb('+r+', '+g+', '+b+')'; ball.style.left = x + 'px'; ball.style.top = y + 'px'; ball.vx = vx; ball.vy = vy; ball.style.position = 'absolute'; return ball; }; function T$(id) { return document.getElementById(id) } /** * 喷泉主类 Fountain * @param {string} 舞台ID * @param {number} 水滴数目 * @param {number} 重力加速度 */ var Fountain = function(stage, count, gravity) { this.stage = T$(stage); this.count = count; this.gravity = gravity; this.timer = null; }; Fountain.prototype = { constructor: Fountain, initialize: function() { // 生成一定数目的随机颜色小球 var self = this, count = self.count, j = 0, frag = document.createDocumentFragment(), stage = self.stage, gravity = self.gravity; // 设置小球参数(直径, 半径, 舞台位置) var diameter = 4, radius = diameter / 2, x = stage.clientWidth / 2, y = stage.clientHeight; var balls = new Array(); for (; j < count; j++) { var ball = new Ball(diameter, x, y, Math.random() * 4 - 1, Math.random() * -10 - 10); balls[j] = ball; frag.appendChild(ball); } T$('fountain').innerHTML = ''; T$('fountain').appendChild(frag); clearTimeout(self.timer); function Run() { for (var i = 0, len = balls.length; i < len; i++) { var ball = balls[i]; ball.vy += gravity; ball.style.left = (ball.offsetLeft + ball.vx) + 'px'; ball.style.top = (ball.offsetTop + ball.vy) + 'px'; // 边界检测 if (ball.offsetLeft - radius > x || ball.offsetLeft + radius < 0 || ball.offsetTop - radius > y || ball.offsetTop + radius < 0) { ball.style.left = x + 'px'; ball.style.top = y + 'px'; ball.vx = Math.random() * 4 - 1; ball.vy = Math.random() * -10 - 10; } } self.timer = setTimeout(Run, 10); } Run(); } }; // 在舞台中央生成30个彩色水滴. 重力加速度为.5 var fountain = new Fountain('stage', 30, 0.5); T$('run').onclick = function() { fountain.initialize(); } T$('stop').onclick = function() { clearTimeout(fountain.timer); } </script> </body> </html>

提示：你可以先修改部分代码再运行。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> 银河星系 </title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> #content { width:600px; height:200px; position:relative; left:0px; top:0px; } #graph {position:absolute; left:0; top:0} #sun {position:absolute; width:20px; height:20px; line-height:20px; left: 290px; top:90px; background-color:blue} #planet{position:absolute; width:5px; height:5px; left: -100px; top:-100px; background-color:red} </style> </head> <body> <div id="content"> <div id="graph"></div> <div id="sun"></div> <div id="planet"></div> </div> <input type="button" value="Run" id="run" /> <input type="button" value="Stop" id="stop" /> <script> function T$(i) { return document.getElementById(i); } var math = function() { var planet = T$('planet'); xlen = T$('content').clientWidth, ylen = T$('content').clientHeight, x_posy = ylen / 2, y_posx = xlen / 2, angle = 0; var galaxy = function() { var self = this; if (!(self instanceof galaxy)) { return new galaxy(); } self.timer = null; self.initialize(); } galaxy.prototype = { initialize: function() { var self = this; self.drawXaxis(); self.drawYaxis(); self.drawGalaxy(); }, drawXaxis: function() { var self = this; for (var i = 0, arr = []; i < xlen; ++i) { arr[i] = self.createDot(1, 1, i, x_posy, '#213478'); } T$('graph').innerHTML += arr.join(''); }, drawYaxis: function() { var self = this, amp = self.amp; for (var i = 0, arr = []; i < ylen; ++i) { arr[i] = self.createDot(1, 1, y_posx, i, '#213478'); } T$('graph').innerHTML += arr.join(''); }, drawGalaxy: function() { var self = this; for (var i = 0, arr = []; i < xlen; ++i) { arr[i] = self.createDot(1, 1, y_posx + Math.sin(angle+=.01) * y_posx , x_posy + Math.cos(angle+=.01) * x_posy, '#213478'); } T$('graph').innerHTML += arr.join(''); }, runPlanet: function() { var self = this; self.timer = setInterval(function() { planet.style.left = (y_posx + Math.sin(angle+=.01) * y_posx) + 'px'; planet.style.top = (x_posy + Math.cos(angle+=.01) * x_posy) + 'px'; }, 40); }, createDot: function(w, h, x, y, c) { return '<div style="width:'+w+'px;height:'+h+'px;font-size:0;background-color:'+c+';position:absolute;left:'+x+'px;top:'+y+'px;"><\/div>'; } } return {galaxy : galaxy} }(); var galaxy = math.galaxy(); T$('run').onclick = function() { clearInterval(galaxy.timer); galaxy.runPlanet(); } T$('stop').onclick = function() { clearInterval(galaxy.timer); } </script> </body> </html>

提示：你可以先修改部分代码再运行。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> 正弦曲线 </title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> #content { width:600px; height:200px; border:1px solid #213478; position:relative; left:0px; top:0px; } #graph {position:absolute; left:0; top:0} </style> </head> <body> <div id="content"> <div id="graph"></div> </div> <script> var math = function() { function T$(i) { return document.getElementById(i); } var xlen = T$('content').clientWidth; x_posy = T$('content').clientHeight / 2, angle = 0; function drawSine(amp) { var self = this; if (!(self instanceof drawSine)) { return new drawSine(amp); } self.amp = amp; self.initialize(); } drawSine.prototype = { initialize: function() { var self = this; self.drawXaxis(); self.drawYaxis(); }, drawXaxis: function() { var self = this; for (var i = 0, arr = []; i < xlen; ++i) { arr[i] = self.createDot(1, 1, i, x_posy, '#213478'); } T$('graph').innerHTML += arr.join(''); }, drawYaxis: function() { var self = this, amp = self.amp; for (var i = 0, arr = []; i < xlen; ++i) { arr[i] = self.createDot(2, 2, i += amp, x_posy + Math.sin(angle+=.1) * x_posy, '#FF9933'); } T$('graph').innerHTML += arr.join(''); }, createDot: function(w, h, x, y, c) { return '<div style="width:'+w+'px;height:'+h+'px;font-size:0;background-color:'+c+';position:absolute;left:'+x+'px;top:'+y+'px;"><\/div>'; } } return {drawSine: drawSine} }(); math.drawSine(2 /* 波长 */); </script> </body> </html>

提示：你可以先修改部分代码再运行。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>accordion</title> <style type="text/css"> * {margin:0; padding:0} #accordion {width:259px; margin:50px auto; border:1px solid #333; border-top:none} .accordion {width:259px; font:12px Verdana, Arial; color:#333} .accordion dt {width:247px; padding:4px 6px; font-weight:bold; cursor:pointer; background-color:#666; background-image:url(images/arrow_down.gif); background-position: right center; background-repeat:no-repeat; color:#fff; border-top: 1px solid #333} .accordion dt:hover {background-color:#555} .accordion .open {background-color:#444; background-image:url(images/arrow_up.gif)} .accordion dd {overflow:hidden; background:#fff;} .accordion span {display:block; width:229px; border-top:none; padding:15px} </style> <script type="text/javascript"> var accordion = function() { var tm = sp = 10; function slider(t, c, k) { var self = this; if (!(self instanceof slider)) { return new slider(t, c, k); } self.nm = t; self.arr = []; self.init(t, c, k); } slider.prototype.pro = function(d) { for (var i = 0; i < this.l; i++) { var h = this.arr[i], s = h.nextSibling; s = s.nodeType != 1 ? s.nextSibling : s; clearInterval(s.tm); if (h == d && s.style.display == 'none') { s.style.display = ''; su(s, 1); h.className = this.sl } else if (s.style.display == '') { su(s, -1); h.className = ''; } } } slider.prototype.init = function(t, c, k) { var a, h, s, l, i, self = this; a = T$(t); self.sl = k ? k : ''; h = T$$('dt', a); s = T$$('dd', a); self.l = h.length; for (i = 0; i < self.l; i++) { var d = h[i]; self.arr[i] = d; d.onclick = function() { self.pro(this); } if (c == i) { d.className = self.sl; } } l = s.length; for (i = 0; i < l; i++) { var d = s[i]; d.mh = d.offsetHeight; if (c != i) { d.style.height = 0; d.style.display = 'none'; } } } function T$(o) { return document.getElementById(o); } function T$$(t, o) { return (o || document).getElementsByTagName(t); } function su(c, f) { c.tm = setInterval(function() { sl(c, f)}, tm); } function sl(c, f) { var h = c.offsetHeight, m = c.mh, d = f == 1 ? m - h : h; c.style.height = h + (Math.ceil(d / sp) * f) + 'px'; c.style.opacity = h / m; c.style.filter = 'alpha(opacity=' + h * 100 / m + ')'; if (f == 1 && h >= m) { clearInterval(c.tm)} else if (f != 1 && h == 1) { c.style.display = 'none'; clearInterval(c.tm); } } return {slider: slider} }(); </script> </head> <body> <div id="accordion"> <dl class="accordion" id="slider"> <dt>火影忍者</dt> <dd> <span> 从小身上封印着邪恶的九尾妖狐，无父无母的鸣人受尽了村里人的冷落，但是他却不知道原因，只是拼命用各种恶作剧试图吸引大家的注意力，人们却反而更远离他。好在还有依鲁卡老师关心他， <img src="http://hiphotos.baidu.com/jonny1008/pic/item/16c65216d09434224a90a712.jpg" width="100" height="102" alt="佩恩六道" /> <img src="http://hiphotos.baidu.com/w2008wjay/pic/item/f4c1ad7a80acfbd72f73b349.jpg" width="100" height="100" alt="漩涡鸣人" /> <br /> 鸣人的性格才没有变得扭曲。他总是干劲十足，嘻嘻哈哈，超级乐观。为了让更多的人认可自己，鸣人的目标是——成为第六代火影！ </span> </dd> <dt>天空之城</dt> <dd> <span> 故事发生的时间大概是十九世纪初，是个带有欧洲工业革命时期味道的年代，女孩希达被政府军软禁在飞艇上，灵敏的海盗们嗅到了希达身上不同一般人的身份，在深夜向飞艇发动了进攻，就在两方人马争夺西大的时候，慌乱逃跑的女孩不小心从飞艇上调了下去，可就在向着地面追落得时候，希达胸前的石头发出了耀眼的光芒，温柔的包围住希达，并慢慢落下地面，就在这时，矿工机师的徒弟巴斯在回程的路上看到了光芒中心的希达，并接下了她......<br /> <img src="http://hiphotos.baidu.com/xlycy1/pic/item/293347d1c1ad4208960a167a.jpg" width="220" height="100" alt="天空之城" /> </span> </dd> <dt>海贼王</dt> <dd> <span> 在某个海岛小渔村长大。和暂驻在渔村的大海盗红发杰克感情很好，于是一心想成为海盗。眼下的疤痕就是为了显示自己够狠自己用刀划的。可是路飞7岁时因为和杰克斗气糊里糊涂的吃了海盗们抢来的恶魔果实——橡皮果实（ゴムゴムの実），从此再也学不会游泳。<br /> <img src="http://hiphotos.baidu.com/haigevsjunjie/pic/item/e6525c44bd65900ecefca3e9.jpg" width="220" height="100" alt="海贼王" /> </span> </dd> <dt>死神</dt> <dd> <span> 主角是名叫黑崎一护的15岁高中生，是个热血少年。因一次被一种叫"虚"的怪物攻击时，认识了一个自称是死神的少女"露琪亚"。一护因为露琪亚给予了他力量而变成了死神，从此开始履行作为一个死神的职责--消灭虚... 露琪亚将死神的力量传给人类这件事被尸魂界得知，于是朽木白哉和阿散井恋次被派到现世执行将露琪亚带回尸魂界并关押的任务（人物应该不用介绍吧~！）。露琪亚不想让一护卷进此事，于是孤身一人前去迎战，可是能力终究敌不上队长级的。就在危急关头，一护找到了露琪亚，并想阻止他们将其带走。但现在的一护毕竟不强，被朽木白哉连砍两刀，倒在血泊中。露琪亚含泪离开... <br /> <img src="http://hiphotos.baidu.com/zxcc1121/pic/item/de773508284dae0ae824886c.jpg" width="220" height="100" alt="死神" /> </span> </dd> </dl> </div> <script type="text/javascript"> accordion.slider("slider", 0, "open"); </script> </body> </html>

提示：你可以先修改部分代码再运行。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> Slider </title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style type="text/css"> body, td, ul, li { margin:0; padding:0 } table { border-collapse: collapse; border-spacing:0 } #container { width:610px; height:205px; position:relative; overflow: hidden; margin:0 auto; } #scroller { position:absolute; } #page { position: absolute; float:right; left:520px; top:180px;} #page li { float:left; cursor:pointer; list-style:none; width:15px; height:15px; line-height:15px; font-family:Arial; font-size:12px; margin:1px; text-align:center;background:url("http://pc.qq.com/pc/images/flashbutton.gif") no-repeat scroll -15px 0 transparent;} #page li.on {background:url("http://pc.qq.com/pc/images/flashbutton.gif") no-repeat scroll 0 0 transparent;color:#FFFFFF;} </style> </head> <body> <div id="container"> <table id="scroller" > <tr> <td><img src="http://inncache.soso.com/pc/images/manage.jpg" /></td> <td><img src="http://inncache.soso.com/pc/images/py.jpg" /></td> <td><img src="http://inncache.soso.com/pc/images/player.jpg" /></td> <td><img src="http://inncache.soso.com/pc/images/xf.jpg" /></td> <td><img src="http://inncache.soso.com/pc/images/TT.jpg" /></td> </tr> </table> <ul id="page"></ul> </div> <script> var QQ = function() { // 公用函数 function T$(id) { return document.getElementById(id); } function T$$(root, tag) { return (root || document).getElementsByTagName(tag); } function $extend(des, src) { for(var p in src) { des[p] = src[p]; } return des; } function $each(arr, callback, thisp) { if (arr.forEach) {arr.forEach(callback, thisp);} else { for (var i = 0, len = arr.length; i < len; i++) callback.call(thisp, arr[i], i, arr);} } function currentStyle(elem, style) { return elem.currentStyle || document.defaultView.getComputedStyle(elem, null); } // 缓动类 var Tween = { Quart: { easeOut: function(t,b,c,d){ return -c * ((t=t/d-1)*t*t*t - 1) + b; } }, Back: { easeOut: function(t,b,c,d,s){ if (s == undefined) s = 1.70158; return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b; } }, Bounce: { easeOut: function(t,b,c,d){ if ((t/=d) < (1/2.75)) { return c*(7.5625*t*t) + b; } else if (t < (2/2.75)) { return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b; } else if (t < (2.5/2.75)) { return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b; } else { return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b; } } } } // 主类构造函数 var scrollTrans = function(cid, sid, count, config) { var self = this; if (!(self instanceof scrollTrans)) { return new scrollTrans(cid, sid, count, config); } self.container = T$(cid); self.scroller = T$(sid); if (!(self.container || self.scroller)) { return; } self.config = $extend(defaultConfig, config || {}); self.index = 0; self.timer = null; self.count = count; self.step = self.scroller.offsetWidth / count; }; // 默认配置 var defaultConfig = { trigger: 1, // 触发方式1:click other: mouseover auto: true, // 是否自动切换 tween: Tween.Quart.easeOut, // 默认缓动类 Time: 10, // 滑动延时 duration: 50, // 切换时间 pause: 3000, // 停顿时间 start: function() {}, // 切换开始执行函数 end: function() {} // 切换结束执行函数 }; scrollTrans.prototype = { constructor: scrollTrans, transform: function(index) { var self = this; index == undefined && (index = self.index); index < 0 && (index = self.count - 1) || index >= self.count && (index = 0); self.time = 0; self.target = -Math.abs(self.step) * (self.index = index); self.begin = parseInt(currentStyle(self.scroller)['left']); self.change = self.target - self.begin; self.duration = self.config.duration; self.start(); self.run(); }, run: function() { var self = this; clearTimeout(self.timer); if (self.change && self.time < self.duration) { self.moveTo(Math.round(self.config.tween(self.time++, self.begin, self.change, self.duration))); self.timer = setTimeout(function() {self.run()}, self.config.Time); } else { self.moveTo(self.target); self.config.auto && (self.timer = setTimeout(function() {self.next()}, self.config.pause)); } }, moveTo: function(i) { this.scroller.style.left = i + 'px'; }, next: function() { this.transform(++this.index); } }; return { scroll: function(cid, sid, count, config) { window.onload = function() { var frag = document.createDocumentFragment(), nums = []; for (var i = 0; i < count; i++) { var li = document.createElement('li'); (nums[i] = frag.appendChild(document.createElement('li'))).innerHTML = i + 1; } T$('page').appendChild(frag); // 调用主类 var st = scrollTrans(cid, sid, count, config); $each(nums, function(o, i) { o[st.config.trigger == 1 ? 'onclick' : 'onmouseover'] = function() { o.className = 'on'; st.transform(i); } o.onmouseout = function() { o.className = ''; st.transform();} }); st.start = function() { $each(nums, function(o, i) { o.className = st.index == i ? 'on' : ''; }); }; st.transform(); } } } }(); QQ.scroll('container' /*外部容器ID*/, 'scroller'/*滑动容器ID*/, 5/*切换图片数目*/, {trigger: 0} /*默认配置*/); </script> </body> </html>

提示：你可以先修改部分代码再运行。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> new document </title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> <center> <input type="button" name="fx" value="宽度渐变" id="wt-cg"/> <input type="button" name="fx" value="高度渐变" id="hi-cg"/> <input type="button" name="fx" value="透明度渐变" id="op-cg"/> <input type="button" name="fx" value="边框渐变" id="bd-cg"/> <input type="button" name="fx" value="综合渐变" id="zh-cg"/> <div id="demo" style="width:370px;height:100px;background-color:#00CC33;border:2px solid #990033; font-size:12px;"></div> </center> <script> function Animate(el, prop, opts) { this.el = el; this.prop = prop; this.from = opts.from; this.to = opts.to; this.time = opts.time; this.callback = opts.callback; this.animDiff = this.to - this.from; } Animate.prototype._setStyle = function(val) { switch(this.prop) { case 'opacity': this.el.style[this.prop] = val; this.el.style.filter = 'alpha(opacity=' + val * 100 + ')'; break; default: this.el.style[this.prop] = val + 'px'; break; } } Animate.prototype._animate = function() { var that = this; this.now = new Date(); this.diff = this.now - this.startTime; if (this.diff > this.time) { this._setStyle(this.to); if (this.callback) { this.callback.call(this); } clearInterval(this.timer); return; } this.percentage = (Math.floor((this.diff / this.time) * 100) / 100); this.val = (this.animDiff * this.percentage) + this.from; this._setStyle(this.val); } Animate.prototype.start = function() { var that = this; this.startTime = new Date(); clearInterval(this.timer); this.timer = setInterval(function() { that._animate.call(that); }, 4); } Animate.canTransition = function() { var el = document.createElement('foo'); el.style.cssText = '-webkit-transition: all .5s linear;'; return !!el.style.webkitTransitionProperty; }(); window.onload = function() { var T$ = function(id) { return document.getElementById(id); } var T$$ = function(n) { return document.getElementsByName(n); } var demo = T$('demo'); var btns = T$$('fx'); function disableButton() { for (var i = 0, len = btns.length; i < len; ++i) { btns[i].disabled = 'disabled'; } } function resetButton() { for (var i = 0, len = btns.length; i < len; ++i) { btns[i].disabled = ''; } } // 宽度渐变 function changeWidth() { var fx = 'width', from = demo.clientWidth, to = from - 270, time = 1000; var callback = function() { from = demo.clientWidth; to = from + 270; new Animate(demo, fx, { from: from, to: to, time: time, callback: resetButton }).start(); } new Animate(demo, fx, { from: from, to: to, time: time, callback: callback }).start(); } // 高度渐变 function changeHeight() { var fx = 'height', from = demo.clientHeight, to = from + 100, time = 1000; var callback = function() { from = demo.clientHeight; to = from - 100; new Animate(demo, fx, { from: from, to: to, time: time, callback: resetButton}).start(); } new Animate(demo, fx, { from: from, to: to, time: time, callback: callback }).start(); } // 透明度渐变 function changeOpacity() { var fx = 'opacity', from = 1, to = 0, time = 1000; var callback = function() { from = 0; to = 1; new Animate(demo, fx, { from: from, to: to, time: time, callback: resetButton}).start(); } new Animate(demo, fx, { from: from, to: to, time: time, callback: callback }).start(); } // 边框渐变 function changeBorderWidth() { var fx = 'borderWidth', from = 2, to = 10, time = 1000; var callback = function() { from = 10; to = 2; new Animate(demo, fx, { from: from, to: to, time: time, callback: resetButton }).start(); } new Animate(demo, fx, { from: from, to: to, time: time, callback: callback }).start(); } T$('wt-cg').onclick = function() { disableButton(); changeWidth(); } T$('hi-cg').onclick = function() { disableButton(); changeHeight(); } T$('op-cg').onclick = function() { disableButton(); changeOpacity(); } T$('bd-cg').onclick = function() { disableButton(); changeBorderWidth(); } T$('zh-cg').onclick = function() { disableButton(); changeWidth(); changeHeight(); changeOpacity(); } //if (Animate.canTransition) { //demo.style.webkitTransition = 'opacity 3s ease-in'; //demo.style.opacity = 0; //} else { //} } </script> </body> </html>

提示：你可以先修改部分代码再运行。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>简单的原生态JavaScript缓动效果</title> <style type="text/css"> #show{ width:100px; height:100px; background:#eee; border:1px solid #800; opacity:0.8; filter:alpha(opacity=80); } #d1,#d2{ width:100px; height:100px; background:#fff; border:1px solid #333; position:absolute; left:1017px; top:100px; text-align:center; line-height:50px; } #d2{ left:100px; top:525px; } </style> </head> <body> <div id="d1">第一个位置1017 100</div><div id="d2">第二个位置100 525</div> <div id="show"></div> <button id="go">第一个位置</button><button id="stop">第二个位置</button><button id="pause">暂停</button><button id="goon">继续</button> <div id="result"></div> </body> <script type="text/javascript"> var r=document.getElementById("result"); var store; var timer; function moveElement(elementID,final_x,final_y,interval){ if(!document.getElementById) return false; if(!document.getElementById(elementID)) return false; var elem=document.getElementById(elementID); var xpos=parseInt(elem.style.left); var ypos=parseInt(elem.style.top); r.innerHTML=xpos+":"+ypos; if(xpos==final_x&&ypos==final_y){ return false; } if(xpos<final_x){ var dist=Math.ceil((final_x-xpos)/10) xpos=xpos+dist; } if(xpos>final_x){ var dist=Math.ceil((xpos-final_x)/10) xpos=xpos-dist; } if(ypos<final_y){ var dist=Math.ceil((final_y-ypos)/10) ypos=ypos+dist; } if(ypos>final_y){ var dist=Math.ceil((ypos-final_y)/10) ypos=ypos-dist; } elem.style.left=xpos+"px"; elem.style.top=ypos+"px"; var repeat="moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")"; timer=setTimeout(repeat,interval); } var elem=document.getElementById("show"); elem.style.position="absolute"; elem.style.left="70px"; elem.style.top="100px"; document.getElementById("go").onclick=function(){ if(timer){ clearTimeout(timer); } moveElement("show",1017,100,40); store=function(){ moveElement("show",1017,100,40); } } document.getElementById("stop").onclick=function(){ if(timer){ clearTimeout(timer); } moveElement("show",100,525,40); store=function(){ moveElement("show",100,525,40); } } document.getElementById("pause").onclick=function(){ if(timer){ clearTimeout(timer); } } document.getElementById("goon").onclick=function(){ store(); } </script> </html>

提示：你可以先修改部分代码再运行。