JavaScript: GIFless animation. JavaScript的：GIFless动画。 Animate images,logos with jQuery 动画图像，标识与jQuery

Posted on 23.发布23。 Jul, 2009 by Dragos in Coding , Design , JavaScript & Ajax 2008年7月，2009年在编码 ， 设计 ，JavaScript的与阿贾克斯 德拉戈什

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:所以这里的AA巴布亚新几内亚（透明文本），与本网站名称：

Transparent 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”.以动画的透明文本，我们需要将低于实际的图像背景图像和提出这个背景图片，以创造一个所谓的“动画”。 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来完成所有的动画东西。

Here's the script I've come up with:下面是我想出的脚本：

(function($){ $.fn.enliven = function(options) { var defaults = { bgImage: '', duration:3000 }; var options = $.extend(defaults, options); var imH=this.attr("height"), imW=this.attr("width"); this.wrap(' '); this.css("position","absolute"); $('#'+this.attr("className")+'Cont').append(' '); var maxLeft=($('.lbg'+this.attr("className")).attr('clientWidth')-this.attr('width'))/2, maxTop=($('.lbg'+this.attr("className")).attr('clientHeight')-this.attr('height'))/2; function getrand() { var nr=Math.floor(Math.random()*2); return nr==0?-1:1; } function randimate(obj) { 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(); newTop=$(".lbg"+obj.attr("className")).attr("offsetTop")+Math.floor(Math.random()*ph)*getrand(); if(newLeft>0) newLeft=0; else if(newLeft<-maxLeft)                         newLeft=-maxLeft+1;                     if(newTop>0) newTop=0; else if(newTop<-maxTop) newTop=-maxTop+1; $('.lbg'+obj.attr("className")).animate({left:newLeft+"px",top:newTop+"px"},defaults.duration,"linear",function(){ randimate(obj); }); } return this.each(function(){ randimate($(this)); }); }; })(jQuery); （函数（$）（$。fn.enliven =功能（选项）（VAR的默认值=（bgImage：''，时间：3000）; VAR的选项= $。扩展（默认设置，选项）;无功imH = this.attr（ “高”），谷蛋白= this.attr（“宽度”）; this.wrap（''）; this.css（“位置”，“绝对”）; $('#'+ this.attr（“类名” ）+'续）。追加（''）;无功maxLeft =($('.的LBG'+ this.attr（“类名”））。的Attr（'clientWidth'）- this.attr（'宽'）） / 2，maxTop =($('.的LBG'+ this.attr（“类名”））。的Attr（'clientHeight'）- this.attr（'高'））/ 2;功能getrand（）（VAR的星期日= Math.floor（Math.random（）* 2）;返回星期日== 0？-1:1;）功能randimate（目标）（VAR的pH值= Math.floor（imH * 20/100），晚上= Math.floor （谷蛋白* 20/100）; newLeft =$(".的LBG“+ obj.attr（”类名“））。的Attr（”offsetLeft“）+ Math.floor（Math.random（）*密码）* getrand（） ; newTop =$(".的LBG“+ obj.attr（”类名“））。的Attr（”offsetTop“）+ Math.floor（Math.random（）* pH值）* getrand（），如果（newLeft”0） newLeft = 0;否则如果（newLeft“，maxLeft）newLeft =- maxLeft 1，如果（newTop”0）newTop = 0;否则如果（newTop“，maxTop）newTop =- maxTop 1，$（'。LBG算法' + obj.attr（“类名”））。动画（（左：newLeft +“像素”，顶部：newTop +“像素”），defaults.duration，“线性”，函数（）（randimate（目标）;））;）返回this.each（函数（）（randimate（$（本））;））;）））（jQuery的）; 

The code above works as a plugin of jQuery, so it should be included in the page, after the inclusion of jQuery.上面的这些作品的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））; / /时间是一个时代背景的动画时间 

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:相关岗位：

1. JavaScript: What if jQuery animation doesn't fire/start? JavaScript的：如果jQuery的动画不火/开始？
2. JavaScript: Get anchor from URL JavaScript的：从网址锚
3. JavaScript: How to get the index (position within a group) of an object with jQuery? JavaScript的：如何获取指数（位置在一组与jQuery对象）？
4. Javascript: How to validate email address with JavaScript? JavaScript的：如何用JavaScript验证电子邮件地址？
5. JavaScript: Send function as a parameter to another function (callbacks) JavaScript的：寄另一个函数（回调参数功能）