تصف هذه المقالة طريقة 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 </title> <style = text "> الارتفاع: 696 بكسل ؛ الموقف: مطلق ؛ أعلى: 100px ؛ اليسار: 250 بكسل ؛ حجم الخط: 0 ؛ الحدود: 1px Solid #000 ؛} #IMG {Width: 500px ؛ الارتفاع: 696px ؛} #متصفح {الحدود: 1px Solid #000 ؛ Z-index: 100 ؛ الموقف: مطلق ؛ الخلفية:#555 ؛}#mag {border: 1px solid#000 ؛ الفائض: مخفي. z-index: 100 ؛} </style> <script type = "text/javaScript"> وظيفة getEventObject (w3cevent) {// enter function function return w3cevent || window.event ؛} وظيفة getPointerPosition (e) {// الحصول على الدالة e = e || getEventObject (e) ؛ var x = e.pagex || ( var y = e.pagey || (e.clienty + (document.documentElement.scrolltop || document.body.scrolltop)) ؛ return {'x': x ، 'y': y} ؛} وظيفة setOpacity (elem ، المستوى) {// إعدادات المتصفح المتوافقة للقيم الشفافة إذا (elem.filters) {elem.style.filter = 'alpha =' + level * 100 + ')' ؛ } آخر {elem.style.opacity = المستوى ؛ }} الوظيفة CSS (elem ، prop) {// css ، يمكن أن تقوم وظيفة إعداد CSS بسهولة بتعيين قيمة css وتوافق مع قيم شفافة لـ (var i in prop) {if (i == 'opitated') {setOpacity (elem ، prop [i]) ؛ } else {elem.style [i] = prop [i] ؛ }} return elem ؛} var magnifier = {m: null ، init: function (magni) {var m = this.m = magni || {تابع: NULL ، // div img تحميل الصورة الأصلية IMG: NULL ، // SCALE MAG: NULL ، // مقياس الإطار المقياس: 15 // قيمة المقياس ، كلما زادت مجموعة القيمة ، أكبر توسيع ، ولكن هناك مشكلة هنا أنه إذا لم يكن من الممكن تقسيمها ، فسيتم إنشاء بعض الحواف البيضاء الصغيرة. لا أعرف كيفية حلها في الوقت الحالي} css (m.img ، {'position': 'absolute' ، 'width': (m.ctont "العرض": "لا شيء" ، "العرض": m.cont.clientwidth + 'px' ، //m.cont هي الصورة الأصلية ، والتي هي نفس العرض مثل الصورة الأصلية. 'height': m.cont.clientheight + 'px' ، 'position': 'appolute' ، 'left': m.cont.offsetleft + m.cont.offseth. Box بعيد إلى يمين الصورة الأصلية 10px 'top': m.cont.offsettop + 'px'}) var borderwid = m.contelementsbytagname ('div') [0] .OffSetWidth - M.Cont.getElementsByTagname ('div') [0]. // احصل على عرض الحدود CSS (M.Cont.getElementsByTagName ('div') [0] ، {//m.cont.getelementsbytagname('div') budap0] هو مربع التصفح "عرض": من الحدود "الارتفاع": m.cont.clientheight /m.scale - borderwid + 'px' ، // قيمة الارتفاع /المقياس للصورة الأصلية - عرض الحدود "التعتيم": 0.5 // ضبط الشفافية}) M.IMG.SRC = M.Cont.getElementSbyTagname ('img') [0] .SRC ؛ // دع قيمة src للصورة الأصلية تعطي الصورة الموسعة m.cont.style.cursor = 'crosshair' ؛ m.cont.onmouseover = machifier.start ؛ } ، ابدأ: الدالة (e) {if (document.all) {// تنفيذ فقط تحت IE ، وذلك بشكل أساسي لتجنب عدم القدرة على الكتابة فوق machifier.createiframe (machifier.m.img) ؛ } this.onmousemove = machifier.move ؛ // هذا يشير إلى m.cont this.onmouseout = machifier.end ؛ } ، نقل: function (e) {var pos = getPointerPosition (e) ؛ // توحيد الأحداث this.getElementsByTagName ('div') [0] .style.display = '' ؛ css (this.getElementsByTagName ('div') [0] ، {'top': math.min (math.max (pos.y - this.offsettop - parseint (this.getelementsbytagname ('div') [0] + 'px' ، 'Left': math.min (math.max (pos.x - this.offsetleft - parseint (this.getElementSbyTagName ('div') [0] This.OffSetLeft - عرض مربع تصفح/2 ، Math.Max و Math.min بحيث لن يتجاوز مربع التصفح الصورة}) Machifier.mag.style.display = '' ؛ css (machifier.m.img ، {'top': - (parseint (this.getElementsByTagname ('div') [0] .style.top) * magnifier.m.scale) + 'px' ، 'left': - (parseint (this.getElementsbytagname ('div') [0] } ، نهاية: function (e) {this.getElementsByTagName ('div') [0] .style.display = 'none' ؛ machifier.removeiframe (Magnifier.M.Img) ؛ // تدمير iframe magnifier.m.mag.style.display = 'none' ؛ } ، createiframe: function (elem) {var layer = document.createElement ('iframe') ؛ layer.tabindex = '-1' ؛ layer.src = 'javaScript: false ؛' ؛ elem.parentnode.appendchild (طبقة) ؛ layer.style.width = elem.offsetWidth + 'px' ؛ layer.style.height = elem.offsetheight + 'px' ؛ } ، removeiframe: function (elem) {var layers = elem.parentNode.getElementsByTagName ('iframe') ؛ بينما (layers.length> 0) {layers [0] .ParentNode.removechild (طبقات [0]) ؛ }}} window.onload = function () {magnifier.init ({cont: document.getElementById ('maggeire') ، img: document.getElementById ('magnifierimg') ، mag: document.getElementById ('machifier') ، Scale: 3}) ؛} </script> src = "lib/images/1.jpg" id = "img"/> <div id = "browser"> </viv> </viv> <div id = "mag"> <img id = "magnifierimg"/> </div> الكتابة فوق </option> </select> </body> </html>لمزيد من المعلومات حول المحتوى المتعلق بـ javaScript ، يرجى مراجعة موضوعات هذا الموقع: "ملخص لتأثيرات وتقنيات تبديل JavaScript" ، "ملخص لمهارات خوارزمية بحث JavaScript" ، "ملخص لتأثيرات الرسوم المتحركة JavaScript و Techniques و" ملخص ". خوارزميات وتقنيات JavaScript Traversal "، و" ملخص استخدام العمليات الرياضية JavaScript "
آمل أن تكون هذه المقالة مفيدة لبرمجة JavaScript للجميع.