javascript学習-----画像処理

1526 ワード

JavaScript イメージ効果

Imageオブジェクトの記憶と取得
webページのすべての要素は一つのdocument.imags配列に格納されています.
document.imags[index]により
document.imags[name]訪問
注意:nameはタグの属性nameの値です.
画像のプリロード
画像のロードが遅い問題を緩和します.
原理:実際のHTTP要求画像をプリロードする前にキャッシュにダウンロードする方法.
ページに画像が必要な場合は、すぐにキャッシュから画像を取り出して、すぐにページに表示することができます.
画像のランダム表示
MathオブジェクトのRandowm関数とflor関数を使用します.
ランドム関数:0-1の間の数を返します.
flor関数:指定された数より小さい最大の整数を返します.
画像のランダム表示を利用して画像認証コードを作成することもできます.
画像のスクロール効果
scrollwidthとclientWidthおよびoffset Widthなどの関連する属性を使って作成します.
参照:http://7613943.blog.51cto.com/7603943/1438635
画像のグラデーション効果
アルファのopacity属性を用いて実現した.
スクロールバーは、制御widthの値を利用しても良いです.
visibilityを使って点滅効果を実現します.
画像のクロック表示
Dataオブジェクトを使って時間を取得します.
そして、取得した時間値で対応する画像に対応する.
画像の反転効果:
フィルタfilterを使って実現します.
画像を常に上に置く効果:
body要素のscrollTop属性を取得することにより、画像の位置を設定します.

<html>
<body style="height:1000px;width:2000px">
	<div >
		<img src="1.jpg" width="20%" style="position:absolute;top:10px;left:1050px;">
    </div>
	<script type="text/javascript">
	function setLocation(){
		var x = document.body.scrollTop;
		var y = document.body.scrollLeft;
		var ele = document.images[0]
		ele.style.top = 10+x+"px";
		ele.style.left = 1050+y+"px"
		console.log(y)
	}
	setInterval(setLocation,1)
	</script>
</body>
</html>

Kotlin入門