تصف هذه المقالة تنفيذ JS للصف الأفقي من الصور مع وظيفة عرض تكبير الانعكاس. شاركه للرجوع إليه ، على النحو التالي:
<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html ؛ charset = utf-8"/> <title> ينفّذ JS الصورة التي تظهر على المركز والتواصل http-equiv = "imagetoolbar" content = "no" /> <style type = "text /css"> html {overflow: hidden ؛} body {margin: 0px ؛ padding: 0px ؛ background: 80 ٪ ؛ width: 100 ٪ ؛ 10 ٪ ؛ الخلفية:#000 ؛}#imageflow .diapo {الموضع: مطلق ؛ اليسار: -1000px ؛ المؤشر: مؤشر ؛ -ms-interpolation-وضع: early neighbor ؛}#imageflow .link Hidden ؛} #imageflow .top {الموضع: مطلق ؛ العرض: 100 ٪ ؛ الارتفاع: 2 ٪ ؛ الخلفية: #003366 ؛} #imageflow .Tex 1000 ؛}#imageflow .title {font-size: 0.9em ؛ font-weight: bold ؛}#imageflow .Legend {font-size: 0.8em ؛}#imageflow المطلق ؛ اليسار: 0.5 ٪ ؛ العرض: 98 ٪ ؛ الارتفاع: 16px ؛ مرشح: ألفا (التعتيم = 30) ؛ العتامة: 0.3 ؛}#Imageflow .arrow-left {position: absolute ؛}#imageflow .arrow-right {position: apport ؛ right: 0px ؛ 25px ؛} </style> <script type = "text/javaScript"> var imf = function () {var lf = 0 ؛ var extances = [] (o [i] .className == className) ret.push (o [i]) ؛ if (ret.length == 1) ret = ret [0] f) ؛} وظيفة createreflexion (cont ، img) {var flx = false ؛ if (document.createElement ("canvas"). getContext) {flx = document.createlement ("canvas") ؛ flx.width = img.wid ؛ flx.hight = img.height ؛ var comptext = flx.getContext ("2d") ؛ context.translate (0 ، img.height) ؛ context.scale (1 ، -1) ؛ context.drawImage (img ، 0 ، 0 ، img.width ، img.height) ؛ context.globalcompositeoperation = "الوجهة". 2) ؛ التدرج. dimizageTransform --- */flx = document.createElement ('img') ؛ flx.src = img.src ؛ flx.style.filter = 'flipv progid: dimizageTransform.microsoft.alpha (' +'excabity = 50 ، styp = 1 ، startx = 0 ، finishx = 0 ، inthipy = *.25) + ')' ؛}/ *--- إدراج الانعكاس --- */flx.style.position = 'aboort' ؛ flx.style.left = '-1000px' ؛ cont.appendChild (flx) ؛ return flx ؛} functionflow (oconont ، size ، zoom) {this.diapos = [] الحجم ؛ this.zoom = Zoom ؛ this.bdw = this.ocont = ocont ؛ this.oc = document.getElementById (ocont) ؛ this.scrollbar = getElementSbyClass (this.oc ، 'div' ، 'scrollbar') ؛ this.text = getElementSbyclass (this.oc ، 'div' ، 'telect. "div" ، 'title') ؛ this.legend = getElementSByClass (this.text ، 'div' ، 'legend') ؛ this.bar = getElementSbyClass (this.oc ، 'img' ، 'bar') ؛ "Arrow -Left") ؛ this.arr = getElementByClass (this.oc ، 'img' ، 'Arrow -Right') ؛ this.bw = this.bar.width ؛ this.alw = this.arl.width - 5 ؛ this.arw = this.arr.width - 5 ؛ هذا ؛ this.view = this.back = -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 + ' -' ، o.innerhtml || {this.parent.scroll (-e.detail) ؛} ، خطأ) ؛ آخر هذا. - this.offsetLeft ؛ var self = this.parent ؛/ * --- نقل شريط --- */this.parent.oc.onmousemove = function (e) {if (! e) e = window.event ؛ self.bar.style.left = math.round (math.min ((self.ws - self.arw - 'px' ؛ self.view = math.round (((e.screenx - scl))/(self.ws - self.alw - self.arw - self.bw) * self.nf) ؛ if (self.view! {self.oc.onmouseMove = null ؛ return false ؛} return 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) (O && o.loaded) {/ * --- إعادة تعيين --- */var ob = this.diapos [this.back] ؛ if (ob && ob! = o) {ob.img.classname = 'diapo' ؛ ob.z1 = 1 ؛}/ * --- تحديث الأسطورة-- this.title.firstchild) ؛ this.legend.replacechild (document.createTextNode (O.Text) ، this.legend.firstchild) ؛/ * --- تحديث الارتباط التشعبي --- */if (o.url) {o.img.classname = 'diapo annel ؛ {o.img.classname = 'diapo' ؛ window.status = '' ؛}/ * --- حساب أحجام ومواضع الهدف --- */o.w1 = math.min (o.iw ، this.wh * .5) * o.z1 ؛ var x0 = o.x1 = this.wh * .5)-(o.w1 * .5) ؛ this.bdw ؛ for (var i = this.view +1 ، o ؛ o = this.diapos [i] ؛ i ++) {if (o.loaded) {o.x1 = x ؛ o.w1 = (this.ht / أو) * (var i = this.view -1 ، o ؛ o = this.diapos [i] ؛ this.bdw ؛}}/ * --- نقل شريط التمرير --- */if (! this.scr && tw) {var r = (this.ws-this.alw-this.arw-this.bw)/tw ؛ th 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) ؛} ell {if (this.view 0) this.calc (-1) ؛ {this.wh = this.oc.clientwidth ؛ this.ht = this.oc.clientheight ؛ this.ws = this.scrollbar.offsetWidth ؛ this.calc () ؛ this.run (true) ؛} ،/ * ==== نقل جميع الصور ==== */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. 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.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 || --- */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 Math.Round (this.x0) + 'px' ؛ o.bottom = math.floor (this.parent.ht *. 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' ؛ Image --- */this.iw = this.img.width ؛ this.ih = this.img.height ؛ this.r = this.ih/this.iw ؛ this. this.n ؛ this.parent.calc () ؛}} ،/ * ==== diapo onClick ===== */click: function () {if (this.parent.view == this.n) {/ * --- انقر على Zoomed Diapo --- */if (this.url) {/ * --- Open Hyperlink --- this.target) ؛} آخر {/ * --- التكبير/خارج --- */this.z1 = this.z1 == 1؟ this.parent.zoom: 1 ؛ this.parent.calc () ؛) */var load = function () {var loaded = false ؛ var i = extance.length ؛ بينما (i--) if (extance [i] .Ocont == div) loaded = true ؛ if (! load) {/ *--- ادفع مثيل imageflow جديد --- */insances.push {imf.initialized = true ؛/ * --- حدث تغيير حجم النافذة --- */addevent (نافذة ، 'تغيير حجم' ، function () {var i = instances.length ؛ بينما (i--) مثيلات [i] .resize () ؛}) ؛/ * ---- window.event ؛ var tg = extances.length ؛ بينما (i--) مثيلات [i] .run () ؛} ، 16) ؛}}}/ * --- حدث onload window --- */addevent (window ، 'load' ، function () {load () ؛}) ؛}} () ؛ 10) ؛ </script> </head> <body> <div id = "imageflow"> <viv> </viv> <viv> <a rel = "images/1.jpg" href = "#" _fcksavedurl = "#" التقديم </a> <a rel = "images/3.jpg" href = "#" _fcksavedurl = "#"> عرض التصميم ثلاثي الأبعاد داخلي </a> <a rel = "images/4.jpg" href = "#" _fcksavedurl = "#" _fcksavedurl = "#"> عرض التصميم ثلاثي الأبعاد داخلي </a> <a rel = "images/6.jpg" href = "#" _fcksavedurl = "#" rel = "Images/2.jpg" href = "#" _fcksavedurl = "#"> عرض التصميم ثلاثي الأبعاد الداخلي </a> <a rel = "images/3.jpg" href = "#" _fcksavedurl = "#" _fcksavedurl = "#"> عرض التصميم ثلاثي الأبعاد داخلي </a> <a rel = "images/5.jpg" href = "#" _fcksavedurl = "#" rel = "Images/2.jpg" href = "#" _fcksavedurl = "#"> عرض التصميم ثلاثي الأبعاد داخلي </a> </viv> <viv> تحميل </div> <div> الرجاء الانتظار ... </div> </div> <div> <img src = "_fcksavedurl =" _fcksavedurl = "Images/l.jpg"> <img src = "images/r.jpg" _fcksavedurl = "images/r.jpg"> <img src = "images/s.png" _fcksavedurl =لمزيد من المعلومات حول المحتوى المتعلق بـ javaScript ، يرجى مراجعة موضوعات هذا الموقع: "ملخص لتأثيرات وتقنيات تبديل JavaScript" ، "ملخص لمهارات خوارزمية بحث JavaScript" ، "ملخص لتأثيرات الرسوم المتحركة JavaScript و Techniques و" ملخص ". خوارزميات وتقنيات JavaScript Traversal "، و" ملخص استخدام العمليات الرياضية JavaScript "
آمل أن تكون هذه المقالة مفيدة لبرمجة JavaScript للجميع.