כיצד ליצור אפקט זכוכית מגדלת באתר

תוֹכֶן

• הוראות
• איך
• שים לב

מתן מבקרים לאתר שלך את ההזדמנות להסתכל על תמונה בפירוט דורש קצת מניפולציה של תמונות אלה. הוספת CSS קטן, JavaScript ו jQuery להרכב אתה יכול ליצור את האפקט של זכוכית מגדלת כמו מצביע העכבר עובר על תמונה בדף שלך. השפעה זו מושגת על ידי יצירת חלון קטן המציג את תמונת הרקע כאשר מצביע העכבר עובר על התמונה המוצגת בחזית.

הוראות

תן למבקרים לאתר שלך "צילום תקריב" של התמונה (Brand X Pictures / Brand X Pictures / Getty Images)

1. כלול JavaScript ו- jQuery בקטע "head" של קוד ה- HTML עם ההנחיות:

   בדוגמה זו, ספריית jQuery ממוקמת בספריית ברירת המחדל של HTML.

2. הוספת תג CDATA כדי למנוע ניסיונות דפדפן לנתח אופרטורים jQuery:

3. הגדר את משתני הגובה והרוחב המשמשים להצגת התמונות:

   var W = 743; var H = 1155; var w = 192; var h = 300;

4. הגדר את התנאים שמתחילים את פונקצית ההגדלה. כאשר נקראת, פונקציה זו מחליפה את מצביע העכבר עם הצגה מעגלית של התמונה המקורה הגדולה ביותר, כאשר המשתמש מרחף מעל התמונה הקטנה המוצגת בדף. צור מופע זה עם הקוד:

   $ (document) .ready (function () {

   ("# זכוכית").

   });

5. הגדר את פונקצית ההגדלה ואת הפרמטרים של הסיום. בדוגמה זו, התמונה המוסתרת מורחבת פי שניים בגודל התמונה הקטנה יותר, וחלון ההגדלה נעלם כאשר מצביע העכבר נע מחוץ לגבולות התמונה הקטנה יותר. תוכל לעשות זאת באמצעות הקוד:

   
   

   הפונקציה myMM (e) {var myImage = $ ("# myimage"); var glassImage = $ ("# glass-image"); זכוכית var = $ ("# זכוכית"); var xs = e.pageX - myImage.offset (). var ys = e.pageY - myImage.offset (). (x) / xxW / w; () / 2 - ysH / h; ("למעלה", e.pageY-75-10 + "px"); glassImage.css ("מיקום הרקע", bx + "px" + על-ידי "px"); אם (bx <-W | על ידי <-H || bx> 150 || by 150) {myImage.unbind ('mousemove', myMM); glass.fadeOut ('מהיר'); }}

6. סגור את התסריט "jQuery" ומחק את מנתח ה- CDATA עם ההוראות:

   // ]]>

7. הגדר את פריסת הדף ב- CSS כדי למקם את תמונת הרקע הגדולה יותר וחלון ההגדלה מגביל את הקוד:

   type = "text / css"> #monaimage {margin-left: 200px; } #glass {background-repeat: no-repeat; רקע מיקום: למעלה משמאל; רוחב: 250px; גובה: 170px; padding-top: 10px; ריפוד-שמאל: 89px; שוליים: 0; תפקיד מוחלט התצוגה: none; } # glass-image {background-image: url ('myImageLarge.jpg'); רוחב: 150px; גובה: 150px; border-radius: 75px; -moz-border-radius: 75px; רקע-לחזור: לא לחזור; צבע רקע: #fff; שוליים: 0; ריפוד: 0; הסמן: none; }

8. כתוב את קוד ה- HTML כדי להציג את הדף בקטע 'גוף':

   
   

   >

   הזז את העכבר מעל התמונה

   

איך

• קוד זה תלוי ב- CSS3 כדי ליצור שדה הגדלה עגול וייתכן שלא יפעל בדפדפנים ישנים יותר. עבור תאימות לאחור עם יישומי CSS ישנים יותר, הגדר שדה מלבני עבור "# זכוכית-תמונה" (זכוכית מגדלת).

שים לב

• ללא תגי CDATA, דפדפנים מנסים לנתח אופרטורים פחות מ <"" וגבוהים מ ">" כתגי HTML. תמיד לערב JavaScript ו מפעילי jQuery עם תגי CDATA, כדי למנוע כישלונות "סקריפט".