html用序列图做动画 (jquery替换图片版/jquery一次添加所有图片依次显示版/canvas版(最流畅))

最新推荐文章于 2024-05-10 10:10:22 发布
最新推荐文章于 2024-05-10 10:10:22 发布
阅读量909 收藏 2
点赞数
文章标签： js jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lxw_hk2_zy/article/details/112366160
版权

html+jquery+jquery.imgpreload做序列图

     找啊找啊找啊找啊找啊找啊找了半天(从各种网站上找资料费了半天劲)才找到的, 然后拼拼凑凑弄出来的序列图播放, 网上的资料太不负责任了, 简单的功能非不写全, 还没注释,功能也实现不了, 我弄出来给大家分下下
说明:
     只针对多张png组成的序列图, -拼凑为动画.我的资源里有免费的jquery.imgpreload.min.js.请随意下载.
资源:
     jpg没透明背景, png有透明背景但占用内存大,自己选择
在这里插入图片描述
jquery版本不限
在这里插入图片描述
jQuery替换图片版(加载略慢, 展示略卡):

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>
	<img class="chuansuo" />
	<script type="text/javascript" src="./static/jquery.1.1.3.min.js"></script>
	<script type="text/javascript" src="./static/jquery.imgpreload.min.js"></script>
	<script type="text/javascript">
		var load_img = [];
		var imgIdent = 0;
		var interNum = 0;
		function prefixInteger(num, length) {
			return ( "0000000000000000" + num ).substr( 0,length );
		}
		for(k=0;k<=306;k++){
			imgIdent = String(k);
			let identLength = 5-(imgIdent.length);
			let ident = prefixInteger(k,identLength)+k;
			// console.log(identLength,ident)
			load_img.push( './images/qi/qi_'+ident+'.png' );
		}
		// console.log(load_img)
		jQuery.imgpreload(load_img, {
			all: function() {

			}
		});
	    setInterval(function(){
	    	interNum++;
			$('.chuansuo').attr('src',load_img[interNum]);
			if(interNum>=306){
				interNum = 0;
			}
	    },50)
	</script>
</body>
</html>

jQuery添加所有图片版(加载超慢, 展示稍微不卡):

 window.sequence01 = {
            load_img:[],
            imgIdent:0,
            interNum:0,
            animateStart:null,
            str:null
        }
        window.sequence02 = {
            load_img:[],
            imgIdent:0,
            interNum:0,
            timer:null,
            str:"",
            changeBg:true,
            q1animate:true,
            titleanimate:true,
        }
        window.sequence03 = {
            load_img:[],
            imgIdent:0,
            interNum:0,
            str:null
        }
        function prefixInteger(num, length) {
            return ( "0000000000000000" + num ).substr( 0,length );
        }
        for(k=0;k<=306;k++){
            sequence01.imgIdent = String(k);
            let identLength = 5-(sequence01.imgIdent.length);
            let ident = prefixInteger(k,identLength)+k;
            sequence01.load_img.push(ident);
            sequence01.str +="<img class='"+ident+"' src='./images/qizixulie/qizhi_"+ident+".png'>";
        }
        $("#qi").append(sequence01.str)
        for(a=0;a<=179;a++){
            sequence02.imgIdent = String(a);
            let identLength = 5-(sequence02.imgIdent.length);
            let ident = prefixInteger(a,identLength)+a;
            sequence02.load_img.push(ident);
            sequence02.str +="<img class='"+ident+"' src='./images/222/firsttttt_"+ident+".jpg'>";
        }
        $("#bg").append(sequence02.str)
        for(b=183;b<=490;b++){
            sequence03.imgIdent = String(b);
            let identLength = 5-(sequence03.imgIdent.length);
            let ident = prefixInteger(b,identLength)+b;
            sequence03.load_img.push(ident);
            sequence03.str +="<img class='"+ident+"' src='./images/111/seconddddd_"+ident+".jpg'>";
        }
        $("#bg").append(sequence03.str)
        // jQuery.imgpreload(sequence01.load_img, {
        //     all: function() {
        //     }
        // });
        // jQuery.imgpreload(sequence02.load_img, {
        //     all: function() {
        //     }
        // });
        // jQuery.imgpreload(sequence03.load_img, {
        //     all: function() {
        //     }
        // });
        setInterval(function(){
            sequence01.interNum++;
            $("#qi img").eq(sequence01.load_img[sequence01.interNum]).show().siblings().hide();
            if(sequence01.interNum>=306){
                sequence01.interNum = 0;
            }
        },100)
        // setTimeout(function(){
            sequence02.timer = setInterval(function(){
                sequence02.interNum++;
                if(sequence02.changeBg){
                    // $('#bg').attr('src',sequence02.load_img[sequence02.interNum]);
                    $("#bg img").eq(sequence02.load_img[sequence02.interNum]).show().siblings().hide();
                    if (sequence02.q1animate) {
                        if(sequence02.interNum>=50){
                            $("#qi").animate({"top":"-5%"},10000)
                            sequence02.q1animate = false;
                        }
                    }
                    if (sequence02.titleanimate) {
                        if(sequence02.interNum>=130){
                            $(".u3d_title").fadeIn()
                            sequence02.titleanimate = false;
                        }
                    }
                    if(sequence02.interNum>=179){
                        sequence02.interNum = 0;
                        $(".getInto3d").fadeIn()
                        sequence02.changeBg = false;
                        // clearInterval(sequence02.timer)
                    }
                }else{
                    // $('#bg').attr('src',sequence03.load_img[sequence02.interNum]);
                    // console.log(sequence03.load_img[sequence02.interNum])
                    $("#bg img").eq(sequence03.load_img[sequence03.interNum]).show().siblings().hide();
                    if(sequence02.interNum>=320){
                        sequence02.interNum = 0
                    }
                }
            },60)
        // },3000)

