غالبًا ما توجد منطقة عرض للمنتج على صفحة المنتج في موقع التسوق. وظيفة واحدة في منطقة الصورة هذه هي وظيفة التكبير لصورة المنتج. انقل منطقة التركيز على اليسار لتكبير التفاصيل وعرض التفاصيل. التفاصيل كما يلي. طريقة تنفيذ هذه الوظيفة بسيطة للغاية.
التجربة: صنع صورة مكبرة لتركيز المنتج.
المهارات المطلوبة:
1. الطرق الأساسية للحصول على عناصر الصفحة ؛
2. بعض الأحداث البسيطة ؛
3. سوف تستخدم DOM لتعيين سمات العنصر ؛
مبدأ القضية:
1. اتبع حدث الماوس من مربع التركيز ؛
2. اللوائح على المنطقة المتحركة لصندوق التركيز ؛
3. عرض محتويات الصناديق الكبيرة ؛
مناسب لـ: JS Beginners
-------------------------------------------------------------------يبدأ! ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
1. أولاً ، نقوم بإعداد نمط CSS. العديد من النقاط التي يجب الانتباه إليها في نمط CSS هي:
(1) خريطة التركيز تتعلق بالموضع ، الشاشة الافتراضية: لا شيء ؛
(2) المربع الذي يوضح الصورة الكبيرة على اليمين (المشار إليها فيما يلي باسم إطار الصورة الكبير) العرض الافتراضي: لا شيء ؛ يجب إخفاء المحتوى الموجود في إطار الصورة الكبير بعد الفائض: مخفي ؛
2. ابدأ في كتابة رمز البرنامج النصي:
(1) احصل أولاً على عنصر الصفحة:
// أولاً وقبل كل شيء ، يتم تشغيل وظيفة العنصر (TAG) {// تحديد طريقة للحصول على عناصر ذات معرف ، مما يقلل من الكثير من عبء العمل! return document.getElementById (tag)} var box = getId ("box") ؛ var small = getId ("صغير") ؛ var mask = getId ("Mask") ؛ var big = getId ("big") ؛ var pic = big.children [0] ؛ // هنا للحصول على عناصر من خلال طريقة العقدة(2) تأكد من ظهور حدثين عندما ينتقل الماوس إلى الصورة الصغيرة: 1) يجب عرض مربع التركيز ؛ 2) يجب إظهار مربع الصورة الكبير. وبالمثل ، بعد إزالة الماوس ، يجب إلغاء هاتين الأوراق.
// يظهر اثنان عند تحريك الماوس إلى الصورة الصغيرة. big.style.display = "block" ؛ } small.onmouseout = function () {mask.style.display = "none" ؛ big.style.display = "none"}(3) اضبط ما يلي مربع التركيز:
1) عندما يتم تعيين مربع التركيز ، فإن وقت متابعة لدينا هو حقيقة ، وبالتالي فإن نوع الحدث هنا ليس onMouseover ؛ لكن onmousemove
2) المشكلة التي ينطوي عليها هذا الرمز هي أساسا مشكلة حساب تحديد موقع القناع. المشكلة التي يسهل تجاهلها هي التي يتحرك موقع القناع؟ في نمط CSS الخاص بي ، يتم وضع القناع في المربع الصغير ، لذلك يجب أن يكون الموضع النسبي المتحرك هو موضع العنصر الأصل الصغير الذي تم وضعه. لذا ، لا يمكن استخدام الإحداثيات التي أحصل عليها مع ClientX والعميل بالنسبة للنافذة الحالية للمتصفح مباشرة ، ويجب طرح تأثير قيمة الهامش في المربع الأم.
// قم بتعيين مربع التركيز للصورة الصغيرة واتبع الماوس ؛ small.onmousemove = function (e) {var marginl = box.offsetleft ؛ // استخدم طريقة OffsetLeft للحصول على الهامش اليسرى من المربع var margint = box.offsettop ؛ // استخدم طريقة OffSettop للحصول على الهامش في المربع var currentx = e.clientx ؛ var currenty = e.clienty ؛ // استخدم E.Clinety و E.clinety بالنسبة إلى الزاوية اليسرى العلوية من المتصفح var x = currentx-marginl mask.offsetwidth/2 ؛ var y = currenty-margint mask.offsetheight/2 ؛ // لمحاذاة مركز مربع التركيز مع الماوس ، تحتاج إلى طرح نصف عرض وارتفاع التركيز صندوق/---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------(4) حركة موضع مربع التركيز الخمول
1) بعد الانتهاء من الخطوة السابقة ، فإن حركة مربع التركيز ليست في وضع الخمول. أثناء عملية تصفح موقع التسوق ، يمكننا أن نشعر بوضوح أن مربع التركيز لا يسمح بالحركة خارج الصورة الصغيرة ، مما يسبب تجربة مستخدم سيئة ؛
2) للحد من حركة مربع التركيز ، وخاصة عندما يتجاوز التغيير x و y القيمة المسموح بها ، أعطها قيمة ثابتة ؛
// قم بتعيين مربع التركيز للصورة الصغيرة واتبع الماوس ؛ small.onmousemove = function (e) {var marginl = box.offsetleft ؛ var margint = box.offsettop ؛ var currentx = e.clientx ؛ var currenty = e.clienty ؛ var x = currentx-marginl mask.offsetwidth/2 ؛ var y = currenty-margint mask.offsetheight/2 ؛ // قم بتعيين المنطقة المتحركة لمربع التركيز إذا (x <0) {x = 0 ؛} if (x> small.offsetwidth mask.offsetwidth) {x = small.offsetwidth mask.offsetwidth} ؛ . وينطبق الشيء نفسه على المحور y إذا (y <0) {y = 0 ؛} if (y> small.offsetheight mask.offsetheight) {y = small.offsetheight mask.offsetheight} ؛ mask.style.left = x+"px" ؛ // لاحظ أن المنطقة المتحركة مكتوبة بعد تحديد منطقة الحركة ، وتنتبه إلى ترتيب تنفيذ Code Mask.style.top = y+"px" ؛(5) اضبط عرض الصور الكبيرة
1) أن تدرك حركة الصورة في المربع الكبير ، يجب أن تفكر في قيمة -Margin ؛
2) مقدار المسافة التي يمكنك نقلها يمكن استخدامها لضرب القيم اليسرى والأعلى للقناع بنسبة ثابتة. فكر في الموضع المعروض في الركن الأيسر العلوي من منطقة التركيز والركن الأيسر العلوي من إطار الصورة الكبير هو نفسه! ! ! هذا ليس من الصعب للغاية فهمه.
// قم بتعيين المحتوى المعروض في Big Box var repisterx = mask.offsetleft ؛ var reportipy = mask.offsettop ؛ var proporationx = pic.offsetWidth/small.offsetWidth ؛ // قم بتعيين نسبة var proporationy = pic.offsetheight/small.offsetWidth ؛ pic.style.marginleft = -relativex*procorix+"px" ؛ //ملحوظة! يجب أن تكون قيمة الهامش سلبية ، "px لا ترمي بعيدا pic.style.margintop = -reliativey*proporationy+" px "؛
في هذه المرحلة ، انتهى العرض التوضيحي الخاص بنا! أليس هذا بسيط جدا
سوف ألصق الرمز بأكمله أدناه ، على أمل مناقشةكم والتواصل معك.
هنا رمز CSS
<style> * {margin: 0 ؛ الحشو: 0 ؛ } #box {margin: 50px ؛ } #small {width: 229px ؛ الارتفاع: 250 بكسل ؛ الحدود: 1 بكسل سوداء صلبة. محاذاة النص: المركز ؛ الموقف: قريب تعويم: اليسار. } #mask {width: 100px ؛ الارتفاع: 100px ؛ خلفية اللون: RGBA (214 ، 111 ، 193 ، 0.3) ؛ الموقف: مطلق ؛ أعلى: 0 ؛ اليسار: 0 ؛ /*Display: None ؛*/} #big {width: 350px ؛ الارتفاع: 350 بكسل ؛ الحدود: 1 بكسل سوداء صلبة. تعويم: اليسار. الفائض: مخفي. /*العرض: لا شيء ؛*/} </style>هنا هو HTML
<Body> <div id = "box"> <div id = "small"> <img src = "small_img.jpg"/> <div id = "mask"> </viv> </viv> <div id = "big"> <img src = "big_img.jpg"/> </div>
هنا رمز JS
<script> // أولاً وقبل كل شيء ، فإن العنصر المراد تشغيله getId (tag) {return document.getElementById (tag)} var box = getId ("box") ؛ var small = getId ("صغير") ؛ var mask = getId ("Mask") ؛ var big = getId ("big") ؛ var pic = big.children [0] ؛ console.log (pic) ؛ // ينتقل الماوس إلى الصورة ويظهر تأثيران صغيران. big.style.display = "block" ؛ } small.onmouseout = function () {mask.style.display = "none" ؛ big.style.display = "none"} // قم بتعيين مربع التركيز للصورة الصغيرة واتبع الماوس ؛ small.onmousemove = function (e) {var marginl = box.offsetleft ؛ var margint = box.offsettop ؛ var currentx = e.clientx ؛ var currenty = e.clienty ؛ var x = currentx-marginl mask.offsetwidth/2 ؛ var y = currenty-margint mask.offsetheight/2 ؛ // قم بتعيين المنطقة المتحركة لمربع التركيز إذا (x <0) {x = 0 ؛} if (x> small.offsetwidth mask.offsetwidth) {x = small.offsetwidth mask.offsetwidth} ؛ if (y <0) {y = 0 ؛} if (y> small.offsetheight mask.offsetheight) {y = small.offsetheight mask.offsetheight} ؛ mask.style.left = x+"px" ؛ mask.style.top = y+"px" ؛ // قم بتعيين المحتوى المعروض في المربع الكبير var repisterx = mask.offsetleft ؛ var reportipy = mask.offsettop ؛ var reportipy = mask.offsettop ؛ var proporationx = pic.offsetWidth/small.offsetWidth ؛ var proporationy = pic.offsetheight/small.offsetWidth ؛ pic.style.marginleft = -relativex*procorix+"px" ؛ pic.style.margintop = -reliativey*proporationy+"px" ؛ } </script>ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.