javascript 特效之代码解释

Question

/* ---- update hyperlink ---- */
if (o.url) {
o.img.className = 'diapo link';
window.status = 'hyperlink: ' + o.url;
} else {
o.img.className = 'diapo';
window.status = '';
}
/* ---- calculate target sizes & positions ---- */
o.w1 = Math.min(o.iw, this.wh * .5) * o.z1;
var x0 = o.x1 = (this.wh * .5) - (o.w1 * .5);
var x = x0 + o.w1 + this.bdw;
for (var i = this.view + 1, o; o = this.diapos[i]; i++) {
if (o.loaded) {
o.x1 = x;
o.w1 = (this.ht / o.r) * this.size;
x   += o.w1 + this.bdw;
tw  += o.w1 + this.bdw;
}
}
x = x0 - this.bdw;
for (var i = this.view - 1, o; o = this.diapos[i]; i--) {
if (o.loaded) {
o.w1 = (this.ht / o.r) * this.size;
o.x1 = x - o.w1;
x   -= o.w1 + this.bdw;
tw  += o.w1 + this.bdw;
lw  += o.w1 + this.bdw;
}
}
/* ---- move scrollbar ---- */
if (!this.scr && tw) {
var r = (this.ws - this.alw - this.arw - this.bw) / tw;
this.bar.style.left = Math.round(this.alw + lw * r) + 'px';
}
/* ---- save preview view ---- */
this.back = this.view;
}
},
/* ==== mousewheel scrolling ==== */
scroll : function (sc) {
if (sc < 0) {
if (this.view < this.NF - 1) this.calc(1);
} else {
if (this.view > 0) this.calc(-1);
}
},
/* ==== resize  ==== */
resize : function () {
this.wh = this.oc.clientWidth;
this.ht = this.oc.clientHeight;
this.ws = this.scrollbar.offsetWidth;
this.calc();
this.run(true);
},
/* ==== move all images  ==== */
run : function (res) {
var i = this.NF;
while (i--) this.diapos[i].move(res);
}
}
/* //////////// ==== Diapo Constructor ==== //////////// */
Diapo = function (parent, N, src, title, text, url, target) {
this.parent        = parent;
this.loaded        = false;
this.title         = title;
this.text          = text;
this.url           = url;
this.target        = target;
this.N             = N;
this.img           = document.createElement('img');
this.img.src       = src;
this.img.parent    = this;
this.img.className = 'diapo';
this.x0            = this.parent.oc.clientWidth;
this.x1            = this.x0;
this.w0            = 0;
this.w1            = 0;
this.z1            = 1;
this.img.parent    = this;
this.img.onclick   = function() { this.parent.click(); }
this.parent.oc.appendChild(this.img);
/* ---- display external link ---- */
if (url) {
this.img.onmouseover = function () { this.className = 'diapo link'; }
this.img.onmouseout  = function () { this.className = 'diapo'; }
}
}
/* //////////// ==== Diapo prototype ==== //////////// */
Diapo.prototype = {
/* ==== HTML rendering ==== */
move : function (res) {
if (this.loaded) {
var sx = this.x1 - this.x0;
var sw = this.w1 - this.w0;
if (Math.abs(sx) > 2 || Math.abs(sw) > 2 || res) {
/* ---- paint only when moving ---- */
this.x0 += sx * .1;
this.w0 += sw * .1;
if (this.x0 < this.parent.wh && this.x0 + this.w0 > 0) {
/* ---- paint only visible images ---- */
this.visible = true;
var o = this.img.style;
var h = this.w0 * this.r;
/* ---- diapo ---- */
o.left   = Math.round(this.x0) + 'px';
o.bottom = Math.floor(this.parent.ht * .25) + 'px';
o.width  = Math.round(this.w0) + 'px';
o.height = Math.round(h) + 'px';
/* ---- reflexion ---- */
if (this.flx) {
var o = this.flx.style;
o.left   = Math.round(this.x0) + 'px';
o.top    = Math.ceil(this.parent.ht * .75 + 1) + 'px';
o.width  = Math.round(this.w0) + 'px';
o.height = Math.round(h) + 'px';
}
} else {
/* ---- disable invisible images ---- */
if (this.visible) {
this.visible = false;
this.img.style.width = '0px';
if (this.flx) this.flx.style.width = '0px';
}
}
}
} else {
/* ==== image onload ==== */
if (this.img.complete && this.img.width) {
/* ---- get size image ---- */
this.iw     = this.img.width;
this.ih     = this.img.height;
this.r      = this.ih / this.iw;
this.loaded = true;
/* ---- create reflexion ---- */
this.flx    = createReflexion(this.parent.oc, this.img);
if (this.parent.view < 0) this.parent.view = this.N;
this.parent.calc();
}
}
},
/* ==== diapo onclick ==== */
click : function () {
if (this.parent.view == this.N) {
/* ---- click on zoomed diapo ---- */
if (this.url) {
/* ---- open hyperlink ---- */
window.open(this.url, this.target);
} else {
/* ---- zoom in/out ---- */
this.z1 = this.z1 == 1 ? this.parent.zoom : 1;
this.parent.calc();
}
} else {
/* ---- select diapo ---- */
this.parent.view = this.N;
this.parent.calc();
}
return false;
}
}
/* //////////// ==== public methods ==== //////////// */
return {
/* ==== initialize script ==== */
create : function (div, size, zoom, border) {
/* ---- instanciate imageFlow ---- */
var load = function () {
var loaded = false;
var i = instances.length;
while (i--) if (instances[i].oCont == div) loaded = true;
if (!loaded) {
/* ---- push new imageFlow instance ---- */
instances.push(
new ImageFlow(div, size, zoom, border)
);
/* ---- init script (once) ---- */
if (!imf.initialized) {
imf.initialized = true;
/* ---- window resize event ---- */
addEvent(window, 'resize', function () {
var i = instances.length;
while (i--) instances[i].resize();
});
/* ---- stop drag N drop ---- */
addEvent(document.getElementById(div), 'mouseout', function (e) {
if (!e) e = window.event;
var tg = e.relatedTarget || e.toElement;
if (tg && tg.tagName == 'HTML') {
var i = instances.length;
while (i--) instances[i].oc.onmousemove = null;
}
return false;
});
/* ---- set interval loop ---- */
setInterval(function () {
var i = instances.length;
while (i--) instances[i].run();
}, 16);
}
}
}
/* ---- window onload event ---- */
addEvent(window, 'load', function () { load(); });
}
}
}();/* ==== create imageFlow ==== */
//          div ID    , size, zoom, border
imf.create("imageFlow", 0.15, 1.5, 10);</script>
</head>

