JavaScript: GIFless animation. JavaScript: GIFless animation. Animate images,logos with jQuery Animate εικόνες, λογότυπα με jQuery
Posted on 23. Καταχωρήθηκε στις 23. Jul, 2009 by Dragos in Coding , Design , JavaScript & Ajax Ιούλιος, 2009 από Dragos στο Κωδικοποίηση, Design, JavaScript & Ajax
After playing some time with position relative and absolute, I've noticed one a great aspect of the png image format (probably gif images are also good, but since we are trying to create a GIFless animation, I won't use any gif images in this tutorial). Μετά από αρκετό καιρό παίζει με τη θέση της σχετικής και απόλυτης, έχω παρατηρήσει μία μεγάλη πτυχή του png μορφή εικόνας (πιθανώς gif εικόνες είναι επίσης καλή, αλλά επειδή προσπαθούμε να δημιουργήσουμε ένα GIFless κινούμενα σχέδια, εγώ δεν θα χρησιμοποιήσει κάθε gif εικόνες σε αυτό το σεμινάριο).
So here's aa PNG (transparent text), with the name of this website: PNG αα Τόσο εδώ είναι (διαφανές κείμενο), με το όνομα της ιστοσελίδας:
Transparent Logo Διαφανής Logo
The trick of animating images, without the need of using the GIF image format features, are as follow: Το τέχνασμα της εμψύχωση εικόνες, δεν την ανάγκη της χρήσης του GIF χαρακτηριστικά μορφή εικόνας, έχουν ως εξής:
We have an image with transparent text written on it. Έχουμε μια εικόνα με διαφανή κείμενο γραμμένο σε αυτό. To animate the transparent text, we need to place a background image below the actual image and move this background image, in order to create a so called “animation”. Για την κίνηση του διαφανές ενιαίο κείμενο, θα πρέπει να τοποθετήσετε μια εικόνα φόντου κάτω από την πραγματική εικόνα και κίνηση αυτή την εικόνα φόντου, προκειμένου να δημιουργηθεί ένα λεγόμενο "animation". To be more precise, the image we want to be animated should have a higher z-index than the background image below it (it's like working with layers in Photoshop). Για να γίνω πιο σαφής, η εικόνα που θέλουμε να είναι κινούμενα σχέδια πρέπει να έχουν υψηλότερο z-δείκτη από την εικόνα φόντου κάτω από αυτό (είναι σαν να εργάζονται με στρώματα στο Photoshop). In order to animate the background image we need some javascript work to be done. , Για να τονώσουν την εικόνα φόντου που χρειαζόμαστε ορισμένες javascript εργασίες που πρέπει να γίνουν. Of course, as a big fan of jQuery, I've used jQuery to do all the animation stuff. Φυσικά, ως οπαδός της jQuery, έχω χρησιμοποιήσει jQuery να κάνει όλα τα πράγματα animation.
Here's the script I've come up with: Εδώ είναι το σενάριο που έχω καταλήξει σε:
(function($){ (function ($) ( $.fn.enliven = function(options) { $. fn.enliven = λειτουργία (options) ( var defaults = { var defaults = ( bgImage: '', bgImage:'', duration:3000 διάρκεια: 3000 }; )? var options = $.extend(defaults, options); var options = $. επέκταση (προεπιλογές, επιλογές)? var imH=this.attr("height"), var imh = this.attr ( "ύψος"), imW=this.attr("width"); imw = this.attr ( "πλάτος")? this.wrap(' this.wrap ( ' '); ')? this.css("position","absolute"); this.css ( "θέση", "απόλυτο")? $('#'+this.attr("className")+'Cont').append(' $('#'+ this.attr ( "className") + 'Cont'). append ( " '); ')? var var maxLeft=($('.lbg'+this.attr("className")).attr('clientWidth')-this.attr('width'))/2, maxLeft LBG =($('. '+ this.attr ( "className")). attr clientWidth (')-this.attr ( «πλάτος»)) / 2, maxTop=($('.lbg'+this.attr("className")).attr('clientHeight')-this.attr('height'))/2; maxTop LBG =($('. '+ this.attr ( "className")). attr clientHeight (')-this.attr ( «ύψος»)) / 2? function getrand() { getrand λειτουργία () ( var nr=Math.floor(Math.random()*2); var nr = Math.floor (Math.random () * 2)? return nr==0?-1:1; nr επιστροφή == 0? -1:1? } ) function randimate(obj) { randimate λειτουργία (obj) ( var ph=Math.floor(imH*20/100),pw=Math.floor(imW*20/100); var pH = Math.floor (imh * 20/100), pw = Math.floor (imw * 20/100)? newLeft=$(".lbg"+obj.attr("className")).attr("offsetLeft")+Math.floor(Math.random()*pw)*getrand(); newLeft LBG =$(". "+ obj.attr (" className ")). attr (" offsetLeft ") + Math.floor (Math.random () * pw) * getrand ()? newTop=$(".lbg"+obj.attr("className")).attr("offsetTop")+Math.floor(Math.random()*ph)*getrand(); newTop LBG =$(". "+ obj.attr (" className ")). attr (" offsetTop ") + Math.floor (Math.random () * pH) * getrand ()? if(newLeft>0) newLeft=0; εάν (newLeft> 0) newLeft = 0? else if(newLeft<-maxLeft) newLeft=-maxLeft+1; if(newTop>0) newTop=0; else if (newLeft <-maxLeft) newLeft =- maxLeft 1? εάν (newTop> 0) newTop = 0? else if(newTop<-maxTop) else if (newTop <-maxTop) newTop=-maxTop+1; newTop =- maxTop 1? $('.lbg'+obj.attr("className")).animate({left:newLeft+"px",top:newTop+"px"},defaults.duration,"linear",function(){ randimate(obj); }); $. LBG ( " '+ obj.attr (" className ")). κίνηση ((αριστερά: newLeft +" px ", top: newTop +" px "), defaults.duration," γραμμική ", function () (randimate (obj )?))? } ) return this.each(function(){ this.each return (function () ( randimate($(this)); randimate ($ (αυτό))? }); ))? }; )? })(jQuery); )) (jQuery)?
The code above works as a plugin of jQuery, so it should be included in the page, after the inclusion of jQuery. Ο παραπάνω κώδικας λειτουργεί ως ένα plugin jQuery του, γι 'αυτό θα πρέπει να συμπεριληφθεί στην σελίδα, μετά την ένταξη της jQuery. In order to animate an image, you should use this code: , Για να τονώσουν μια εικόνα, θα πρέπει να χρησιμοποιήσετε αυτόν τον κώδικα:
$('image_selector').enliven({bgImage:"./path_to_background_image.png",duration:1000}); //duration is the time of one time background animation $ image_selector ( ''). ζωντανεύω ((bgImage: ". / path_to_background_image.png", διάρκεια: 1000))? / / διάρκεια είναι η ώρα του ενός animation ιστορικό χρόνο Here's a crazy example 1: http://iwebdevel.com/wp-content/uploads/2009/07/logo.php Εδώ είναι ένα τρελό παράδειγμα 1: http://iwebdevel.com/wp-content/uploads/2009/07/logo.php
Here's another non-crazy example 2: http://iwebdevel.com/wp-content/uploads/2009/07/logo2.php Εδώ είναι ένα άλλο μη-τρελός παράδειγμα 2: http://iwebdevel.com/wp-content/uploads/2009/07/logo2.php
If you like the idea and want more features, drop me a line in a comment and I'll try to improve the code and add more features Αν σας αρέσει η ιδέα και θέλουν περισσότερα χαρακτηριστικά, πτώση μου μια γραμμή σε ένα σχόλιο και θα προσπαθήσω να βελτιώσει τον κώδικα και να προσθέσει περισσότερα χαρακτηριστικά 
Related posts: Σχετικές θέσεις:
- JavaScript: What if jQuery animation doesn't fire/start? JavaScript: Τι γίνεται αν jQuery κινούμενα σχέδια δεν φωτιά / εκκίνηση;
- JavaScript: How to get the index (position within a group) of an object with jQuery? JavaScript: Πώς να πάρετε το δείκτη (θέση σε μια ομάδα) ενός αντικειμένου με jQuery;
- Javascript: How to validate email address with JavaScript? Javascript: Πώς να επικυρώσετε τη διεύθυνση ηλεκτρονικού ταχυδρομείου με JavaScript;
- JavaScript: Get anchor from URL JavaScript: Πάρτε άγκυρα από URL
- JavaScript: Send function as a parameter to another function (callbacks) JavaScript: Αποστολή λειτουργεί ως παράμετρος σε μια άλλη λειτουργία (callbacks)
