บทความนี้อธิบายการใช้งาน JS ของแถวแนวนอนของภาพด้วยฟังก์ชั่นการแสดงผลการซูมสะท้อน แบ่งปันสำหรับการอ้างอิงของคุณดังนี้:
<! 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 = "เนื้อหาประเภท" เนื้อหา = "ข้อความ/html; charset = utf-8"/> <title> js http-equiv = "imagetoolbar" content = "no" /> <style type = "text /css"> html {overflow: hidden;} body {margin: 0px; padding: 0px; พื้นหลัง: #000; ความกว้าง: 100%; 10%; ความเป็นมา:#000;}#imageflow .diapo {ตำแหน่ง: Absolute; ซ้าย: -1000px; เคอร์เซอร์: ตัวชี้; -ms-interpolation-mode: ใกล้เคียงที่สุด-neighbor;}#imageflow .link {border: dotted #fff 1px; hidden;} #imageflow .top {ตำแหน่ง: สัมบูรณ์; ความกว้าง: 100%; ความสูง: 2%; พื้นหลัง: #003366;} #imageflow .text {ตำแหน่ง: Absolute; ซ้าย: 0px; ความกว้าง: 100%; 1000;}#imageflow .title {font-size: 0.9em; font-weight: bold;}#imageflow .legend {font-size: 0.8em;}#imageflow .scrollbar {ตำแหน่ง: Absolute; ซ้าย: 10%; Absolute; ซ้าย: 0.5%; ความกว้าง: 98%; ความสูง: 16px; ตัวกรอง: อัลฟ่า (ความทึบ = 30); ความทึบ: 0.3;}#imageflow .Arrow-left {ตำแหน่ง: Absolute;}#imageFlow .Arrow-right {ตำแหน่ง: Absolute; 25px;} </style> <script type = "text/javascript"> var imf = function () {var lf = 0; var อินสแตนซ์ = []; ฟังก์ชั่น getElementsByClass (วัตถุ, แท็ก, คลาสคลาส) == classname) ret.push (o [i]); ถ้า (ret.length == 1) ret = ret [0]; return ret;} ฟังก์ชั่น addevent (o, e, f) {ถ้า (window.addeventListener) o.addeventListener (e, f, false); createFlexion (cont, img) {var flx = false; if (document.createElement ("Canvas"). getContext) {flx = document.createElement ("Canvas"); flx.width = img.width; flx.height = img.height; img.height); context.scale (1, -1); context.drawimage (img, 0, 0, img.width, img.height); context.globalcompositeroperation = "ปลายทางออก"; 255, 255, 0) "); การไล่ระดับสี AddColorStop (0," RGBA (255, 255, 255, 1) "); บริบท. document.createElement ('img'); flx.src = img.src; flx.style.filter = 'flipv progid: dximagetransform.microsoft.alpha (' +'img' img 'img' --- แทรก reflexion --- */flx.style.position = 'Absolute'; flx.style.left = '-1000px'; cont.appendchild (flx); return flx;} imageflow (ocont, ขนาด, zoom, ชายแดน) Border; this.ocont = ocont; this.oc = document.getElementById (ocont); this.scrollbar = getElementsByclass (this.oc, 'div', 'scrollbar'); this.text = getElementSbyclass (this.oc, 'div', 'text' getElementsByClass (this.text, 'div', 'Legend'); this.bar = getElementsByClass (this.oc, 'img', 'bar'); this.arl = getElementsByclass (this.oc, 'img', 'rilf-left'); getElementsByClass (this.oc, 'img', 'Arrow -Right'); this.bw = this.bar.width; this.alw = this.arl.width - 5; this.arw = this.arr.width - 5; -1; this.resize (); this.oc.onselectStart = function () {return false; }/ * --- สร้างรูปภาพ --- */var img = getElementsByClass (this.oc, 'div', 'bank'). getElementsByTagname ('a'); this.nf = img.length; สำหรับ (var i = 0, o; o = img [i]; i ++) i + ' -', O.Innerhtml || o.rel, o.href || '', o.target || '_self'); {this.parent.scroll (-e.detail);}, false); else this.oc.onmousewheel = function () {this.parent.scroll (event.wheeldelta);}/ * ===== การลาก scrollbar n drop === - this.offsetleft; var self = this.parent;/ * --- ย้ายแถบ --- */this.parent.oc.onmousemove = ฟังก์ชั่น (e) {ถ้า (! e) e = window.event; self.bar.style.left = math.round (math.min 'px'; self.view = math.round (((e.screenx - scl))/(self.ws - self.alw - self.arw - self.bw) * self.nf); ถ้า (self.view! = self.back) self.calc (); {self.oc.onmousemove = null; return false;} return false;}/ * ==== ลูกศรขวา === */this.arr.onclick = this.arr.ondblclick = function () {ถ้า (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 = {/ * === เป้าหมาย === */calc: function (inc) {ถ้า (inc) this.view += inc; && o.loaded) {/ * --- รีเซ็ต --- */var ob = this.diapos [this.back]; ถ้า (ob && ob! = o) {ob.img.classname = 'diapo'; ob.z1 = 1;}/ *- this.title.firstchild); this.legend.replacechild (document.createtextnode (o.text), this.legend.firstchild);/ * --- อัปเดต hyperlink --- */if (o.url) {o.img.classname = 'diapo link'; {o.img.className = 'diapo'; window.status = '';}/ * --- คำนวณขนาดเป้าหมายและตำแหน่ง --- */o.w1 = math.min (o.iw, this.wh * .5) * o.z1; var x0 = o.x1 = this.bdw; สำหรับ (var i = this.view +1, o; o = this.diapos [i]; i ++) {ถ้า (o.loaded) {o.x1 = x; o.w1 = (this.ht / or) * this.size; x += o.w1 (var i = this.view -1, o; o = this.diapos [i]; i--) {ถ้า (o.loaded) {o.w1 = (this.ht / or) * this.size; o.x1 = x -o.w1; x -= o.w1 + this.bdw; tw + = o.w1 + this.bdw;}}/ * --- ย้าย scrollbar --- */ถ้า (! this.scr && tw) {var r = (this.ws-this.alw-this.arw-this.bw)/tw; this.bar.style.left = math.round this.view;}},/ * ==== การเลื่อน Mousewheel === */scroll: function (sc) {ถ้า (sc <0) {ถ้า (this.view <this.nf - 1) this.calc (1);}} {if (this.view> 0) {this.wh = this.oc.clientWidth; this.ht = this.oc.clientheight; this.ws = this.scrollbar.offsetWidth; this.calc (); this.run (จริง);},/ * === this.diapos [i] .move (res);}} diapo = function (parent, n, src, ชื่อ, ข้อความ, url, target) {this.parent = parent; this.loaded = false; this.title = title; tistext = text; this.url = url; this.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; 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 ====*/ย้าย: ฟังก์ชั่น (res) {ถ้า (this.loaded) {var sx = this.x1 - this.x0; var sw = this.w1 - this.w0; --- */this.x0 += sx * .1; this.w0 += sw * .1; ถ้า (this.x0 <this.parent.wh && this.x0 +this.w0> 0) {/ * --- ภาพที่มองเห็นได้เท่านั้น 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';/ * 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'; --- */if (this.visible) {this.visible = false; this.img.style.width = '0px'; ถ้า (this.flx) this.flx.style.width = '0px';}}}}} {/ * ==== รูปภาพ --- */this.iw = this.img.width; this.ih = this.img.height; this.r = this.ih/this.iw; this.loaded = true;/ *--- สร้าง reflexion --- */this.flx = createFlexion this.n; this.parent.calc ();}}},/ * ==== diapo onclick ===== */คลิก: ฟังก์ชั่น () {ถ้า (this.parent.view == this.n) {/ * --- คลิกที่ zoomed diapo --- */ถ้า (this.url) {/ * --- this.target);} else {/ * --- ซูมเข้า/ออก --- */this.z1 = this.z1 == 1? this.parent.zoom: 1; this.parent.calc ();}} else {/ * --- เลือก diapo --- */this.parent.view = this.n; this.parent.calc ();} return false;}} return {/ * === load = function () {var loaded = false; var i = instances.length; ในขณะที่ (i--) ถ้า (อินสแตนซ์ [i] .Ocont == div) โหลด = true; ถ้า (! โหลด) {/ * --- อินสแตนซ์ ImageFlow ใหม่ --- */Instances.push {imf.initialized = true;/ * --- หน้าต่างปรับขนาดเหตุการณ์ --- */addevent (หน้าต่าง 'ปรับขนาด' ฟังก์ชั่น () {var i = อินสแตนซ์ความยาว; ในขณะที่ (i--) อินสแตนซ์ [i]. resize ();}); window.event; var tg = e.relatedTarget || e.toelement; ถ้า (tg && tg.tagname == 'html') {var i = อินสแตนซ์ความยาว; อินสแตนซ์ความยาว; ในขณะที่ (i--) อินสแตนซ์ [i] .run ();}, 16);}}}/ * --- เหตุการณ์ Onload Window --- */addevent (หน้าต่าง, 'โหลด', ฟังก์ชัน () {load ();});}}} (); 10); </script> </head> <body> <div id = "imageflow"> <div> </div> <div> <a rel = "images/1.jpg" href = "#" _fcksavedurl = "#"> การออกแบบการออกแบบภายใน 3d การเรนเดอร์ </a> <a rel = "images/3.jpg" href = "#" _fcksavedurl = "#"> การออกแบบ 3D ในร่มการแสดงผล </a> <a rel = "images/4.jpg" href = "#" _fcksavedurl = "#" _fcksavedurl = "#"> การออกแบบการออกแบบ 3D ในร่ม </a> <a rel = "ภาพ/6.jpg" href = "#" _fcksavedurl = "#"> การออกแบบการออกแบบ 3D ในร่ม </a> การเรนเดอร์ </a> <a rel = "รูปภาพ/2.jpg" href = "#" _fcksavedurl = "#"> การออกแบบ 3d ในร่มการแสดงผล </a> <a rel = "images/3.jpg" href = "#" _fcksavedurl = "#" _fcksavedurl = "#"> การออกแบบการออกแบบ 3D ในร่ม </a> <a rel = "ภาพ/5.jpg" href = "#" _fcksavedurl = "#"> การออกแบบการออกแบบ 3D ในร่ม </a> การเรนเดอร์ </a> <a rel = "images/2.jpg" href = "#" _fcksavedurl = "#"> การออกแบบการออกแบบ 3D ในร่ม </a> </div> <div> <div> โหลด </div> <div> src = "images/l.jpg" _fcksavedurl = "images/l.jpg"> <img src = "images/r.jpg" _fcksavedurl = "images/r.jpg"> <img src = "ภาพ/s.png" _fcksavedurl = "src </div> </div> </body> </html>สำหรับข้อมูลเพิ่มเติมเกี่ยวกับเนื้อหาที่เกี่ยวข้องกับ JavaScript โปรดตรวจสอบหัวข้อของไซต์นี้: "สรุปเอฟเฟกต์และเทคนิคการสลับ JavaScript", "สรุปทักษะอัลกอริธึมการค้นหา JavaScript", "สรุปผลการสรุปและเทคนิคการสรุปของ JavaScript ของ JavaScript อัลกอริทึมและเทคนิคการสำรวจ JavaScript "และ" สรุปการใช้งานทางคณิตศาสตร์ JavaScript "
ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับการเขียนโปรแกรม JavaScript ของทุกคน