Scripts 学盟

标题: javascript 带滚动条的图片查看特效(超酷)2 [打印本页]

---

作者: 嘟嘟    时间: 2011-7-13 00:05:38     标题: javascript 带滚动条的图片查看特效(超酷)2

注：接<javascript 带滚动条的图片查看特效(超酷)1>
<script type="text/javascript">

var imf = function () {
        var lf = 0;
        var instances = [];
        function getElementsByClass (object, tag, className) {
                var o = object.getElementsByTagName(tag);
                for ( var i = 0, n = o.length, ret = []; i < n; i++)
                        if (o.className == className) ret.push(o);
                if (ret.length == 1) ret = ret[0];
                return ret;
        }
        function addEvent (o, e, f) {
                if (window.addEventListener) o.addEventListener(e, f, false);
                else if (window.attachEvent) r = o.attachEvent('on' + e, f);
        }
        function createReflexion (cont, img) {
                var flx = false;
                if (document.createElement("canvas").getContext) {
                        flx = document.createElement("canvas");
                        flx.width = img.width;
                        flx.height = img.height;
                        var context = flx.getContext("2d");
                        context.translate(0, img.height);
                        context.scale(1, -1);
                        context.drawImage(img, 0, 0, img.width, img.height);
                        context.globalCompositeOperation = "destination-out";
                        var gradient = context.createLinearGradient(0, 0, 0, img.height * 2);
                        gradient.addColorStop(1, "rgba(255, 255, 255, 0)");
                        gradient.addColorStop(0, "rgba(255, 255, 255, 1)");
                        context.fillStyle = gradient;
                        context.fillRect(0, 0, img.width, img.height * 2);
                } else {
                        /* ---- DXImageTransform ---- */
                        flx     = document.createElement('img');
                        flx.src = img.src;
                        flx.style.filter = 'flipv progidXImageTransform.Microsoft.Alpha(' +
                                           'opacity=50, style=1, finishOpacity=0, startx=0, starty=0, finishx=0, finishy=' +
                                                           (img.height * .25) + ')';
                }
                /* ---- insert Reflexion ---- */
                flx.style.position = 'absolute';
                flx.style.left     = '-1000px';
                cont.appendChild(flx);
                return flx;
        }
        /* //////////// ==== ImageFlow Constructor ==== //////////// */
        function ImageFlow(oCont, size, zoom, border) {
                this.diapos     = [];
                this.scr        = false;
                this.size       = size;
                this.zoom       = zoom;
                this.bdw        = border;
                this.oCont      = oCont;
                this.oc         = document.getElementById(oCont);
                this.scrollbar  = getElementsByClass(this.oc,   'div', 'scrollbar');
                this.text       = getElementsByClass(this.oc,   'div', 'text');
                this.title      = getElementsByClass(this.text, 'div', 'title');
                this.legend     = getElementsByClass(this.text, 'div', 'legend');
                this.bar        = getElementsByClass(this.oc,   'img', 'bar');
                this.arL        = getElementsByClass(this.oc,   'img', 'arrow-left');
                this.arR        = getElementsByClass(this.oc,   'img', 'arrow-right');
                this.bw         = this.bar.width;
                this.alw        = this.arL.width - 5;
                this.arw        = this.arR.width - 5;
                this.bar.parent = this.oc.parent  = this;
                this.arL.parent = this.arR.parent = this;
                this.view       = this.back       = -1;
                this.resize();
                this.oc.onselectstart = function () { return false; }
                /* ---- create images ---- */
                var img   = getElementsByClass(this.oc, 'div', 'bank').getElementsByTagName('a');
                this.NF = img.length;
                for (var i = 0, o; o = img; i++) {
                        this.diapos = new Diapo(this, i,
                                                                                o.rel,
                                                                                o.title || '- ' + i + ' -',
                                                                                o.innerHTML || o.rel,
                                                                                o.href || '',
                                                                                o.target || '_self'
                        );
                }
                /* ==== add mouse wheel events ==== */
                if (window.addEventListener)
                        this.oc.addEventListener('DOMMouseScroll', function(e) {
                                this.parent.scroll(-e.detail);
                        }, false);
                else this.oc.onmousewheel = function () {
                        this.parent.scroll(event.wheelDelta);
                }
                /* ==== scrollbar drag N drop ==== */
                this.bar.onmousedown = function (e) {
                        if (!e) e = window.event;
                        var scl = e.screenX - this.offsetLeft;
                        var self = this.parent;
                        /* ---- move bar ---- */
                        this.parent.oc.onmousemove = function (e) {
                                if (!e) e = window.event;
                                self.bar.style.left = Math.round(Math.min((self.ws - self.arw - self.bw), Math.max(self.alw, e.screenX - scl))) + 'px';
                                self.view = Math.round(((e.screenX - scl) ) / (self.ws - self.alw - self.arw - self.bw) * self.NF);
                                if (self.view != self.back) self.calc();
                                return false;
                        }
                        /* ---- release scrollbar ---- */
                        this.parent.oc.onmouseup = function (e) {
                                self.oc.onmousemove = null;
                                return false;
                        }
                        return false;
                }
                /* ==== right arrow ==== */
                this.arR.onclick = this.arR.ondblclick = function () {
                        if (this.parent.view < this.parent.NF - 1)
                                this.parent.calc(1);
                }
                /* ==== Left arrow ==== */
                this.arL.onclick = this.arL.ondblclick = function () {
                        if (this.parent.view > 0)
                                this.parent.calc(-1);
                }
        }

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

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

---

欢迎光临 Scripts 学盟 (http://www.iscripts.org/)

Powered by Discuz! X2