Answer 1

<body>
<div id="imageFlow">
<div class="top"></div>
<div class="bank">
<a rel="ct37.jpg" title="Myselves" href="http://www.design-studio.cn/">My identity lies in not knowing who I am</a>
<a rel="ct60.jpg" title="Discoveries" href="http://www.design-studio.cn/">...are made by not following instructions</a>
<a rel="sf53.jpg" title="Nothing" href="http://www.design-studio.cn/">...can come between us</a>
<a rel="sf48.jpg" title="New life" href="http://www.design-studio.cn/">Here you come!</a>
<a rel="ct81.jpg" title="Optimists" href="http://www.design-studio.cn/">They don't know all the facts yet</a>
<a rel="ct134.jpg" title="Empathy" href="http://www.design-studio.cn/">Emotional intimacy</a>
<a rel="ct41.jpg" title="Much work" href="http://www.design-studio.cn/">...remains to be done before we can announce our total failure to make any progress</a>
<a rel="ct75.jpg" title="System error" href="http://www.design-studio.cn/">Errare Programma Est</a>
<a rel="bl201.jpg" title="Nonexistance" href="http://www.design-studio.cn/">There's no such thing</a>
<a rel="ct137.jpg" title="Inside" href="http://www.design-studio.cn/">I抦 now trapped, without hope of escape or rescue</a>
<a rel="ct65.jpg" title="E-Slaves" href="http://www.design-studio.cn/">The World is flat</a>
<a rel="or105.jpg" title="l0v3" href="http://www.design-studio.cn/">1 l0v3 j00 - f0r3v3r</a>
<a rel="ct139.jpg" title="T minus zero" href="http://www.design-studio.cn/">111 111 111 x 111 111 111 = 12345678987654321</a>
<a rel="ct27.jpg" title="The End" href="http://www.design-studio.cn/">...has not been written yet</a>
</div> <div class="text">
<div class="title">Loading</div>
<div class="legend">Please wait...</div>
</div>
<div class="scrollbar">
<img class="track" src="sb.gif" alt="">
<img class="arrow-left" src="sl.gif" alt="">
<img class="arrow-right" src="sr.gif" alt="">
<img class="bar" src="sc.gif" alt="">
</div>
</div>
</body>
</html>

Answer 2

function ImageFlow(oCont, size, zoom, border) {  //定义一个"类" 当然javascript应该不能叫类 但这样好理解些
...
}    function addEvent (o, e, f) {         //事件绑定
        if (window.addEventListener) o.addEventListener(e, f, false);
        else if (window.attachEvent) r = o.attachEvent('on' + e, f);
    }
Diapo.prototype = {   //里边定义相关的方法}
太多了 好难拷贝

Answer 3

楼主可以补一补类、对象、属性、方法的概念。
虽然jscript不是真正的面向对象，但对理解上面的代码有帮助。

Answer 4

建议你看看电子书
下载一个javascript 6