jQuery 将选择的 png 组合到一个图像时间轴动画 [英] jQuery combine a selection of pngs to one image timeline animation

问题描述

由于文本上的白色边框以及其他像素化和抖动问题，GIF 图像很难制作动画.所以我决定尽管在 IE 上缺乏对 PNG 的支持，尤其是 fadeIn 或 fadeOut jQuery 对 PNG 的影响导致黑色边框这样做.

我有一个类似的文件夹

/cdn.com/ui/photo/1.png/cdn.com/ui/photo/2.png/cdn.com/ui/photo/3.png

这是我的 HTML 代码，有没有办法添加延迟或以某种方式循环并更改 say 1-38 的源并继续循环它 - 甚至可以自定义延迟?我只是想让它像满载的 gif 一样流畅地循环..

<a href="#"><img src="///cdn.com/ui/photo/1.png"/></a>

这是我的 jQuery

$(function(){变量 i = 0;var 间隔 = setInterval(function(){$('div.m2m_badge a img').attr({ src: '//gc-cdn.com/ui/m2m/' + i + '.png' });我++;如果(我 === 38)清除间隔(间隔)；}, 250);});

演示 - http://jsfiddle.net/tXvuY/13/

解决方案

$(function(){变量 i = 1;var 间隔 = setInterval(function(){$('div.m2m_badge a img').attr({ src: 'http://www.gc-cdn.com/ui/m2m/' + i + '.png' });我++;如果(我 === 38)清除间隔(间隔)；//已显示38张图片，停止间隔}, 50);//每次交换之间50ms});

这是一个演示

最后的工作

要进行连续循环，只需在 interval if

内添加 i=1;

$(function(){变量 i = 1;var 间隔 = setInterval(function(){$('img').attr({ src: 'http://www.gc-cdn.com/ui/m2m/' + i + '.png' });我++;如果(我 === 38)我=1;//解决方案}, 250);});

---

Animation is difficult with GIF images due to white borders on text and other pixelation and dithering issues. So I have decided despite the lack of support for PNG on IE especially fadeIn or fadeOut jQuery effects on PNG causing black borders to do it.

I have a folder like

/cdn.com/ui/photo/1.png
/cdn.com/ui/photo/2.png
/cdn.com/ui/photo/3.png

This is my HTML code, is there anway to add a delay or somehow loop and change the source of say 1-38 and keep looping it - maybe even customize the delay? I just want it to keep looping smoothly like a fully load gif..

<div class="m2m_badge">
    <a href="#"><img src="///cdn.com/ui/photo/1.png"/></a>
</div>

This is my jQuery

$(function()
{
    var i = 0;
    var interval = setInterval(function()
    {
        $('div.m2m_badge a img').attr({ src: '//gc-cdn.com/ui/m2m/' + i + '.png' });
        i++;
        if(i === 38)
            clearInterval(interval);
    }, 250);
});  

Demo - http://jsfiddle.net/tXvuY/13/

解决方案

$(function()
{
    var i = 1;
    var interval = setInterval(function()
    {
        $('div.m2m_badge a img').attr({ src: 'http://www.gc-cdn.com/ui/m2m/' + i + '.png' }); 
        i++;
        if(i === 38)
            clearInterval(interval); //38 images has been shown, stop the interval
    }, 50); //50ms between each swap
});    

Here's a demo

Final working

To have a continuous loop just add i=1; within the interval if

$(function()
{
    var i = 1;
    var interval = setInterval(function()
    {
        $('img').attr({ src: 'http://www.gc-cdn.com/ui/m2m/' + i + '.png' });
        i++;
        if(i === 38)
            i=1; // SOLUTION
    }, 250); 
});   

---

这篇关于jQuery 将选择的 png 组合到一个图像时间轴动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！