المحتوى
إن إتاحة الفرصة للزائرين لموقع الويب الخاص بك لإلقاء نظرة على الصورة بالتفصيل يتطلب بعضًا من هذه الصور. بإضافة القليل من CSS و JavaScript و jQuery إلى التكوين ، يمكنك إنشاء تأثير العدسة المكبرة أثناء تحرك مؤشر الماوس فوق صورة على صفحتك. يتحقق هذا التأثير من خلال إنشاء نافذة صغيرة تعرض صورة الخلفية عندما يتحرك مؤشر الماوس فوق الصورة المعروضة في المقدمة.
الاتجاهات
-
قم بتضمين JavaScript و jQuery في قسم "head" من كود HTML مع التعليمات:
في هذا المثال ، توجد مكتبة jQuery في دليل HTML الافتراضي.
-
أدخل علامة CDATA لمنع محاولات المتصفح تحليل عوامل تشغيل jQuery:
-
اضبط متغيرات الطول والعرض المستخدمة لعرض الصور:
var W = 743؛ var H = 1155؛ var w = 192؛ فار ح = 300 ؛
-
اضبط الشروط التي تبدأ وظيفة التكبير. عند الاتصال ، تستبدل هذه الوظيفة مؤشر الماوس بمشاهد دائري لأكبر صورة مغطاة ، عندما يحوم المستخدم فوق الصورة الأصغر التي تظهر على الصفحة. قم بإنشاء هذا المثيل باستخدام الكود:
$ (مستند). جاهزة (دالة () {
$ ("# myimage"). mouseover (function (e) {$ (document) .mousemove (myMM)؛ $ ("# glass"). fadeIn ('fast')؛
});
-
اضبط وظيفة التكبير ومعايير الإنهاء. في هذا المثال ، يتم تكبير الصورة المخفية بمقدار ضعف حجم الصورة الأصغر ، وتختفي نافذة التكبير عندما يتحرك مؤشر الماوس خارج حدود الصورة الأصغر. يمكنك القيام بذلك باستخدام الكود:
function myMM (e) {var myImage = $ ("# myimage")؛ var glassImage = $ ("# glass-image")؛ فار الزجاج = $ ("# زجاج") ؛ var xs = e.pageX - myImage.offset (). left؛ var ys = e.pageY - myImage.offset (). top؛ var bx = glassImage.width () / 2 - xsث / ث ؛ var بواسطة = glassImage.height () / 2 - ysح / ح ؛ glass.css ("left" ، e.pageX-75-89 + "px"). css ("top"، e.pageY-75-10 + "px")؛ glassImage.css ("background-position"، bx + "px" + by + "px")؛ if (bx <-W || بواسطة <-H || bx> 150 || by> 150) {myImage.unbind ('mousemove'، myMM)؛ glass.fadeOut ('سريع') ؛ }}
-
أغلق jQuery "script" وحذف محلل CDATA مع الإرشادات:
// ]]>
-
اضبط تخطيط الصفحة باستخدام CSS لوضع صورة الخلفية الأكبر وحدود نافذة التكبير مع الكود:
اكتب = "text / css"> #monaimage {margin-left: 200px؛ } #glass {background-تكرار: no-تكرار؛ خلفية الموقف: أعلى اليسار. العرض: 250 بكسل ؛ الارتفاع: 170 بكسل ؛ الحشو أعلى: 10px. الحشوة إلى اليسار: 89 بكسل ؛ الهامش: 0 الموقف: مطلق ؛ عرض: لا شيء ؛ } # glass-image {background-image: url ('myImageLarge.jpg')؛ العرض: 150 بكسل ؛ الارتفاع: 150 بكسل ؛ نصف قطر الحدود: 75 بكسل ؛ - الحد من دائرة نصف قطرها: 75px ؛ تكرار الخلفية: عدم التكرار ؛ لون الخلفية: #fff؛ الهامش: 0 الحشو: 0؛ المؤشر: لا شيء ؛ } -
اكتب كود HTML لعرض الصفحة في قسم "النص الأساسي":
>
حرك الماوس فوق الصورة
نصائح
- يعتمد هذا الرمز على CSS3 لإنشاء حقل تكبير دائري وقد لا يعمل في المتصفحات القديمة. للتوافق مع الإصدارات السابقة مع تطبيقات CSS الأقدم ، قم بتعيين حقل مستطيل لـ "# glass-image" (عدسة مكبرة).
تحذير
- بدون علامات CDATA ، تحاول المتصفحات تحليل عوامل التشغيل أقل من "<" وأكبر من ">" كعلامات HTML. قم دائمًا بإشراك مشغلي JavaScript و jQuery بعلامات CDATA لتجنب فشل "البرنامج النصي".