2. 程式人生 > 其它 >html用序列圖做動畫

html用序列圖做動畫

阿新 • • 發佈：2021-01-16

技術標籤：jsjquery

html+jquery+jquery.imgpreload做序列圖

找啊找啊找啊找啊找啊找啊找了半天(從各種網站上找資料費了半天勁)才找到的, 然後拼拼湊湊弄出來的序列圖播放, 網上的資料太不負責任了, 簡單的功能非不寫全, 還沒註釋,功能也實現不了, 我弄出來給大家分下下
說明:
只針對多張png組成的序列圖, -拼湊為動畫.找不到jquery.imgpreload.min.js的問我要.
資源:
jpg沒透明背景, png有透明背景但佔用記憶體大,自己選擇
在這裡插入圖片描述
jquery版本不限
在這裡插入圖片描述
html+js

<!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>

相關推薦

html用序列圖做動畫

技術標籤：jsjquery html+jquery+jquery.imgpreload做序列圖 找啊找啊找啊找啊找啊找啊找了半天(從各種網站上找資料費了半天勁)才找到的, 然後拼拼湊湊弄出來的序列圖播放, 網上的資料太不負責任了, 簡單的功能非

放大鏡效果，用一張圖做放大鏡（用一張圖完成一套圖放大鏡效果）

效果如下： html程式碼： <div class=\"box\"> <div class=\"middle\"> <img src=\"\" alt=\"\">

怎樣用業務序列圖讓人戴口罩

BoFeng 2020-9-29 11:41 老師，請教一個我們專案的業務流程建模問題，為了保密不直說我們的專案，拿您寫過的那個UML防疫文章類比，是這樣的，假設現在某個小區很多人不帶口罩出門，我這個專案類似於使得更多

Axure 教程：用中繼器做柱狀圖

本文將教大家如何用AXURE做一個超漂亮的柱狀圖。 原型預覽及下載地址： https://axhub.im/pro/1882d0a30c3301c9

韓國網紅美容主播晒INS圖 抗議某中國遊戲廠擅用自己照片做廣告

雖然如今社會法律制度正在日益健全，不過依然有“掩耳盜鈴”的人以為別人暫時看不見就沒事了，11月15日今天，韓國一位著名網紅美容主播YU CAT NIP晒INS圖展示了之前擅用自己照片做廣告的某中國遊戲公司的致歉回覆。

Pico.css - 簡單優雅的純 CSS 開源 UI 框架，用原始的 HTML 元素標籤來做介面

不同瀏覽器對網頁預設的元件解析樣式不一致，而且不夠美觀，網頁樣式開發需要大量時間，今天介紹一款優雅的 CSS 框架。

用R語言做時間序列分析（附資料集和原始碼）

時間序列（time series）是一系列有序的資料。通常是等時間間隔的取樣資料。如果不是等間隔，則一般會標註每個資料點的時間刻度。

用神經網路做運動時序序列。

程式碼 import matplotlib.pyplot as plt import numpy as np import pandas as pd df = pd.read_csv(\'train.csv\')

軟體檔案寫作-plantuml畫用例圖和時序圖

背景 當下的軟體開發人員，不可避免的需要輸出一些軟體設計檔案，作為一個軟體工程專業畢業的工程師，最常用的設計工具就是UML，使用UML工具繪製一些軟體相關的圖，是必備技能，也是輸出的技術檔案中的重要組成部分

python matplotlib 畫dataframe的時間序列圖例項

在python中經常會用到pandas來處理資料，最常用的資料型別是dataframe，但是有時候在dataframe有時間欄位需要畫時間序列圖的時候會遇到一些問題，下面是我處理這個問題的一個小案例，希望可以幫到在坑裡的小朋友哦，

android實現截圖並動畫消失效果的思路詳解

整體思路 1、獲取要截圖的view 2、根據這個view建立Bitmap 3、儲存圖片，拿到圖片路徑

win10自帶截圖工具在哪|win10用截圖工具截圖並儲存圖片方法

win10系統自帶的截圖工具在哪裡開啟？win10系統不僅有截圖快捷鍵，還有內建截圖工具，在沒有第三方截圖工具時，我們可以使用win10自帶的截圖工具。有些使用者對win10 64位原版系統不太熟悉，不知道怎麼開啟截圖工具，

再見HTML ! 用純Python就能寫一個漂亮的網頁

我們在寫一個網站或者一個網頁介面的時候，需要學習很多東西，對小白來說很困難！比如我要做一個簡單的網頁互動：

沒錯，用三方 Github 做授權登入就是這麼簡單！（OAuth2.0實戰）

本文收錄在個人部落格：www.chengxy-nds.top，技術資源共享。 上一篇《OAuth2.0 的四種授權方式》文末說過，後續要來一波OAuth2.0實戰，耽誤了幾天今兒終於補上了。

Android 開發 VectorDrawable 向量圖 （八）animation-list幀動畫配合向量圖實現動畫

前言 　　只是向量圖的一個使用小技巧，關鍵點是<aapt:attr name=\"android:drawable\"> 屬性，它其實是代替<item 裡的android:drawable屬性。理解它，你可以舉一反三使用到更多的需要實現動畫，按下效果，

Linux下用火焰圖進行效能分析【轉】

轉自：https://blog.csdn.net/gatieme/article/details/78885908 本作品採用知識共享署名-非商業性使用-相同方式共享 4.0 國際許可協議進行許可, 轉載請註明出處, 謝謝合作

用js陣列做一個點名小程式

隨機點名程式，為了省事我把程式碼直接複製過來了 效果： 程式碼： <!doctype html>

實驗三：現狀業務序列圖（圖解，多圖，新手，詳解，詳細）

業務現狀序列圖 1. 新增新業務物件（銀行櫃員、銀行系統）2. 繪製現狀業務序列圖改名：

UML系統分析和設計：用例圖

用例圖 1. 概述 1992年jacobson提出了用例的概念和視覺化表示方法——用例圖，作為軟體專案開發和規劃的一個基本模型元素。 所謂用例是指系統的外部事物（活動者，裝置或外部系統）與系統的互動，它表達了系

一文掌握UML用例圖和時序圖：PlantUML實操分享

文章目錄 用例圖參與者用例系統邊界 時序圖角色物件生命線控制焦點訊息 用例圖