javascript 带滚动条的图片查看特效(超酷)3

注：接<javascript 带滚动条的图片查看特效(超酷)2>
/* //////////// ==== ImageFlow prototype ==== //////////// */
        ImageFlow.prototype = {
                /* ==== targets ==== */
                calc : function (inc) {
                        if (inc) this.view += inc;
                        var tw = 0;
                        var lw = 0;
                        var o = this.diapos[this.view];
                        if (o && o.loaded) {
                                /* ---- reset ---- */
                                var ob = this.diapos[this.back];
                                if (ob && ob != o) {
                                        ob.img.className = 'diapo';
                                        ob.z1 = 1;
                                }
                                /* ---- update legend ---- */
                                this.title.replaceChild(document.createTextNode(o.title), this.title.firstChild);
                                this.legend.replaceChild(document.createTextNode(o.text), this.legend.firstChild);
                                /* ---- 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++) {
                                        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--) {
                                        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.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.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.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.oc.onmousemove = null;
                                                        }
                                                        return false;
                                                });
                                                /* ---- set interval loop ---- */
                                                setInterval(function () {
                                                        var i = instances.length;
                                                        while (i--) instances.run();
                                                }, 16);
                                        }
                                }
                        }
                        /* ---- window onload event ---- */
                        addEvent(window, 'load', function () { load(); });
                }
        }
}();

/* ==== create imageFlow ==== */
//          div ID    , size, zoom, border
imf.create("imageFlow", 0.20, 1.5, 10);

</script>
</head>

<body>
        <div id="imageFlow">
                <div class="top"></div>
                <div class="bank">
                        <a rel="ct37.jpg" title="Myselves" href="http://www.baidu.com/">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>

javascript 带滚动条的图片查看特效(超酷)1
http://www.iscripts.org/forum.php?mod=viewthread&tid=321

javascript 带滚动条的图片查看特效(超酷)2
http://www.iscripts.org/forum.php?mod=viewthread&tid=322