この記事の例では、マウスでトリガーされた画像のジッター効果を実現するための js メソッドについて説明します。皆さんの参考に共有してください。具体的な実装方法は以下の通りです。
<頭>
マウスで画像ジッター効果をトリガー
<スタイル>
.shakeimage{
位置:相対
}
<スクリプト言語="JavaScript1.2">
//手ぶれ度を設定します (# が大きいほど手ぶれが大きくなります)
varレクター=3
///////編集完了///////////
var stopit=0
var a=1
関数 init(どれ){
stopit=0
シェイク=どれ
shade.style.left=0
シェイク.スタイル.トップ=0
}
関数rattleimage(){
if ((!document.all&&!document.getElementById)||stopit==1)
戻る
if (a==1){
shake.style.top=parseInt(shake.style.top) レクター
}
else if (a==2){
shade.style.left=parseInt(shake.style.left) レクタ
}
else if (a==3){
shade.style.top=parseInt(shake.style.top)-rector
}
それ以外{
shade.style.left=parseInt(shake.style.left)-rector
}
if (a
それ以外
a=1
setTimeout("rattleimage()",50)
}
関数 stoprattle(that){
ストップイット=1
what.style.left=0
what.style.top=0
}
マウスを動かして効果を確認してください。