BinaryDevelop
  1. ホーム
  2. Web制作
  3. html5

HTML5 回転画像フルコード

2022-01-21 19:31:20

回転地図の原則はこれについてある、3つの映像が回転効果をする必要があると仮定する、最初に3つの映像を並べて置き、次に左に並べて全体を動かす必要がある、表示箱からの完全な映像はいつでも、そしてこの映像は最後に置かれる、周期は左(か方向)への映像を動かすことを実現することができる。そして、2つのタイマーが必要で、1つのタイマーAは3つの絵の全体の左方向の速度を制御し、別のタイマーBは完全な絵がこのディスプレイボックスに入ってくるたびに1〜2秒待つことを制御し、より良いユーザー体験を得るために必要です。
ここでは、3つのdivボックスを回転する画像として使ってデモをしています。
htmlのbodyに表示ボックスとしてdivを追加し、このdivの中に画像表示として3つのsubdivを追加します。コードはこのようになります。 

Directory: D:\Python_Project\CFG\dist

Mode LastWriteTime Length Name
---- ------------- ------ ----
-a---- 2020/3/24 15:37 45937021 Main_cfg_editor.exe
-a---- 2020/3/25 14:33 13194 pyinstxtractor.py

ヘッダーにcssスタイルを追加する。

このページには、黒いディスプレイボックスの div があり、その中に赤、緑、青の 3 つの div ボックスが上から下に向かって配置されているはずです。
まず、3枚の画像を並べて表示します。
divを移動することを実現するために、divは瞬間ごとに位置（移動）を制御する方が便利で、相対的な位置決めしか使用できず、便宜上、3つの子 divの位置移動はボックスに対する相対的な基準点として使用する必要があります。 boxとslideのコードにそれぞれposition属性を追加する。 

(base) PS D:\Python_Project\CFG\dist> python pyinstxtractor.py Main_cfg_editor.exe

ページ全体にonloadロード完了イベントを追加する ブラウザが開いて読み込まれると、イベント内のコードブロックが自動的に実行されます。jsコードのこの部分は、cssのすぐ下に書かれていて、同じレベルの構造を保っています。 

[+] Processing Main_cfg_editor.exe
[+] Pyinstaller version: 2.1+
[+] Python version: 37
[+] Length of package: 45659005 bytes
[+] Found 2823 files in CArchive
[+] Beginning extraction.... ...please standby
[+] Possible entry point: pyiboot01_bootstrap.pyc
[+] Possible entry point: pyi_rth_pkgres.pyc
[+] Possible entry point: pyi_rth_win32comgenpy.pyc
[+] Possible entry point: pyi_rth_multiprocessing.pyc
[+] Possible entry point: pyi_rth_traitlets.pyc
[+] Possible entry point: pyi_rth__tkinter.pyc
[+] Possible entry point: main_cfg_editor.pyc
[+] Found 1627 files in PYZ archive
[+] Successfully extracted pyinstaller archive: Main_cfg_editor.exe

You can now use a python decompiler on the pyc files within the extracted directory
(base) PS D:\Python_Project\CFG\dist>

ページが完全に読み込まれると、3つのdivが横に並ぶはずです。
次に、タイマー、つまり手前のタイマーAを使って、3つのdivを全体として左に移動する実装が必要です。*onload 同じレベルの下に、以下のコードを追加します。 

pip install uncompyle

この時点で、回転する画像は基本的に実装されています。あとは、cssスタイルでボックスにoverflowを追加して、表示ボックスの外にあるdivを非表示にする必要があります。 

(base) PS D:\Python_Project\CFG\dist\Main_cfg_editor.exe_extracted>

次に、回転する画像の上にマウスを置いたときに回転が止まる現象を解決するには、ボックスにマウスオーバーとマウスアウトのイベントを追加する必要があります。タブを開始します。 

(base) PS D:\Python_Project\CFG\dist\Main_cfg_editor.exe_extracted\PYZ-00.pyz_extracted>

jsのコードを追加します。 

(base) PS D:\Python_Project\CFG\dist\Main_cfg_editor.exe_extracted> uncompyle6 Main_cfg_editor.pyc > Main_cfg_editor.py

ブラウザのウィンドウが切り替わったり、しばらく別のページに切り替わって戻ってくると、回転効果が短時間で加速される（切り替わった時間分長くなる）ようにしました。これは主に、ウィンドウがカットアウトされてもタイマーは実行されているが、ページには効果が表示されていないため、カットバックされると前の効果が表示され、回転が加速されるためです。そこで、ページフォーカスイベントを追加します。 

(base) PS D:\Python_Project\CFG\dist\Main_cfg_editor.exe_extracted\PYZ-00.pyz_extracted> uncompyle6 create_cfg.pyc > create_cfg.py

全コードは以下の通りです。 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>rotating image</title>
<style type="text/css">
	#box{
		width:100px;
		height:100px;
		border:1px solid black;
		position:relative;
		overflow:hidden;
	}
	#red{
		background-color:red;
		width:100px;
	}
	#green{
		background-color:green;
		width:100px;
	}
	#blue{
		background-color:blue;
		width:100px;
	}
	.slide{
		width:100px;
		height:100px;
		position:absolute;
	}
</style>
<script type="text/javascript">
	onload=function(){
		var arr = document.getElementsByClassName("slide");
		for(var i=0;i<arr.length;i++){
			arr[i].style.left = i*100+"px";
		}
	}
	function LeftMove(){
		var arr = document.getElementsByClassName("slide");//get three child divs
		for(var i=0;i<arr.length;i++){
			var left = parseFloat(arr[i].style.left);
			left-=2;
			var width = 100;//the width of the image
			if(left<=-width){
				left=(arr.length-1)*width;//when the picture is completely out of the display box, stitching to the end
				clearInterval(moveId);
			}
			arr[i].style.left = left+"px";
		}
	}
	function divInterval(){
		moveId=setInterval(LeftMove,10);//set a 10 millisecond timer
	}
	
	
	timeId=setInterval(divInterval,2000);//Set a 3 second timer
	
	function stop(){
		clearInterval(timeId);
	}
	function start(){
		clearInterval(timeId);
		timeId=setInterval(divInterval,2000);
	}
	
	//The page loses focus and stops
	onblur = function(){
		stop();
	}
	//start when the page gets focus
	onfocus = function(){
		start();
	}
</script>
</head>
<body>
	<div id="box" onmouseover="stop()" onmouseout="start()">
		<div id="red" class="slide"></div>
		<div id="green" class="slide"></div>
		<div id="blue" class="slide"></div>
	</div>
</body>
</html>

この記事は、HTML5回転マップフルコードに導入され、より関連するHTML5回転マップの内容は、スクリプトの家の前の記事を検索してくださいまたは次の関連記事を閲覧を継続し、あなたが将来的にはより多くのスクリプトハウスをサポートすることを願っています

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します