这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
类似 FLASH 一样漂亮
图片展示效果,鼠标经过变大图,支持 FF
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
- <html>
- <head>
- <title>
- 5
- </title>
- <meta http-equiv=Content-Type content="text/html; charset=gb2312">
- <meta http-equiv=imagetoolbar content=no>
- <style type=text/css>
- HTML { OVERFLOW: hidden } BODY { PADDING-RIGHT: 0px; PADDING-LEFT: 0px;
- BACKGROUND: #000; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 815px; CURSOR:
- crosshair; PADDING-TOP: 0px; POSITION: absolute; HEIGHT: 230px } #box {
- BORDER-RIGHT: gray 1px solid; BORDER-TOP: gray 1px solid; BACKGROUND: #111;
- VISIBILITY: hidden; BORDER-LEFT: gray 1px solid; BORDER-BOTTOM: gray 1px
- solid; POSITION: absolute } #screen { BORDER-RIGHT: gray 1px solid; BORDER-TOP:
- gray 1px solid; BACKGROUND: #000; LEFT: 0px; BORDER-LEFT: gray 1px solid;
- WIDTH: 815px; BORDER-BOTTOM: gray 1px solid; POSITION: absolute; HEIGHT:
- 230px } #box IMG { BORDER-RIGHT: gray 1px solid; BORDER-TOP: gray 1px solid;
- BORDER-LEFT: gray 1px solid; CURSOR: pointer; BORDER-BOTTOM: gray 1px solid;
- POSITION: absolute } #box SPAN { FONT-WEIGHT: bold; FONT-SIZE: 12px; WIDTH:
- 200px; COLOR: #fff; FONT-FAMILY: verdana; POSITION: absolute } #box A {
- FONT-SIZE: 12px; COLOR: #ff8000; TEXT-DECORATION: none } #box A:hover {
- BACKGROUND: #ff8000; COLOR: #ffffff; TEXT-DECORATION: none } #box A:visited
- { COLOR: #ff8000; TEXT-DECORATION: none } #box A:hover:visited { BACKGROUND:
- #ff8000; COLOR: #ffffff; TEXT-DECORATION: none } #lnk { VISIBILITY: hidden
- }
- </style>
- <script type=text/javascript>
- document.onselectstart = new Function("return false");
- O = new Array();
- box = 0;
- img = 0;
- txt = 0;
- tit = 0;
- W = 0;
- H = 0;
- nI = 0;
- sel = 0;
- si = 0;
- ZOOM = 0;
- rImg = 0;
- //////////////////
- speed = .06; // animation speed
- delay = .5; // 1 = no delay
- //////////////////
- function dText() {
- txt.style.textAlign = tit.style.textAlign = (sel < nI / 2) ? "left": "right";
- txt.innerHTML = O[sel].tx;
- tit.innerHTML = O[sel].ti;
- }
- function CObj(n, s, x, tx, ti) {
- this.n = n;
- this.dim = s;
- this.tx = tx;
- this.ti = ti;
- this.is = img[n];
- this.vz = 0;
- this.sx = 0;
- this.x0 = x;
- this.x1 = 0;
- this.zo = 0;
- this.over = function() {
- with(this) {
- if (n != sel) {
- O[sel].dim = 250;
- O[n].dim = ZOOM * 100;
- sel = n;
- l = 0;
- for (k = 0; k < nI; k++) {
- O[k].x0 = l;
- l += O[k].dim;
- }
- txt.innerHTML = tit.innerHTML = "";
- setTimeout("dText()", 32);
- }
- }
- }
- this.anim = function() {
- with(this) {
- vz = speed * (vz + (x1 - sx) * delay);
- x1 -= vz;
- sx = (n == 0) ? 0 : O[n - 1].x0 + O[n - 1].dim;
- zo -= (zo - dim) * speed;
- l = (x1 * si) + 6 * (n + 1);
- w = zo * si;
- is.style.left = Math.round(l) + 'px';
- is.style.top = Math.round((H - w * rImg) * .5) + 'px';
- is.style.width = Math.round(w) + 'px';
- is.style.height = Math.round(w * rImg) + 'px';
- if (sel == n) {
- if (sel < nI * .5) {
- tit.style.left = txt.style.left = Math.round(l + w + 6) + 'px';
- } else {
- tit.style.left = txt.style.left = Math.round(l - (nx * .25) - 6) + 'px';
- }
- txt.style.top = Math.round( - (w * rImg) * .25) + 'px';
- tit.style.top = Math.round((w * rImg) * .33) + 'px';
- }
- }
- }
- }
- function run() {
- for (j in O) O[j].anim();
- setTimeout("run()", 16);
- }
- function doResize() {
- tit.style.width = Math.round(nx * .25) + 'px';
- txt.style.width = Math.round(nx * .25) + 'px';
- tit.style.fontSize = (nx / 30) + 'px';
- txt.style.fontSize = (nx / 70) + 'px';
- with(box.style) {
- width = Math.round(W) + 'px';
- height = Math.round(H) + 'px';
- left = Math.round(nx / 2 - W / 2) + 'px';
- top = Math.round(ny / 2 - H / 2) + 'px';
- }
- }
- function resize() {
- nx = scr.offsetWidth;
- ny = scr.offsetHeight;
- W = nx * 90 / 100;
- si = (W - ((nI + 1) * 6)) / ((ZOOM * 180) + ((nI - 1) * 180));
- H = (100 * si * rImg) + 14;
- doResize();
- }
- onresize = resize;
- onload = function() {
- scr = document.getElementById("screen");
- box = document.getElementById("box");
- tit = document.getElementById("tit");
- txt = document.getElementById("txt");
- img = box.getElementsByTagName("img");
- Lnk = document.getElementById("lnk").getElementsByTagName("a");
- nI = img.length;
- ZOOM = nI;
- rImg = img[0].height / img[0].width;
- resize();
- s = ZOOM * 100;
- x = 0;
- tit.innerHTML = img[0].title;
- txt.innerHTML = img[0].alt;
- for (i = 0; i < nI; i++) {
- var t = img[i].alt;
- if (Lnk[i].href != "") t += '<br><a href="' + Lnk[i].href + '">' + Lnk[i].innerHTML + '</a>';
- O[i] = new CObj(i, s, x, t, img[i].title);
- img[i].alt = "";
- img[i].title = "";
- img[i].onmousedown = new Function("return false;");
- img[i].onmouseover = new Function('O[' + i + '].over();');
- if (Lnk[i].href != "") {
- /* ==== hyperlink ==== */
- img[i].onclick = new Function('window.open("' + Lnk[i].href + '","_blank");');
- }
- x += s;
- s = 250;
- }
- box.style.visibility = "visible";
- run();
- }
- </script>
- <meta content="MSHTML 6.00.6000.20815" name=GENERATOR>
- </head>
- <body>
- <div>
- <div>
- <img class="img-responsive" src="http://img.phperz.com/data/img/20170322_18/1490192622_7248.gif"
- data-src="">
- <img src="http://img.phperz.com/data/img/20170322_2/1490192624_3627.gif"
- data-src="">
- <img class="img-responsive" src="http://img.phperz.com/data/img/20170322_1/1490192625_9360.gif"
- data-src="">
- <img class="img-responsive" src="http://img.phperz.com/data/img/20170322_18/1490192626_9840.gif"
- data-src="">
- <img src="http://img.phperz.com/data/img/20170322_20/1490192627_2779.gif"
- data-src="">
- <img class="img-responsive" src="http://img.phperz.com/data/img/20170322_10/1490192628_8081.gif"
- data-src="">
- <a href="/article/14/0614/39.html">
- </a>
- <a href="/article/14/0614/39.html">
- </a>
- <a href="/article/14/0614/39.html">
- </a>
- <a href="/article/14/0614/39.html">
- </a>
- <a href="/article/14/0614/39.html">
- </a>
- <a href="/article/14/0614/39.html">
- </a>
- </div>
- </div>
- <!-- crossbrowser images_loading_bar - Gerard Ferrandez - www.dhteumeuleu.com
- - Feb 2005 -->
- Loading...
- <script>
- m00 = document.getElementById("box").getElementsByTagName("img");
- m01 = m00.length;
- function images_loading_bar() {
- m02 = 0;
- for (i = 0; i < m01; i++) m02 += (m00[i].complete) ? 1 : 0;
- document.getElementById("LB1").style.width = Math.round(m02 / m01 * 100) + 'px';
- if (m02 == m01) setTimeout("document.getElementById('LB0').style.display='none'", 128);
- else setTimeout("images_loading_bar()", 64);
- };
- images_loading_bar();
- </script>
- <!-- end of images_loading_bar code -->
- </body>
- </html>
来源: http://www.phperz.com/article/17/0724/286765.html