כדי להגדיל את התמונות ב - Hover

אם אי פעם דפדפת באתר מסחר אלקטרוני סביר להניח שאתה רואה את זה תמונה זום אפקט. אתה מעביר את תמונת המוצר ואת החלק הזה של התמונה מגדיל עבור a תצוגה ברורה יותר.

ה ZOOM תוסף היא דרך מצוינת לשכפל את האפקט הזה באתר שלך. זה מופעל על ידי jQuery, כך שתוכל לקבל את זה ולהפעלתו במהירות ללא קוד רב.

ZooMove הוא לגמרי בחינם וקוד פתוח, זמין על גייתוב עבור כל מפתחים סקרן. זה יכול להיות מותקן דרך npm, באואר, חוט, או להוריד ישירות מ CDNJS.

כדי להגדיר תמונת ZooMove, תזדקק שלושה קבצים ספציפיים בכותרת הדף שלך:

1. jQuery
2. ZOOM הסר CSS
3. גן חיות

שני קובצי ZooMove יכול להיות מוקטן אם אתה רוצה לטעון דף מהיר יותר. ניתן גם לשלב את קובץ ה- CSS לגיליון הסגנונות הראשי שלך אם זה קל יותר.

כל הקסם האמיתי קורה ב- HTML שבו אתה יכול הגדר HTML5 נתונים * תכונות עבור ההשפעות השונות.

זה מאפשר לך לעצב את שלך משלך אפקט זום מותאם אישית - - בהתבסס על ארבעה פרמטרים שונים:

1. נתונים- zoo בקנה מידה - מגדיר את גודל הזום הכולל בעת ריחוף (למשל 2.0 עבור 200%)
2. העברת נתונים בגן החיות - מגדיר אם התמונה נע עם הסמן
3. נתונים- zoo-over - מגדיר את התמונה המוגדלת מופיעים מעל המקור
4. נתונים- zoo-cursor - מגדיר את נקודת הסמן

פרמטר חמישי סופי מאפשר לך להגדיר מה כתובת אתר חדשה של תמונה צריך להיות (אם יש צורך).

ניתן להשתמש ZooMove בכל הדפדפנים העיקריים, כולל IE9 +. תוסף זה נתמך באופן נרחב והוא מציע אחד לעזאזל של חוויית המשתמש.

אם אתה מחפש פשוט לרחף- to-zoom הספרייה ZooMove היא בחירה מצוינת. זה קל מספיק לרוץ על כל אתר וזה מופעל על ידי jQuery, אז אתה לא צריך לכתוב כמה שיותר קוד כדי לקבל את זה עובד.

בקר בדף הראשי כדי לראות אותו בפעולה ולבדוק את התיעוד על GitHub כדי ללמוד עוד.