ホームページ > ウェブフロントエンド > jsチュートリアル > javascript_javascript スキルに基づいてウィンドウを振るエフェクトを実装する

javascript_javascript スキルに基づいてウィンドウを振るエフェクトを実装する

WBOY
リリース: 2016-05-16 15:22:06
オリジナル
1138 人が閲覧しました

この記事の例では、JavaScript に基づいてウィンドウのジッター効果を実現するための詳細なコードを説明しており、具体的な内容は次のとおりです。

レンダリング:

マウスをクリックするとウィンドウが揺れます。

特定のコード:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="gb2312"/>
<title>窗口登陆效果</title>
<style type="text/css">
#win
{
 position:relative;
 width:100px;
 height:100px;
 background-color:#666;
}
</style>
<script type="text/javascript"> 
var a=['top','left'];
var b=0; 
var u;
function fudu()
{ 
 win.style[a[b%2]]=(b++)%4<2&#63;"0px":"4px"; 
 if(b>15)
 {
  clearInterval(u);
  b=0
 } 
}
function zd()
{
 clearInterval(u); 
 u=setInterval(fudu,32) 
} 
window.onload=function()
{
 var bt=document.getElementById("bt");
 var win=document.getElementById("win");
 bt.onclick=zd;
}
</script> 
</head> 
<body > 
<button id="bt">点击振动</button> 
<div id="win"></div> 
</body> 
</html>
ログイン後にコピー

この記事が JavaScript プログラミングの学習に役立ち、ウィンドウをシェイクする効果を実現できることを願っています。

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