图片特效代码.doc

超酷超绚精美图片展示效果代码(一)超酷超绚精美图片展示效果代码(一) - 网页特效观止-网页特效代码|JsCode.CN|html overflow: 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;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 (oi.className = className) ret.push(oi);if (ret.length = 1) ret = ret0;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= + (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 = imgi; i+) this.diaposi = 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 0)this.parent.calc(-1);/* / = ImageFlow prototype = / */ImageFtotype = /* = targets = */calc : function (inc) if (inc) this.view += inc;var tw = 0;var lw = 0;var o = this.diaposthis.view;if (o & o.loaded) /* - reset - */var ob = this.diaposthis.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.diaposi; 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.diaposi; 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 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.diaposi.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 = / */Dtotype = /* = 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 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 (plete & 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 (instancesi.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-) instancesi.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-) instancesi.oc.onmousemove = null;return false;);/* - set interval loop - */setInterval(function () var i = instances.length;while (i-) instancesi.run();, 16);/* - window onload event - */addEvent(window, load, function () load(); );();/* = create imageFlow = */ div ID , size, zoom, borderimf.create(imageFlow, 0.15, 1.5, 10);My identity lies in not knowing who I am.are made by not following instructions.can come between usHere you come!They dont know all the facts yetEmotional intimacy.remains to be done before we can announce our total failure to make any progressErrare Programma EstTheres no such thingI抦 now trapped, without hope of escape or rescueThe World is flat1 l0v3 j00 - f0r3v3r111 111 111 x 111 111 111 = 12345678987654321.has not been written yet LoadingPlease wait. 超酷超绚精美图片展示效果代码(二)超酷超绚精美图片展示效果代码(二) - 网页特效观止-网页特效代码|JsCode.CN|html overflow: hidden;body background: #222;width: 100%;height: 100%;cursor: crosshair;.spanSlide position: absolute;background: #000;font-size: 1px;overflow: hidden;.imgSlide position: absolute;left: 5%;top: 5%;width: 90%;height: 90%;overflow: hidden;.txtSlide position: absolute;top: 5%;left: 50px;width:100%;color:#FFF;font-family: arial, helvetica, verdana, sans-serif;font-weight: bold;font-size:96px;letter-spacing:12px;filter: alpha(opacity=70);-moz-opacity:0.7;opacity:0.7;var ym=0;var ny=0;createElement = function(container, type, param)o=document.createElement(typ