Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >jQuery GIF动画

jQuery GIF动画
EN

Stack Overflow用户
提问于 2009-10-27 03:13:06
回答 6查看 11.8K关注 0票数 5

我希望使用jQuery来消除使用GIF来创建一个相当简单的动画的需要。

我想要的是一个有四个阶段的图像。1)没有显示2)图像的第一部分3)图像的第二部分4)图像的第三部分-从头开始

我在想,我需要创建图像阶段,然后使用jQuery的“用下一个图像替换当前图像”技术来创建动画。使用回调可以很容易做到这一点。

下一部分是在前一个动画完成加载后,让这个动画出现在几个地方。再说一次,使用回调可能很容易。

我正在寻找一些关于这个的想法。不使用GIF是不是很愚蠢?或者,这可以用jQuery完成吗?

EN

回答 6

Stack Overflow用户

发布于 2011-03-11 14:37:47

这要容易得多,并保持了链式能力:

JQuery:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$(document).ready(function(){
    //rotator - delay, children
    $('#slideshow').rotator(50, 'img');
});

标记:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script type="text/javascript" src="scripts/jquery.rotator.js"></script>

<style type="text/css">
#slideshow {
    position:absolute; //or whatever you need
    display:block;
    top:0px;
    left:0px;
}
#slideshow img {
    position:absolute;
    opacity:0;
}
</style>

<!-- SLIDESHOW -->
<div id="slideshow">
  <img src="images/1.png">
  <img src="images/2.png">
  <img src="images/3.png">
</div>

插件:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
(function( $ ){
    $.fn.rotator = function(delay, child){
        //set curImage val
        var currImg = 0;
        var currIt = true;
        //set array of images
        var ss = $('#slideshow').children(child);
        var ssize = ss.size();
        setInterval(function() {
            if(currIt){
                $(ss[currImg]).css('opacity','1');
                currIt = !currIt;
            }else if (!currIt){
                $(ss[currImg]).css('opacity','0');
                $(ss[currImg+1]).css('opacity','1');
                currIt = !currIt;
                currImg++;
            }
            //reset
            if(currImg >= ssize){
                currImg = 0;
                $(ss[currImg]).css('opacity','1');
            }
        }, delay);
        return this;
    };
})(jQuery);
票数 3
EN

Stack Overflow用户

发布于 2009-10-27 03:53:08

查看this page for a demo获取jquery的背景动画,查看this获取其教程。

西南。

票数 1
EN

Stack Overflow用户

发布于 2009-10-27 03:40:21

首先你可以使用几个div的背景,把你需要的那部分图片

css_background-position

然后,您必须根据您需要的动画类型显示需要显示的div。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/1628576

