Artikel ini menjelaskan implementasi JS dari baris gambar horizontal dengan fungsi tampilan zoom refleksi. Bagikan untuk referensi Anda, sebagai berikut:
<! Doctype html public "-// w3c // dtd xhtml 1.0 transisi // 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" content = "text/html; charset = UTF-8"/> <title> JS mengimplementasikan gambar yang menunjukkan refleksi ke tengah dan zoom in dan pajangan The Center dan menampilkan The Center dan menampilkan The Center dan menampilkan The Center dan memajang The Center dan memajang The Center dan MetA <title> JS mengimplementasikan gambar ke tengah dan zoom in dan menampilkan The Center dan menampilkan The Center dan menampilkan The Center dan menampilkan The Center dan menampilkan The Center dan The The Meta <title> JS mengimplementasikan gambar Center dan Zoom in dan the Zoom in dan The The The Special http-equiv = "imagetoolbar" content = "no" /> <style type = "text /css"> html {overflow: hidden;} body {margin: 0px; padding: 0px; latar belakang: #000; lebar: 100%; tinggi: 100%;} #imageflow {posisi; 10%; latar belakang:#000;}#imageflow .diapo {position: absolute; kiri: -1000px; kursor: pointer; -ms-interpolasi-mode: terdekat-neighbor;}#imageflow .link {border: -fff 1px; margin-left: -1px; margin-botiber: -fff #fff 1px; margin-left: -1px; margin-botiber: -fff #fff 1px; margin-left: -1px; margin-botiber; tersembunyi;} #imageflow .top {position: absolute; lebar: 100%; tinggi: 2%; latar belakang: #003366;} #imageflow .text {position: absolute; kiri: 0px; lebar: 100%; bawah: -12px; Teks-Align: center; color: ##FFFF; font font; bawah: -12px; teks-align: center; color: ##FFFF; font font; 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; kiri: 0.5%; lebar: 98%; tinggi: 16px; filter: alpha (opacity = 30); opacity: 0.3;}#imageflow .row-left {position: absolute;}#imageflow .row-right {position: position: 0ps; 0px; aMageFlow. absolute; tinggi: 16px; kiri: 25px;} </style> <script type = "text/javaScript"> var imf = function () {var lf = 0; var instance = []; function getElementsbyclass (objek, tag, classname) {var o = Object.getElementsbyTagname (tag); untuk (var i = 0, nor = n n = Object.getElementsbytagname (tag); for (var i = 0, iF = 0, nor = Object.getElementsbyTagname (tag); for (var i = 0, iF = 0, NEBSE.LEGEDEMENTSBYBYSTIBLEME (TAG); untuk (tag); (o [i] .className == className) ret.push (o [i]); if (ret.length == 1) ret = ret [0]; return ret;} addevent fungsi (o, e, f) {if, window.addeventerener) o.addeventener (e, f, false) ife (On window. f);} fungsi createReflexlexion (cont, img) {var flx = false; if (document.createElement ("canvas"). getContext) {flx = document.createElement ("canvas"); flx.width = img.width; flx.height = vARG.height; flx.getContext ("2d"); context.translate (0, img.height); context.scale (1, -1); context.drawimage (img, 0, 0, img.width, img.height); context.greobalcradiegsitePinePeration = "destination -out"; varient. 2); gradient.addcolorstop (1, "rgba (255, 255, 255, 0)"); gradient.addcolorstop (0, "rgba (255, 255, 255, 1); {{emblrecte. Dximagetransform --- */flx = document.createelement ('img'); flx.src = img.src; flx.style.filter = 'flipv progid: dximagetransform.microsoft.alpha (' +'opacity = 50, style = 1, finishransform *.25) + ')';}/ *--- Masukkan refleksi --- */flx.style.position = 'absolute'; flx.style.left = '-1000px'; cont.appendChild (flx); return flx;} function imageflow (ocont, ukuran, zoom, perbatasan) {this. Ukuran; 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, 'scrollbar'); this. 'Div', 'title'); this.legend = getElementsbyclass (this.text, 'div', 'legend'); this.bar = getelementsbyclass (this.oc, 'img', 'bar'); this.arl = getelementsbyclass (this.oc, 'img', 'panah-left'); 'Panah -kiri'); this.arr = getElementsbyclass (this.oc, 'img', 'panah -right'); this.bw = this.bar.width; this.alw = this.arl.width - 5; this.arw = this.arr.width - 5; this.bar.bar.carent = this = ini = this. this; this.view = this.back = -1; this.resize (); this.oc.onselectStart = function () {return false; }/ * --- Buat gambar --- */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] = o = iMg [i]; i ++) {this.diapos [i] = o = iMg [i]; i ++) {this.diapos [i] = o = iMg [i]; i ++) {this.diapos [i] = o. + -', o.innerhtml || {this.parent.scroll (-e.detail);}, false); else this.oc.onmouseWheel = function () {this.parent.scroll (event.wheeldelta);}/ * === Scrollbar drag n drop === */this.bar.onmoused function (e) {E) {E) {E) {E) {e.bar. - 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;}/ * --- rilis scrollbar. {self.oc.onmouseMove = null; return false;} return false;}/ * ==== panah kanan === */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 = {/ * ==== target = 0; function (inc) {if (inc) this. (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.repleplac. this.title.firstChild); this.legend.replacechild (document.createTextNode (o.text), this.legend.firstchild);/ * --- perbarui hyperlink --- * if (o.url) {o.img.classname = 'tautan diapo'; o.url) {o.img.classname = 'diapo link..stat'; window. {o.img.className = 'diapo'; window.status = '';}/ * --- Hitung ukuran & posisi target --- */o.w1 = math.min (o.iw, this.wh * .5) * o.z1; var x0 = o.x1 = (this.wh * .5)-o.w1; var x0 = o.x1 = (this.wh * .5)-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 / or) * ini. (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. this.bdw;}}/ * --- pindahkan 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;}},/ * ==== Mousewheel scrolling === */scroll: function (sc) {if (sc <0) {if (this.view <this.nf - 1) this.calc (1);} else {if (ini. {this.wh = this.oc.clientwidth; this.ht = this.oc.clientHeight; this.ws = this.scrollbar.offsetWidth; this.calc (); this.run (true);},/ * === Pindahkan semua gambar ===== */run: function (res) {var i = this = this = this. diapos [i] .move (res);}} diapo = function (parent, n, src, judul, teks, url, target) {this.parent = parent; this.loaded = false; this.title = target; this.text = text; this.url = url; this.target =; ini. 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.x1 = this.x0; this.w0 = 0; this this; this.img.onClick = function () {this.parent.click (); } this.parent.oc.appendChild (this.img);/ * --- menampilkan tautan eksternal --- */if (url) {this.img.onmouseover = function () {this.className = 'tautan diapo'; } 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 || --- */this.x0 += sx * .1; this.w0 += sw * .1; if (this.x0 <this.parent.wh && this.x0 +this.w0> 0) {/ * --- hanya cat gambar --- */ini. 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';/ *---o.height = math.round (h) + 'px';/ *----o.height = math.round (h) + 'px';/ *----o.height = oMer/{o) {heRo. 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) (h) + 'px'; o.height = math.round (h) {{{o. h) --- */if (this.visible) {this.visible = false; this.img.style.width = '0px'; if (this.flx) this.flx.style.width = '0px';}}} lain {/ * ==== Image onload === * {this.img. gambar --- */this.iw = this.img.width; this.ih = this.img.height; this.r = this.ih/this.iw; this.loaded = true;/ *--- buat refleksi --- */this.flx = createReflexion (this.parent.oc, this.img); if.flx = createReFlexion (this.parent.oc, this.img); if (this.flx = createReFlexion (this.parent.oc, this.img); if (this. this.n; this.parent.calc ();}}},/ * ==== DIAPO ONCLICK ==== */klik: function () {if (this.parent.view == this.n) {/ * --- Klik di zoom diapo --- */if (this.url) {/ * --- Open Diapo zoom --- */if (this.url) {/ * --- Open diapo zoom --- */if (this.url) {/ * --- Open diapo zoomed --- */if (this.url) {/ * --- Open diapo zoomed --- */if (this.url) {// * this.target);} else {/ * --- zoom in/out --- */this.z1 = this.z1 == 1? this.parent.zoom: 1; this.parent.calc ();}} else {/* --- pilih diapo ---*/this.parent.view = this.n; this.parent.calc ();} return false;}} return {/* ==== Inisialisasi skrip =====*/create; */var load = function () {var loaded = false; var i = instances.length; while (i--) if (instances [i] .ocont == div) loaded = true; if (! Loaded) {/ *--- dorong instance imageflow baru --- */instances.push (new imageflow (div, ukuran, zoom, perbatasan)); (! imf.initialized) {imf.initialized = true;/ * --- window ubah ukuran acara --- */addEvent (window, 'ubahze', function () {var i = instances.length; while (i--) instance (i] .Resize ();});/ * hentikan drag n drag n drag n drag (i-function (i] .resize ();});/ *-hentikan drag n drag n drag n drag n) (i] (document). {if (! e) e = window.event; var tg = e.relatedTarget || {var i = instances.length; while (i--) instances [i] .run ();}, 16);}}}/ * --- peristiwa onload jendela --- */addevent (window, 'load', function () {load ();});}}} (); // div id, ukuran, zoom, borderim. 10); </script> </head> <body> <div id = "imageflow"> <verv> </div> <verv> <a rel = "gambar/1.jpg" href = "#" _fcksavedUrl = "#"> href = "href =" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "#" "" "#" »" "" " rendering desain </a> <a rel = "gambar/3.jpg" href = "#" _fcksavedurl = "#"> rendering desain indoor 3d </a> <a rel = "gambar/4.jpg" href = "#" _fcksavedurl = "#"> indoor 3d rendering = "5d render =" 5d rerering = "5d rerering =" 5d 3d render = "5d RODED =" 5D "_FCKSAVEVEDURL ="#"> ODOOR 3D 3D RODEING =" 5D " href = "#" _FCKSAVEDURL = "#"> rendering desain 3D indoor </a> <a rel = "gambar/6.jpg" href = "#" _fcksavedUrl = "#"> href = "href =" oVed#"_AV =" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "_AV =" "" rendering desain </a> <a rel = "gambar/2.jpg" href = "#" _fcksavedurl = "#"> rendering desain indoor 3d </a> <a rel = "gambar/3.jpg" href = "#" _fcksavedurl = "#"> indoor 3d rendering = "rerering =" AKCKSAVEVEDURL = "#"> INDOOR 3D RENDING = "" "" ""> "" "_FCKSAVEVEDURL ="#"> INDOOR 3D RODED 3D" href = "#" _FCKSAVEDURL = "#"> rendering desain 3D indoor </a> <a rel = "gambar/5.jpg" href = "#" _fcksavedUrl = "#"> "ordref (" _fck#"_AV =" 6. "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" " rendering desain </a> <a rel = "gambar/2.jpg" href = "#" _fcksavedUrl = "#"> rendering desain indoor 3d </a> </div> <div> <v> memuat </div> <v> Tunggu ... </div> </Div> <v div> <piv Src = " src = "gambar/l.jpg" _fcksavedUrl = "gambar/l.jpg"> <img src = "gambar/r.jpg" _fcksavedUrl = "gambar/r.jpg"> <img src = "gambar/s.png" _fcksavedurl = "gambar/s." </div> </div> </body> </html>Untuk informasi lebih lanjut tentang konten terkait JavaScript, silakan periksa topik -topik situs ini: "Ringkasan Efek dan Teknik Peralihan Javascript", "Ringkasan Keterampilan Algoritma Pencarian JavaScript", "Ringkasan Teknik Animasi dan Teknik JavaScript," Ringkasan Ringkasan Data Javascript dan Ringkasan Data Javascript "," Ringkasan Data JavaScript "," Ringkasan Data JavaScript "," Ringkasan DEBUGRITM PENGABUNG DAN RINGKASI DAGGING "RINGKASI DAN RINGKASAN DATRICKS" RINGKASI DAN RINGKASI DAGGING "RINGKASI DAN RINGKASI DAGGING" RINGKAS Algoritma dan teknik traversal javascript ", dan" Ringkasan Penggunaan Operasi Matematika JavaScript "
Saya harap artikel ini akan membantu pemrograman JavaScript semua orang.