Tip: You can modify some of the code before running
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01//en" "HTTP://WWW.W3.ORG/TR/HTML4/STRICT.DTD" > <ptml> <pead> & lt;title>1</title> <meta http-equiv= "Imagetoolbar" content= "no" > <style type= "text/css" > HTML {o Verflow:hidden; } body {margin:0px; padding:0px; Background: #000; width:100%; height:100%; } #imageFlow {Position:absolute; width:100%; height:80%; left:0%; top:10%; Background: #000; } #imageFlow. diapo {position:absolute; Left: -1000px; Cursor:pointer; -ms-interpolation-mode:nearest-neighbor; #imageFlow. Link {border:dotted #fff 1px; Margin-left: -1px; Margin-bottom: -1px; #imageFlow. Bank {Visibility:hidden; #imageFlow. Top {position:absolute; width:100%; height:40%; Background: #181818; } #imageFlow. text {position:absolute; left:0px; width:100%; bottom:16%; Text-align:center; Color: #FFF; Font-family:verdana, Arial, Helvetica, sanS-serif; z-index:1000; #imageFlow. title {font-size:0.9em; Font-weight:bold; } #imageFlow. Legend {font-size:0.8em; } #imageFlow. scrollbar {position:absolute; left:10%; bottom:10%; width:80%; height:16px; z-index:1000; } #imageFlow. track {position:absolute; left:1%; width:98%; height:16px; Filter:alpha (opacity=30); opacity:0.3; } #imageFlow. arrow-left {position:absolute; } #imageFlow. arrow-right {position:absolute; right:0px; } #imageFlow. bar {position:absolute; height:16px; left:25px; } </style> <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[i].classname = = className) Ret.push (o[i)); 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 progid:DXImageTransform.Microsoft.Alpha(' + ' opacity=50, style=1, finishopacity=0, startx=0, starty=0, finishx=0, finishy= ' + (IM G.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]; i++) {this.diapos[i] = 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 ', Fu Nction (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);L.onclick = This.arL.ondblclick = function () {if (This.parent.view > 0) This.parent.calc (-1); }/*////////////= = Imageflow Prototype = =/////////////Imageflow.prototype = {/* = = = = = = = = = = = Targets Alc: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]; 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:functionHis.view < this. NF-1) This.calc (1); else {if (This.view > 0) This.calc (-1); },/* = = = = = = = = = = = = = = = Resize = This.oc.clientWidth resize:function () {THIS.WH 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, tar Get) {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 = = * Ve: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 *) + ' 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 *. + 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 {/* = = = = = = = =/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 (); }},/* = = = = = = = = = = = = = = = = = = = Click:function () {if This.parent.view = Diapo. N) {/*----click on zoomed diapo----/if (This.url) {/*----open HYPERLINK----/* window.open (th Is.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 = =////////////= * = = = = = = = Initialize Script = =/Create:fu Nction (Div, size, zoom, border) {/*----instanciate imageflow----* * var load = function () {var loaded = f Alse; 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 ();}); } } }(); </script> </pead> <body> <div id= "Imageflow" > <div class= "Top" ></div> <div cl ass= "bank" > My identity lies in not knowing who I am ... are made by not following instructions ... can come bet Ween us here for you come! They don ' t know all the facts yet emotional intimacy ... remains to being done before we can announce my total failure To-Make any progress errare programma Est There ' No such thing ' <a rel= ' http://preview.zcool.com.cn/code/js/04 /1/ct137.jpg "title=" Inside "href=" http://www.design-studio.cn/">i"
Tip: You can modify some of the code before running
