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