复制
相关文章
Android 播放gif动画
Android只能调用PNG的图片,但想调用Gif的动态图片就比较麻烦;近日发现一个神器可以在Android里直接调用Gif,如此神器只需简单的几步就可以了。简直是我等小辈的好帮手。
谭广健
2019/10/24
1.6K0
jQuery 编程 | jQuery 动画
jQuery提供了一些列的动画基本方法,同时也提供了自定动画方案.animate()。
闻说社
2022/08/10
6.1K0
jQuery 动画
jQuery动画相关方法概况 方法 说明 实例 hide()和show() 隐藏和显示 HTML 元素。 $("#hide").click(function(){    
静默虚空
2018/01/05
2.8K0
JavaScript 动画_jquery 动画
回调函数原理:函数可以作为一个参数。将这个函数作为参数传到另一个函数里面,当那个函数执行完之后,再执行传进去的这个函数,这个过程叫做回调。
全栈程序员站长
2022/11/04
2.4K0
Python通过matplotlib包和gif包生成gif动画
使用matplotlib生成gif动画的方法有很多,一般常规使用matplotlib的animation模块的FuncAnimation函数实现。在matplotlib官网看到了第三方动画包gif的介绍。
用户9925864
2022/07/27
2.2K0
Python通过matplotlib包和gif包生成gif动画
jQuery动画,案例
1.显示动画 show([s,[e],[fn]]) 内部实现原理根据当前操作的元素是块级还是行内决定, 块级内部调用display:block;,行内内部调用display:inline;
不愿意做鱼的小鲸鱼
2022/08/24
5K0
jQuery动画,案例
jquery animate 动画
点击动画的按钮,div的宽高就会放大。这次的放大是同时实现了width和height的变化。
Devops海洋的渔夫
2019/05/30
2.3K0
Python 技术篇-3行代码实现Gif动画生成,Gif动画素材获取方法
我们需要用到 imageio 库,直接pip install imageio就安装了。 原理就是把很多个图片在规定时间内依次展示,就变为我们所见到的动画样式了。
小蓝枣
2020/09/23
2.7K0
js动画效果大全_jquery 动画
在一些动画设置中,我们可以用CSS中已有的动画属性方便的设置动画效果,比如说animation动画,transition过渡,它们结合一些2D,3D变换可以达到可观的动画效果,但是涉及到更多更加复杂的动画这个时候我们还要基于JavaScript实现。在这里我们定义一个JavaScript中一个实用的函数以便今后的设置。
全栈程序员站长
2022/09/27
12.2K0
记GIF动画转CSS逐帧动画工具
翻到了 2018 年左右团队支持的一个项目,当时看重构同学不断的在和设计师来回沟通调动画细节,就在想能不能提升下这里的效率,于是了解了下当时的实现过程,大概是这样的:
GhostZhang
2022/08/22
1.4K0
记GIF动画转CSS逐帧动画工具
2014-10-31Android学习------在小窗口Dialog中实现GIF动画--------GIF动画实现
我学习Android都是结合源代码去学习,这样比较直观,非常清楚的看清效果,觉得很好,今天的学习源码是网上找的个GIF动画完美实现 源码 百度搜就知道很多下载的地方 我写的东西有可能比较乱,如果单一的篇章没看明白,请看上一篇文章
wust小吴
2022/03/07
6590
2014-10-31Android学习------在小窗口Dialog中实现GIF动画--------GIF动画实现
iOS的GIF动画效果实现
在GIF的合成和分解方面将会接触到iOS图像处理核心框架ImageIO,作为iOS系统中图像处理的核心框架,它为我们提供了各种丰富的API,本文将要实现的GIF分解与合成功能,通过ImageIO就可以很方便地实现。GIF动画展示效果将结合UIImageView和定时器,利用逐帧展示的方式为大家呈现GIF动画效果。
博文视点Broadview
2020/06/11
1.3K0
iOS的GIF动画效果实现
完美实现GIF动画缩略图
缩略图是个很常用的功能。它的实现并不复杂,但如果原图是GIF动画的话,问题就会变得繁琐一点,下面通过一个取自CS警匪游戏的GIF动画来说明问题:
LA0WAN9
2021/12/14
1.2K0
完美实现GIF动画缩略图
JQuery中的动画
  这两种方法是jQuery动画的最基本方法。当为元素调用show方法时相当于将该元素的display样式改为block或者inline,同理,如果当元素调用hide方法时,相当于将该元素的样式改为none;因此:$("element").hide()等同于$("element").css("display","none");
小小许
2018/09/20
2.6K0
jQuery动画与ajax
1: jQuery $(document).ready()与window.onload的区别? Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,不过与window.onload方法还是有区别的。 1.执行时间 window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。 $(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕 . 2.编写个数不同 window.onload不能同时编
小胖
2018/06/27
2.8K0
jQuery基础--动画操作
三组基本动画 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title>
eadela
2019/09/29
4.1K0
jQuery基础--动画操作
如何在 Photoshop 中制作 GIF 动画
您可能已经使用过一些在线 gif 生成器来快速生成 gif 图像,但这些在线生成器无法提供与 Photoshop 相同的灵活性和结果。
西门吹雪1997
2023/10/10
4750
jquery 事件和动画
blur focus load resize scroll unload click dbclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup error
用户5760343
2019/10/08
2.1K0
jquery 事件和动画
jquery的事件&动画
在1.7之前的版本中jQuery处理事件有多个方法, (google 搜索: jquery live bind degelate)作用各不相同,后来统一的使用on/off方法
bamboo
2019/01/29
1.8K0
jquery的事件&动画
jQuery里面的动画
finish 等价 stop(true,true),当前动画停止 ,不清除队列 ,直接队列完成
IT工作者
2022/04/27
1.4K0

相似问题

jQuery $.post停止GIF动画?

20

用Jquery动画加载Gif?

21

jQuery图像替换动画(模拟动画gif)

30

jQuery:.gif动画不工作

12

用Jquery控制GIF动画?

32
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文