كنت متحمسًا قليلاً عندما نشرت مدونة لأول مرة. أنا الآن في تيانجين. آمل أن أعمل في الصناعة الأمامية في المستقبل ولن أتمكن من الدراسة لفترة طويلة. من أجل تسجيل عملية التعلم والمكاسب الخاصة بي ، أنا بالطبع توحيد. قد لا تكون الأشياء التي أكتبها طويلة مثل الثور الكبير ، لكنها مجرد محتوى أساسي. بالطبع ، سأجمع أيضًا بعض المقالات الجيدة التي أعتقد أنها جيدة (في الواقع ، أستطيع أن أفهمها أكثر ...). أعتقد أنه يمكنني كتابة شيء كبير في المستقبل. تعال!
أنا أتحدث قليلا هراء ، أتحدث عن الأمور الخطيرة. قبل بضعة أيام ، شاهدت فيديو تعليمي لتعليم تنزو. استخدم المعلم jQuery لتحقيق تأثير كوب مكبرة (قال المعلم أنه كان بطيئًا للغاية ، وكان يقفز ويشاهده). نظرًا لأنني لم أتعلم JQuery جيدًا ، لكن الكود الأساسي لا يزال مفهومًا ، أريد أن أمارس التدريب مع JS الذي أتعلمه حاليًا ، وقد حقق هذا التأثير بنجاح.
الفكرة: أولاً ، دع كتلة التحرك واختباء كتلة BIMG. عندما ينتقل الماوس إلى المربع ، يتم عرض كتلة الحركة وكتلة BIMG ، ويتم الحصول على الموضع الحالي للماوس. بعد ذلك ، بعد الحساب ، يتم إعطاء القيمة المناسبة لكتلة الحركة وكتلة BIMG لتحقيق تأثير الزجاج المكبرة (حساب موضع كتلة التحرك وتفصيل كتلة BIMG لاحقًا)
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> مكبرة الزجاج </title> <link href = "css/bigimg.css" rel = "styleshet"/> <script src = "js/bigimg.js onload = "bigimg ()"> <div id = "box"> <img src = "images/simg.jpg"> <div id = "move"
نمط CSS:
*{الهامش: 0px ؛ padding: 0px ؛}#box {width: 430px ؛ الارتفاع: 430 بكسل ؛ الهامش: 100px ؛ الهامش اليساري: 17 ٪ ؛ الموضع: النسبية ؛ // استخدم تحديد المواقع النسبية هنا بحيث يمكن أن تعتمد عناصر أخرى على هذا العنصر إلى وضع} #move {background-image: url (../ images/move.png) ؛ العرض: 220 بكسل ؛ الارتفاع: 220 بكسل ؛ الموقف: مطلق ؛ اليسار: 0px ؛ أعلى: 0px ؛ العرض: لا شيء ؛ // دعه يختبئ أولاً واستخدم JS لعرضه} #bimg {width: 430px ؛ الارتفاع: 430 بكسل ؛ الفائض: مخفي. الموقف: مطلق ؛ أعلى: 0px ؛ اليسار: 450 بكسل ؛ العرض: لا شيء ؛ // دعه يختبئ أولاً واستخدم JS لعرضه} #bimg img {width: 800px ؛ الارتفاع: 800 بكسل ؛ الموقف: مطلق ؛ أعلى: 0px ؛ اليسار: 0px ؛}جافا سكريبت:
دالة bigimg () {var bbox = document.getElementById ("box") ؛ var bmove = document.getElementById ("move") ؛ var bbimg = document.getElementById ("bimg") ؛ var b_bimg = document.getElementById ("b_bimg") ؛ bbox.onmouseover = function () {// انقل الماوس إلى مربع لعرض صور كبيرة واختيار مربعات bbimg.style.display = "block" ؛ bmove.style.display = "block" ؛ } bbox.onmouseout = function () {// mouseMove لا يعرض صورًا كبيرة وخانات الاختيار عندما يتم نقل المربع بعيدًا عن الماوس bbimg.style.display = "none" ؛ bmove.style.display = "none" ؛ } bbox.onmousemove = function (e) {// احصل على موضع الماوس var x = var t = bbox.offsettop ؛ // موضع المربع بالنسبة إلى عرض Viewport var l = bbox.offsetleft ؛ var _left = x - l - bmove.offsetwidth/2 ؛ // احسب موضع الحركة var _top = y - t -bmove.offsetheight/2 ؛ if (_top <= 0) // slide إلى أعلى box_top = 0 ؛ آخر إذا (_top> = bbox.offsetheight-bmove.offsetheight) // تنزلق إلى أسفل box_top = bbox.offsetheight-bmove.offsetheight ؛ if (_left <= 0) // شريحة إلى أقصى اليسار من box_left = 0 ؛ آخر إذا (_left> = bbox.offsetwidth-bmove.offsetwidth) // شريحة إلى أقصى اليمين من box_left = bbox.offsetwidth-bmove.offsetwidth ؛ bmove.style.top = _top + "px" ؛ // قم بتعيين موضع move bmove.style.left = _left + "px" ؛ var w = _left/(bbox.offsetwidth-bmove.offsetwidth) ؛ // حساب نسبة الحركة var h = _top/(bbox.offsetheight-bmove.offsetheight) ؛ var b_bimg_top = (b_bimg.offsetheight-bbimg.offsetheight)*h ؛ // حساب موضع الصورة الكبيرة var b_bimg_left = (b_bimg.offsetwidth-bbimg.offsetwidth)*w ؛ b_bimg.style.top = -b_bimg_top + "px" ؛ // قم بتعيين معلومات الموقع للصورة الكبيرة b_bimg.style.left = -b_bimg_left + "px" ؛ }}صورة التكاثر:
1. حساب كتلة الحركة
السهم الأسود:
var x = e.clientx ؛ // موضع الماوس بالنسبة إلى منفذ العرض var y =
السهم الأحمر:
var t = bbox.offsettop ؛ // موضع المربع بالنسبة إلى عرض Viewport var l = bbox.offsetLeft ؛
السهام البرتقالية:
var _left = x - l - bmove.offsetwidth/2 ؛ // حساب موضع Move var _top = y - t -bmove.offsetheight/2 ؛
2. حساب كتلة BIMG
استخدم مقياس كتلة الحركة داخل النطاق المتحرك لتعيين موضع الصورة الكبيرة
مجموعة نقل كتلة التحرك:
bbox.offsetwidth-bmove.offsetwidth
الإحداثيات الحالية لحساب كتلة الحركة للنطاق المتحرك:
var w = _left/(bbox.offsetwidth-bmove.offsetwidth) ؛ // حساب نسبة الحركة var h = _top/(bbox.offsetheight-bmove.offsetheight) ؛
مجموعة حركية BIMG:
b_bimg.offsetheight-bbimg.offsetheight
موقع BIMG:
var b_bimg_top = (b_bimg.offsetheight-bbimg.offsetheight)*h ؛ // حساب موضع الصورة الكبيرة var b_bimg_left = (b_bimg.offsetwidth-bbimg.offsetwidth)*w ؛
المثال البسيط أعلاه لاستخدام JS لتحقيق تأثير الزجاج المكبرة هو كل المحتوى الذي أشاركه معك. آمل أن تتمكن من إعطائك مرجعًا وآمل أن تتمكن من دعم wulin.com أكثر.