Canvas版(加载最快,展示最快)

var mycanvas = document.getElementById('myCanvas')
		var ctx = mycanvas.getContext('2d')
		var screenW = window.screen.width;
		var screenH = window.screen.height;
		var cW = screenW;
		var cH = screenH;
			mycanvas.width = screenW;
			mycanvas.height = screenH;

		var mycanvasT = document.getElementById('myCanvasTwo')
		var ctxt = mycanvasT.getContext('2d')
		var cWt = screenW;
		var cHt = mycanvasT.height;
			mycanvasT.width = screenW;
			mycanvasT.height = screenH;

        window.sequence01 = {
            load_img:[],
            imgIdent:0,
            interNum:0,
            animateStart:null
        }
        window.sequence02 = {
            load_img:[],
            imgIdent:0,
            interNum:0,
            timer:null,
            changeBg:true,
            q1animate:true,
            titleanimate:true,
        }
        window.sequence03 = {
            load_img:[],
            imgIdent:0,
            interNum:0,
        }
        function prefixInteger(num, length) {
            return ( "0000000000000000" + num ).substr( 0,length );
        }
        for(k=0;k<=306;k++){
            sequence01.imgIdent = String(k);
            let identLength = 5-(sequence01.imgIdent.length);
            let ident = prefixInteger(k,identLength)+k;
            sequence01.load_img.push( './images/qizixulie/qizhi_'+ident+'.png' );
        }
        for(a=0;a<=305;a++){
            sequence02.imgIdent = String(a);
            let identLength = 5-(sequence02.imgIdent.length);
            let ident = prefixInteger(a,identLength)+a;
            sequence02.load_img.push( './images/firstl/first_'+ident+'.jpg' );
        }
        for(b=306;b<=611;b++){
            sequence03.imgIdent = String(b);
            let identLength = 5-(sequence03.imgIdent.length);
            let ident = prefixInteger(b,identLength)+b;
            sequence03.load_img.push( './images/secondl/second_'+ident+'.jpg' );
        }
        jQuery.imgpreload(sequence01.load_img, {
            all: function() {
            }
        });
        jQuery.imgpreload(sequence02.load_img, {
            all: function() {
            }
        });
        jQuery.imgpreload(sequence03.load_img, {
            all: function() {
            }
        });
        setInterval(function(){
            sequence01.interNum++;
            var img = new Image();
			img.src = sequence01.load_img[sequence01.interNum];
			img.onload = function(){
	            ctx.clearRect(0,0,cW,cH)
				ctx.drawImage(img,screenW-1000,-50,);
			}
            if(sequence01.interNum>=306){
                sequence01.interNum = 0;
            }
        },60)
        setInterval(function(){
            var bgImg = new Image();
			sequence02.interNum++;
            if(sequence02.changeBg){
                bgImg.src = sequence02.load_img[sequence02.interNum];
				bgImg.onload = function(){
		            ctxt.clearRect(0,0,cWt,cHt)
					ctxt.drawImage(bgImg,0,0,screenW,screenH);
				}
                if (sequence02.q1animate) {
                    if(sequence02.interNum>=50){
                        $("#myCanvas").animate({"top":"-5%"},10000)
                        sequence02.q1animate = false;
                    }
                }
                if (sequence02.titleanimate) {
                    if(sequence02.interNum>=130){
                        $(".u3d_title").fadeIn()
                        sequence02.titleanimate = false;
                        $(".getInto3d").delay(1000).fadeIn(3000,function(){
	                    	$(this).addClass("cur");
	                    })
                    }
                }
                if(sequence02.interNum>=306){
                    sequence02.interNum = 0;
                    // clearInterval()
                    sequence02.changeBg = false;
                }
            }else{
                bgImg.src = sequence03.load_img[sequence02.interNum];
				bgImg.onload = function(){
		            ctxt.clearRect(0,0,cW,cH);
					ctxt.drawImage(bgImg,0,0,screenW,screenH);
				}
                if(sequence02.interNum>=305){
                    sequence02.interNum = 0
                }
            }
        },60)
