这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
- <title>媲美Flash的JS导航菜单</title>
- <style type="text/css">
- <!--
- .w1 {
- width: 538px;
- }
- .w2 {
- width: 100px;
- }
- .ztd {
- color: #202020;
- }
- .bg22 {
- color: #858585;
- height: 29px;
- font-family: Arial, Helvetica, sans-serif;
- font-size: 12px;
- }
- .bg22 A{
- color: #858585;
- }
- .bg27 {
- text-align: right;
- height: 30px;
- width: 538px;
- }
- .ztd {
- color: #202020;
- font-family: Arial, Helvetica, sans-serif;
- font-size: 12px;
- }
- .zta {
- color: #449100;
- font-family: Arial, Helvetica, sans-serif;
- font-size: 12px;
- }
- .bg28 {
- text-align: center;
- height: 28px;
- font-family: Arial, Helvetica, sans-serif;
- font-size: 12px;
- color: #202020;
- background-color: #FAFAFA;
- }
- body {
- text-align: center;
- }
- a {
- font-family: Arial, Helvetica, sans-serif;
- font-size: 12px;
- text-decoration: none;
- color: #66614B;
- }
- a:link {
- text-decoration: none;
- }
- a:visited {
- text-decoration: none;
- }
- a:active {
- text-decoration: none;
- }
- a:hover {
- text-decoration: underline;
- }
- .ha {
- height: 8px;
- }
- .hb {
- height: 5px;
- }
- .img15 {
- background-image: url(http://www.jb51.net/jstest/images/200651105044727.GIF);
- background-repeat: repeat-x;
- }
- .qh {
- font-family: Arial, Helvetica, sans-serif;
- font-size: 12px;
- color: #3A3A3A;
- height: 28px;
- width: 533px;
- }
- .qhl {
- color: #3A3A3A;
- width: 235px;
- text-align: left;
- }
- .qhc {
- text-align: center;
- width: 60px;
- }
- .qhc a {
- color: #898989;
- }
- .qhr {
- color: #3A3A3A;
- text-align: right;
- width: 235px;
- }
- -->
- </style>
- <style type=text/css>.table1 {
- BORDER-RIGHT: #cccccc 1px solid; BORDER-BOTTOM-COLOR: black; BORDER-LEFT: #cccccc 1px solid; BORDER-TOP-STYLE: solid; BORDER-TOP-COLOR: black; BACKGROUND-COLOR: #666666; BORDER-BOTTOM-STYLE: solid
- }
- .alp {
- FILTER: Alpha(Opacity=0,FinishOpacity=0, Style=2, StartX=0, StartY=0, FinishX=80, FinishY=80); BACKGROUND-COLOR: #99ccff
- }
- .maskl {
- OVERFLOW: hidden
- }
- .submenu {
- BORDER-RIGHT: #ffffff 1px solid; BORDER-TOP: #ffffff 1px solid; BORDER-LEFT: black 0px solid; BORDER-BOTTOM: #ffffff 1px solid
- }
- </style>
- <script>
- function subClose1(){
- if(sub2.style.pixelLeft>-26){
- sub2.style.pixelLeft--;
- setTimeout("subClose1()",1);
- }else{
- sub2.style.pixelLeft=-26;
- subMenuShowing=false;
- hideM2();
- }
- }
- subMenuShowing=false;
- function subMenu1(){
- var obj=event.srcElement;
- subMenuShowing=true;
- sub2out();
- }
- function sub2out(){
- if(sub2.style.pixelLeft<2){
- sub2.style.pixelLeft++;
- setTimeout("sub2out()",1);
- }
- }
- curSelect=0;
- function showMenu(mID){
- var oMenu=eval("menu"+mID);
- var oCircle=eval("sl"+mID);
- oMenu.style.pixelTop+=10;
- if(oMenu.style.pixelTop<oCircle.style.pixelTop+6) {
- oMenu.timeHandle=setTimeout("showMenu("+mID+")",1);
- }
- else oMenu.style.pixelTop=oCircle.style.pixelTop+6;
- }
- function hideMenu(mID){
- var oMenu=eval("menu"+mID);
- var oCircle=eval("sl"+mID);
- oMenu.style.pixelTop-=10;
- if(oMenu.style.pixelTop>-60) {
- oMenu.timeHandle=setTimeout("hideMenu("+mID+")",1);
- }
- else oMenu.style.pixelTop=-80;
- }
- function lightMv(){
- if(light.filters.Alpha.opacity<100) {
- light.filters.Alpha.opacity+=5;
- light.timeHandle=setTimeout("lightMv()",1);
- }
- }
- function darkMv(){
- if(light.filters.Alpha.opacity>0) {
- light.filters.Alpha.opacity-=5;
- light.timeHandle=setTimeout("darkMv()",1);
- }
- }
- function sfMv1(){
- sl1.style.pixelTop+=sl1.mvStep;
- if ((sl1.dx++)>20) {
- sl1.mvStep=-sl1.mvStep;
- sl1.dx=0;
- sl1.speed=parseInt(Math.random(1)*60+1)
- }
- sl1.timeHandle=setTimeout("sfMv1()",sl1.speed);
- }
- function sfMv2(){
- sl2.style.pixelTop+=sl2.mvStep;
- if ((sl2.dx++)>20) {
- sl2.mvStep=-sl2.mvStep;
- sl2.dx=0;
- sl2.speed=parseInt(Math.random(1)*60+1)
- }
- sl2.timeHandle=setTimeout("sfMv2()",sl2.speed);
- }
- function sfMv3(){
- sl3.style.pixelTop+=sl3.mvStep;
- if ((sl3.dx++)>20) {
- sl3.mvStep=-sl3.mvStep;
- sl3.dx=0;
- sl3.speed=parseInt(Math.random(1)*60+1)
- }
- sl3.timeHandle=setTimeout("sfMv3()",sl3.speed);
- }
- function sfMv4(){
- sl4.style.pixelTop+=sl4.mvStep;
- if ((sl4.dx++)>20) {
- sl4.mvStep=-sl4.mvStep;
- sl4.dx=0;
- sl4.speed=parseInt(Math.random(1)*60+1)
- }
- sl4.timeHandle=setTimeout("sfMv4()",sl4.speed);
- }
- function stopAllMv(){
- clearTimeout(sl1.timeHandle);
- clearTimeout(sl2.timeHandle);
- clearTimeout(sl3.timeHandle);
- clearTimeout(sl4.timeHandle);
- }
- function startAllMv(){
- clearTimeout(light.timeHandle);
- darkMv();
- sfMv1();
- sfMv2();
- sfMv3();
- sfMv4();
- }
- function showM1(){
- if(!subMenuShowing){
- stopAllMv();
- light.style.pixelTop=sl1.style.pixelTop-30;
- clearTimeout(light.timeHandle);
- clearTimeout(menu1.timeHandle);
- lightMv();
- showMenu(1);
- }
- }
- function showM2(){
- if(!subMenuShowing){
- stopAllMv();
- light.style.pixelTop=sl2.style.pixelTop-30;
- clearTimeout(light.timeHandle);
- clearTimeout(menu2.timeHandle);
- lightMv();
- showMenu(2);
- }
- }
- function showM3(){
- if(!subMenuShowing){
- stopAllMv();
- light.style.pixelTop=sl3.style.pixelTop-30;
- clearTimeout(light.timeHandle);
- clearTimeout(menu3.timeHandle);
- lightMv();
- showMenu(3);
- }
- }
- function showM4(){
- if(!subMenuShowing){
- stopAllMv();
- light.style.pixelTop=sl4.style.pixelTop-30;
- clearTimeout(light.timeHandle);
- clearTimeout(menu4.timeHandle);
- lightMv();
- showMenu(4);
- }
- }
- function hideM1(){
- if (!subMenuShowing){
- startAllMv();
- clearTimeout(menu1.timeHandle);
- hideMenu(1);
- }
- }
- function hideM2(){
- if (!subMenuShowing){
- startAllMv();
- clearTimeout(menu2.timeHandle);
- hideMenu(2);
- }
- }
- function hideM3(){
- if (!subMenuShowing){
- startAllMv();
- clearTimeout(menu3.timeHandle);
- hideMenu(3);
- }
- }
- function hideM4(){
- if (!subMenuShowing){
- startAllMv();
- clearTimeout(menu4.timeHandle);
- hideMenu(4);
- }
- }
- function init(){
- sl1.mvStep=1;
- sl1.dx=0;
- sl1.speed=50;
- sl2.mvStep=1;
- sl2.dx=0;
- sl2.speed=1;
- sl3.mvStep=1;
- sl3.dx=0;
- sl3.speed=10;
- sl4.mvStep=1;
- sl4.dx=0;
- sl4.speed=20;
- startAllMv();
- }
- </script>
- <meta content="Microsoft FrontPage 6.0" name=GENERATOR></head>
- <body text=#cccccc bgcolor=#000000 leftmargin=0 topmargin=0 onload=init() marginheight="0" marginwidth="0"><div>
- <div onmouseover=showM1()
- onmouseout=hideM1()><img height=24 src="http://img.phperz.com/data/img/20170322_15/1490194312_2768.gif" width=24 data-src=""></div>
- <div onmouseover=showM2()
- onclick=subMenu1() onmouseout=hideM2()><img height=24
- src="http://img.phperz.com/data/img/20170322_2/1490194313_2605.gif" width=24 data-src=""></div>
- <div onmouseover=showM3()
- onmouseout=hideM3()><img height=24 src="http://img.phperz.com/data/img/20170322_14/1490194314_9955.gif" width=24 data-src=""></div>
- <div onmouseover=showM4()
- onmouseout=hideM4()><img height=24 src="http://img.phperz.com/data/img/20170322_12/1490194315_9836.gif" width=24 data-src=""></div>
- <div></div></div>
- <div>
- <div><img
- height=62 src="http://img.phperz.com/data/img/20170322_19/1490194316_2738.gif" width=24 data-src=""></div>
- <div><img
- height=77 src="http://img.phperz.com/data/img/20170322_8/1490194317_8313.gif" width=24 data-src=""></div>
- <div><img
- height=77 src="http://img.phperz.com/data/img/20170322_18/1490194318_7940.gif" width=24 data-src=""></div>
- <div><img
- height=77 src="http://img.phperz.com/data/img/20170322_12/1490194319_4229.gif" width=24 data-src=""></div></div>
- <div>
- <div>
- <table class=submenu height="100%" cellspacing=2 cellpadding=0 width="100%"
- border=0>
- <tbody>
- <tr>
- <td bgcolor=#666699> </td></tr>
- <tr>
- <td bgcolor=#666699> </td></tr>
- <tr>
- <td bgcolor=#666699> </td></tr>
- <tr>
- <td bgcolor=#666699 height=147> </td></tr>
- <tr>
- <td onmouseover="this.bgColor='#9999cc'" onmouseout="this.bgColor='#666699'"
- bgcolor=#666699 height=10>
- <div onclick=subClose1() align=center><b>B</b></div></td></tr></tbody></table></div></div><center>
- </center>
- </body>
- </html>
来源: http://www.phperz.com/article/17/0707/289311.html