В этой статье описывается реализация JS горизонтальной строки изображений с функцией отображения Zoom Reflection. Поделитесь этим для вашей ссылки, следующим образом:
<! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" Содержание = "Text/html; charset = utf-8"/> <название> Изображение изображение, показывающее отражения в центре и Zoom и отображение http-equiv = "ImageToolbar" content = "no" /> <style type = "text /css"> html {overflow: hidden;} body {margin: 0px; накладка: 0px; фон: #000; ширина: 100%; высота: 100%;} #imageflow {position: absolute: width: 100%; 10%. hidden;} #Imageflow .top {Положение: Absolute; ширина: 100%; высота: 2%; фон: #003366;} #Imageflow .Text {Положение: Абсолют; слева: 0px; ширина: 100%; внизу: -12px; текстовый альбом: Центр; #fff; font-famil 1000;}#Imageflow .title {font-size: 0.9em; font-weight: bold;}#imageflow .legend {font-size: 0.8em;}#Imageflow .scrollbar {позиция: абсолют; слева: 10%; внизу: 10%; ширина: 80%; Абсолют; слева: 0,5%; Ширина: 98%; Высота: 16px; Фильтр: Альфа (непрозрачность = 30); непрозрачность: 0,3;}#Изображение. 25px;} </style> <script type = "text/javascript"> var imf = function () {var lf = 0; var antemances = []; function getelementsbyclass (объект, тег, classname) {var o = object.getElementsbytagname (Tag); для (var i = 0, n = o.length, ret = []; (o [i] .classname == classname) ret.push (o [i]); if (ret.length == 1) ret = ret [0]; return ret;} функция addEvent (o, e, f) {if (window.AddeventLister) o.AddeventListener (e, f, false. in window. f);} function createreflexion (продолжение, img) {var flx = false; if (document.createElement ("canvas"). getContext) {flx = document.createElement ("canvas"); flx.width = img.width; flx.height = img.height; varx. img.height); context.scale (1, -1); контекст. 255, 0) "); gradient.addcolorStop (0," rgba (255, 255, 255, 1) "); context.fillstyle = gradient; context.fillrect (0, 0, img.width, img.height * 2);} els document.createElement('img');flx.src = img.src;flx.style.filter = 'flipv progid:DXImageTransform.Microsoft.Alpha(' +'opacity=50, style=1, finishOpacity=0, startx=0, finishx=0, finishy=' +(img.height *.25) + ')';}/* --- Вставьте рефлексию --- */flx.style.position = 'absolute'; flx.style.left = '-1000px'; cont.appendchild (flx); вернуть flx;} function imageflow (ocont, size, Zoom, border) {this.diapos = []; this.scr = false; это. 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 ', teal'); this.title = getElementsbyclass (this.text 'thite'); getElementsbyclass (this.text, 'div', 'legend'); this.bar = getelementsbyclass (this.oc, 'img', 'bar'); this.arl = getelementsbyclass (this.oc, 'img', 'rhrow-left'); this.arr = getelementsbyclass (this.oc, 'img', 'rurow-left'); getElementsbyclass (this.oc, 'img', 'rugh -ruight'); this.bw = this.bar.width; this.alw = this.arl.width - 5; this.arw = this.arm.width - 5; this.bar.parent = this.oc.parent = this; -1; this.Resize (); this.oc.OnselectStart = function () {return false; }/ * --- Создание изображений --- */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 (I, I, O. + i + ' -', O.InnerHtml || O.Rel, O.Href || {this.parent.scroll (-e.detail);}, false); else this.oc.onmousewheel = function () {this.parent.scroll (event.wheeldelta);}/ * ==== Прокрутка n drag n drop === */this.bar.onmouseDant = function (e) a (! this.offsetleft; var self = this.parent;/ * --- Перемещение 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 (ws.sm.scer) '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 (); вернуть ложь; {self.oc.onmousemove = null; return false;} вернуть false;}/ * ==== Стрелка справа === */this.arr.onclick = this.arr.ondblclick = function () {if (this.parent.view <this.parent.nf - 1) this.parent.calc (1); = this.arl.ondblclick = function () {if (this.parent.view> 0) this.parent.calc (-1);}} imageflow.prototype = {/ * ==== targets === */calc: function (inc) {if (inc) this.view += var tw = 0; var lw = 0; (O && O.Loaded) {/ * --- Сброс --- */var ob = this.diapos [this.back]; if (ob && ob! this.title.firstchild); this.legend.replacechild (document.createtextnode (o.text), this.legend.firstchild);/ * --- Обновление гиперссылки --- */if (o.url) {o.img.classname = 'diapo link'; window.status = 'hiperlink:' + o.U. {o.img.classname = 'diapo'; window.status = '';}/ * --- Вычислить размеры целей и положения --- */o.w1 = math.min (o.iw, this.wh * .5) * o.z1; var x0 = o.x1 = (this.wh *. this.bdw; for (var i = this.view +1, o; o = this.diapos [i]; i ++) {if (o.loaded) {o.x1 = x; o.w1 = (this.ht / or) * this.size; x += o.w1 +this.bdw; tw += o.w1 +this.bdw; (var i = this.view -1, o; o = this.diapos [i]; i--) {if (o.loaded) {o.w1 = (this.ht / or) * this.size; o.x1 = x -o.w1; x -= o.w1 + this.bdw; tw + = o.w1 + this.bdw; lw + = o. this.bdw;}}/ * --- Перемещать 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';}/ * this.view;}},/ * ==== Прокрутка прокрутки мышиного колеса === */scroll: function (sc) {if (sc <0) {if (this.view <this.nf - 1) this.calc (1);} else {if (this.view> this.calc (-1); {this.wh = this.oc.clientwidth; this.ht = this.oc.clientHeight; this.ws = this.scrollbar.offsetwidth; this.calc (); this.run (true);},/ * === Move все образы ====/run: function (res) {var i = this.nf; this.diapos [i] .move (res);}} diapo = function (parent, n, src, title, text, url, target) {this.parent = parent; this.loaded = false; this.title = title; this.text = text.url = url; this.Target = target; 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; this.img.onclick = function () {this.parent.click (); } this.parent.oc.appendchild (this.img);/ * --- отображать внешнюю ссылку --- */if (url) {this.img.onmouseover = function () {this.classname = 'diapo link'; } this.img.onmouseout = function () {this.classname = 'diapo'; }}} 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 sw). --- */this.x0 += sx * .1; this.w0 += sw * .1; if (this.x0 <this.parent.wh && this.x0 +this.w0> 0) {/ * --- только видимые изображения --- */this.visible = true; var o = this.img.style; var h = this.w. 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';/ * --- Рефлексия ---- */if (this.flx) {h) + '; 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'; --- */if (this.visible) {this.visible = false; this.img.style.width = '0px'; if (this.flx) this.flx.style.width = '0px';}}} else {/ * ==== onload == */if (this.img.com Изображение --- */this.iw = this.img.width; this.ih = this.img.height; this.r = this.ih/this.iw; this.loaded = true;/ *--- Создать рефлексию --- */this.flx = createreflexion (this.parent.oc, this.img); если (это. this.n; this.parent.calc ();}}},/ * ==== diapo onclick ==== */click: function () {if (this.parent.view == this.n) {/ * --- Нажмите на Zoomed DiApo --- */if (this.url) {/ * --- open Hyperlink- this.target);} else {/ * --- Zoom in/out --- */this.z1 = this.z1 == 1? this.parent.zoom: 1; this.parent.calc ();}} else {/* --- Выберите Diapo ---*/this.parent.view = this.n; this.parent.calc ();} вернуть false;}} return {/* ==== Script ===*/Create: function (div, size, size, zoom, zoom) {/* =--- */var load = function () {var loged = false; var i = экземпляры. {imf.initialize = true;/ * --- Событие изменения размера окна --- */addevent (window, 'resize', function () {var i = экземпляры. window.event; var tg = e.relatedtarget || e.toelement; if (tg && tg.tagname == 'html') {var i = экземпляры. экземпляры. 10); </script> </head> <body> <div id = "Imageflow"> <div> </div> <div> <a rel = "Images/1.jpg" href = "#" _fcksAvedurl = "#"> Indupry Design Reproduction </a> <a rel = "Images/2.jpg" href = "#" _fcksaved </a> <a rel = "2.jpg" href = "#" _fcksaveduction </a> <a rel = ". рендеринг </a> <a rel = "Images/3.jpg" href = "#" _fcksavedurl = "#"> render 3d 3D -дизайн </a> <a rel = "Images/4.jpg" href = "#" _fcksavedurl = "#"> indoR Design Rendering </a> <a relse/j. gripge "#". _fckSavedUrl = "#"> rendering 3D -дизайна в помещении </a> <a rel = "Images/6.jpg" href = "#" _fcksavedurl = "#"> rendering 3D -дизайна в помещении </a> rel="images/2.jpg" href="#" _fcksavedurl="#">Indoor 3D design rendering</a><a rel="images/3.jpg" href="#" _fcksavedurl="#">Indoor 3D design rendering</a><a rel="images/4.jpg" href="#" _fckSavedUrl = "#"> rendering 3D -дизайна в помещении </a> <a rel = "Images/5.jpg" href = "#" _fcksavedurl = "#"> rendering 3d 3D -дизайнер rel = "Images/2.jpg" href = "#" _fcksavedurl = "#"> render 3D в помещении </a> </div> <div> <div> Загрузка </div> <div> Пожалуйста, подождите ... </div> </div> <div> <img src = "" _fcksavedurl = ""> <img src = "L. _fckSavedUrl = "Images/l.jpg"> <img src = "Images/r.jpg" _fcksavedurl = "Images/r.jpg"> <img src = "Images/s.png" _fcksavedurl = "Images/s.png"> </div> </div> </html> </html> </html> </html> </html> </html> </html> </html> </html> </html> </html> </html>For more information about JavaScript related content, please check out the topics of this site: "Summary of JavaScript switching effects and techniques", "Summary of JavaScript search algorithm skills", "Summary of JavaScript animation effects and techniques", "Summary of JavaScript errors and debugging techniques", "Summary of JavaScript data structures and algorithm skills", "Summary of Алгоритмы и методы обхода JavaScript »и« Сводка использования математических операций JavaScript ».
Я надеюсь, что эта статья будет полезна для каждого программирования JavaScript.