lxw_powerfulCat
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
sequence-diagram-html:序列图CSS（加转换器）
05-03
HTML序列图 这是一组样式表，用于在HTML页面中显示序列图。 您可以使用语义标记（ ）或纯CSS（）进行编写-请务必查看源代码。 要嵌入到页面中，您需要 ，外加转换脚本或用于列的额外CSS文件。 纯CSS（包括布局） 底层标记的工作原理是将所有内容都分成几列并添加CSS类（例如，在4列布局中，第2列的col-2-4 ）。 如果您手动进行布局（纯CSS选项），则需要包含 。 但是，您不必自己编写此布局代码，而是编写语义标记。 语义标记 可以以更直观的方式（无需考虑布局）输入图表。 要自动转换，请包含脚本，并将图标记放置在<sequence>元素中。 您不需要CSS列，因为转换脚本会根据需要生成CSS。 语义标记中的所有元素都可以直接使用（即<sequence> ），也可以由相应CSS类声明（即<div clas
帧序列动画素材
04-17
帧序列动画图片素材，PNG格式！
html 图片序列化,Html + Css思维导图
weixin_34740753的博客
06-04 113
TCP&sol;IP协议详解 卷1—读书笔记(1)0. 前言 本系列简要记录该书的关键点,用以梳理知识点. 1. 简介 简述链路层下的一些相关协议,如以太网IP数据报,802标准,SLIP,CSLIP,PPP. 链路层主要为上层(IP)和本层(ARP ...python&lowbar;Day3&lbrack;set集合，函数，全局变量之篇&rsqb;一.set集合 ...
Canvas绘制图片和区域（前端使用Canvas绘制图片，并在图片上绘制区域）
最新发布
weixin_65793170的博客
05-10 1998
1. 初始化Canvas画布// 获取canvas容器元素并设置宽高// 获取canvas元素并获取2D绘图上下文// 2. 初始化图片Canvas// 计算画布和图片的宽高比} else {// 设置三个canvas的宽高// 加载图片并绘制到imgCanvas上console.log("图片已加载");// 渲染已有数据// 3. 开始绘制。
用序列图制作无背景gif动画（3Ds MAX+Ps）
ChaoChao66666的博客
10-09 2180
先看下效果： 步骤： 1.使用3ds max制作一段动画并渲染，注意：渲染设置 时间输出 选择 活动时间段，输出格式为png 2.得到序列图： 3.打开Ps后，再打开刚才保存序列图的文件夹，记得勾选 图像序列 4.点击菜单栏中的 窗口 再点击 时间轴 ： 5.点击图中的＋号 ： 6.选择所有序列图（鼠标直接框选，或者ctrl+点击）， 再点击 打开： 7.执行完如下图： 再点击红圈中的按钮 8.执行完如下图（ctrl+点击 选中需要...
序列图动画
菜菜的程序媛的博客
08-04 833
序列帧动画
jason_hw5d的博客
06-15 311
昨天，一个妹子问我，Unity实现序列帧动画，然后说他们老师说要结合Animation，今天想了一下，一起进步，嘿嘿 1.序列帧图 boy.png 2.sprite editor image.png 3.Animation Animation 4.实现效果 Ani.gif 也看到很多大佬写的一些脚本实现，自己就简单代码实现一下 using S...
jQuery动画效果实现图片无缝连续滚动
10-22
无缝连续滚动的原理在于，在当前显示的图片序列后面复制并添加所有图片，形成一个新的序列。当第一个序列滚动到末尾时，立即重置其`left`属性，使其看起来像是从开始位置重新开始，同时实际的滚动是在新的序列上进行...
把图片做成序列帧动画的软件
11-22
把图片做成序列帧动画的软件。 非常简单，非常实用。 一键合成.
imgplay基于canvas的图片序列播放jQuery插件
08-08
imgplay是一款基于HTML5 canvas的图片序列播放jQuery插件。通过该插件可以实现一组图片的轮流播放，你还可以进行暂停、快进、后退操作，并且可以进入全屏模式进行图片观看。
jQuery CSS3多张图片选择动画.zip
07-04
jQuery CSS3多张图片选择动画是一款既炫酷又实用的HTML5图片选择特效，当图片被选中时，图片上就会覆盖一个半透明的层，上面有一个勾，并且在选中的时候图片出现弹跳的动画效果。
imgplay-基于canvas的图片序列播放jQuery插件
12-13
imgplay是一款基于HTML5 canvas的图片序列播放jQuery插件。通过该插件可以实现一组图片的轮流播放，你还可以进行暂停、快进、后退操作，并且可以进入全屏模式进行图片观看。
html5时间轴列表,HTML5 时间轴/日程安排表模板
weixin_29877175的博客
06-05 1301
HTML导入代码模板：Classes TimetableCircuit TrainingShort interval training circuits to condition muscles and burn fat fast. Circuits may vary from centre to centre.Total toneFocuses on strength and endurance...
jQuery动画序列
allbycode的博客
12-16 1522
**这里写代码片JQuery中的动画序列queue()，dequeue()，和stop()如下例： div.show("slow").animate({left:'+=300'},2000).slideToggle(1000).animate({left:'-=300'},1500).hide("slow").slideUp("normal", runIt); 此时div的动画先从左向右移动
html5微信登录时序图
weixin_34351321的博客
12-28 787
2019独角兽企业重金招聘Python工程师标准>>> ...
html edge浏览器 图片,浏览器时序图及 Microsoft Edge 构架
weixin_39517054的博客
06-04 459
本文又是我的作业，完成思路借鉴了 版权说明。作业要求针对一款典型浏览器，绘制浏览器处理时序图对用户界面进行操作(如拖拽窗口)带有 JavaScript 脚本 HTML 文档查阅资料，绘制 Edge 浏览器的参考架构浏览器时序图对用户界面进行操作(如拖拽窗口)在这里我使用 Chrome 浏览器访问我个人博客，我的博客使用了响应式布局，在这我已经加载好了我的网页，然后使用 Chrome 的性能工具录制...
html 图片自动切换插件,jquery图片切换插件
weixin_34026997的博客
06-01 121
/*** 图片切换插件* Dependence jquery-1.7.2.min.js**/(function ($) {//调用方式 $('#silder').imgSilder({s_width:564, s_height:293, is_showTit:true, s_times:3000,css_link:'css/style.css'}); 容器必须加入 id silder_list ...
时序图规则
HTML1033808020的博客
01-08 984
https://blog.csdn.net/ffengz/article/details/75447876
html图片拖拽排序,jQuery图片拖动排序和查看图集
weixin_39742392的博客
06-17 418
插件描述：jQuery图片列表拖动排序(支持多选)，支持动态添加和批量删除更新时间：2019-07-2600:11:07更新说明：优化拖动方法更新时间：2018/9/3 下午5:28:27更新说明：修改了删除图片再添加时无法准确定位的BUG。另：内置getnewarr()方法返回当前排序后图片数组。使用方法引用所需要的3个文件设置插件加载的容器img_uljs设置varimgulp=new...
html图片表情怎么搞,学习使用HTML5/CSS3来制作简单的表情动画
05-12
要在 HTML 中添加图片表情，可以使用 `<img>` 标签。例如： ```html <img src="smile.png" alt="笑脸"> ``` 其中 `src` 属性用于指定图片的 URL，`alt` 属性用于为图片添加文本说明。 要制作简单的表情动画，可以使用 CSS3 的动画特性。例如，可以使用 `@keyframes` 规则定义动画序列，然后使用 `animation` 属性将动画应用到元素上。例如： ```html <style> .smile { width: 50px; animation-name: smile-animation; animation-duration: 1s; animation-iteration-count: infinite; } @keyframes smile-animation { 0% { transform: rotate(0deg); } 50% { transform: rotate(10deg); } 100% { transform: rotate(0deg); } } </style> <img src="smile.png" alt="笑脸" class="smile"> ``` 在上面的例子中，我们定义了一个 `.smile` 类，它为图片添加了一个动画序列。动画序列使用 `@keyframes` 规则定义，它会让图片在旋转角度上来回摆动。然后，我们将这个动画应用到图片上，通过 `animation` 属性设置动画的名称、持续时间和播放次数。 希望能帮助到你！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值