ホームページ > ウェブフロントエンド > jsチュートリアル > マウストリガーによる画像ジッター効果を実現するための js メソッド_javascript スキル

マウストリガーによる画像ジッター効果を実現するための js メソッド_javascript スキル

WBOY
リリース: 2016-05-16 16:12:50
オリジナル
1172 人が閲覧しました

この記事の例では、マウスでトリガーされた画像のジッター効果を実現するための 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
}







マウスを動かして効果を確認してください。



この記事が皆様の JavaScript プログラミング設計に役立つことを願っています。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート