30 Μαρ 2009
Πώς να κάνει μια όμορφη γκαλερί χαρτοφυλάκιο χρησιμοποιώντας jQuery Κίνηση!
Δημοσιεύτηκε από: Mahbub Σε: Διάφορα
Κάνοντας μια σελίδα του χαρτοφυλακίου με το Flash στον ιστότοπό σας έχει γίνει είδος των παρωχημένων. Αυτές τις μέρες με Ταχύτερη και μηχανήματα νέας γενιάς πρόγραμμα περιήγησης μπορεί να κλωτσήσει κάποια πραγματικά κώλο με Javascript και CSS. JQuery έχει πολύ κομψό τρόπο να ασχοληθώ με ορισμένα αποτελέσματα. Όλες οι κινήσεις απορρέουν από τη μέθοδο που ονομάζεται βάση «έμψυχα». Είναι ζωντανεύει, tweens τις ιδιότητες του DOM στοιχεία. Για να κάνετε τη μακρά ιστορία σύντομη λάβει μια ματιά σε αυτό.
Έτσι, έχετε ήδη επιλέξει και είδε σωστά; Εντάξει, αν κοιτάξετε τον κώδικα, είναι αρκετά απλό.
$ (Έγγραφο). Έτοιμο (λειτουργία () { var hover_in_easing = "easeOutExpo"? var hover_out_easing = "easeOutBounce"? . $ (". Info_container») δείχνουν ()? $ ("Div.portfolio_div"). Αιωρούνται (λειτουργία () { . $ (Αυτό) βρει ("info_container.») Κίνηση ({κορυφή: "0px"}, {διάρκεια: 400, χαλάρωση: hover_in_easing}).? }, Λειτουργία () { . $ (Αυτό) βρει ("info_container.») Κίνηση ({κορυφή: "100px"}, {διάρκεια: 500, χαλάρωση: hover_out_easing}).? })? / / Η 100 px είναι το μέγεθος της μάσκας })?
Χρησιμοποιεί έμψυχο λειτουργία για να εμψυχώσει τη μάσκα πάνω από την εικόνα που κρατιέται κρυφό από τη θέση σχετικά. Και με τη χαλάρωση των plugin, να πετύχουμε κάποιο δροσερό αποτέλεσμα γερός όταν περνάτε έξω από την εικόνα. Μπορείτε να βάλετε οποιοδήποτε HTML μέσα στα στοιχεία DIV info_container όσο δεν πάει πέρα από τα σύνορα. Κοιτάξτε το στυλ και θα το βρείτε πολύ gramatical. Μπορείτε να προσαρμόσετε τα μεγέθη, τροποποιώντας τις τάξεις div.
Έμπνευση: http://dibusoft.com/portfolio
Πρόσφατα σχόλια