日本語
中文(简体)
中文(繁体)
한국어
日本語
English
Português
Español
Русский
العربية
Indonesia
Deutsch
Français
ภาษาไทย
ホーム
ソースコードダウンロード
プログラミング関連
ウェブサイト作成リソース
書籍とチュートリアル
ウェブデザインチュートリアル
ネットワークプログラミングチュートリアル
モバイルゲーム
モバイルソフトウェア
記事
ホーム
>
Web デザインのチュートリアル
>
ウェブ特殊効果
ページを開くときに、キーボードを使用していくつかの文字を入力すると、ページが自動的に移動します。
著者:Eve Cole
更新時間:2009-06-18 17:26:42
<!-- この機能を完了するには最初の 2 回が必要です: 次の代コードを <head> 領域中に配置します --> <script language="JavaScript"> var a_Colour='ff0000'; var b_Colour='00ff00'; var c_Colour='0000ff'; var サイズ=50; var YDummy=新しい配列(),XDummy=新しい配列(),xpos=0,ypos=0,ThisStep=0;step=0.03; if (document.layers){ window.captureEvents(Event.MOUSEMOVE); function nsMouse(evnt){ xpos = window.pageYOffset+evnt.pageX+6; ypos = window.pageYOffset+evnt.pageY+16; window.onMouseMove = nsMouse; else if (document.all) { function ieMouse(){ xpos = document.body.scrollLeft+event.x+6; ypos = document.body.scrollTop+event.y+16; document.onmousemove = ieMouse; } function swirl(){ for (i = 0; i < 3; i++) { YDummy[i]=ypos+Size*Math.cos(ThisStep+i*2)*Math.sin((ThisStep)*6); XDummy[i]=xpos+Size*Math.sin(ThisStep+i*2)*Math.sin((ThisStep)*6); ThisStep+=ステップ; setTimeout('swirl()',10);変数量=10; if (document.layers){ for (i = 0; i < amount; i++) { document.write('<レイヤー名=nsa'+i+' top=0 left=0 width='+i/2+' height ='+i/2+' bgcolor='+a_Colour+'></layer>'); document.write('<レイヤー名=nsb'+i+' top=0 left=0 width='+i/2+' height='+i/2+' bgcolor='+b_Colour+'></layer>' ); document.write('<レイヤー名=nsc'+i+' top=0 left=0 width='+i/2+' height='+i/2+' bgcolor='+c_Colour+'></layer>' ); } } else if (document.all){ document.write('<div id="ODiv" style="position:absolute;top:0px;left:0px">' +'<div id="IDiv" style= "位置:相対">'); for (i = 0; i < amount; i++) { document.write('<div id=x style="position:absolute;top:0px;left:0px;width:'+i/2+';height: '+i/2+';背景:'+a_Colour+';フォントサイズ:'+i/2+'"></div>'); document.write('<div id=y style="position:absolute;top:0px;left:0px;width:'+i/2+';height:'+i/2+';background:'+b_Colour+ ';font-size:'+i/2+'"></div>'); document.write('<div id=z style="position:absolute;top:0px;left:0px;width:'+i/2+';height:'+i/2+';background:'+c_Colour+ ';font-size:'+i/2+'"></div>'); document.write('</div></div>');関数 prepos(){ var ntscp=document.layers; var msie=document.all; if (document.layers){ for (i = 0; i < amount; i++) { if (i < amount-1) { ntscp['nsa'+i].top=ntscp['nsa'+(i+1) )].top;ntscp['nsa'+i].left=ntscp['nsa'+(i+1)].left; ntscp['nsb'+i].top=ntscp['nsb'+(i+1)].top;ntscp['nsb'+i].left=ntscp['nsb'+(i+1)]。左; ntscp['nsc'+i].top=ntscp['nsc'+(i+1)].top;ntscp['nsc'+i].left=ntscp['nsc'+(i+1)]。左; } else { ntscp['nsa'+i].top=YDummy[0];ntscp['nsa'+i].left=XDummy[0]; ntscp['nsb'+i].top=YDummy[1];ntscp['nsb'+i].left=XDummy[1]; ntscp['nsc'+i].top=YDummy[2];ntscp['nsc'+i].left=XDummy[2]; } } } else if (document.all){ for (i = 0; i < amount; i++) { if (i < amount-1) { msie.x[i].style.top=msie.x[i+ 1].style.top;msie.x[i].style.left=msie.x[i+1].style.left; msie.y[i].style.top=msie.y[i+1].style.top;msie.y[i].style.left=msie.y[i+1].style.left; msie.z[i].style.top=msie.z[i+1].style.top;msie.z[i].style.left=msie.z[i+1].style.left; } else { msie.x[i].style.top=YDummy[0];msie.x[i].style.left=XDummy[0]; msie.y[i].style.top=YDummy[1];msie.y[i].style.left=XDummy[1]; msie.z[i].style.top=YDummy[2];msie.z[i].style.left=XDummy[2]; setTimeout("prepos()",10);関数 Start(){ swirl(),prepos() } window.onload=Start; </script> <!--第二步:<body> 領域中へ次の面のコードを配置します--> <body bgcolor="#000000">
関連記事
最高の永久カレンダー Web ページ効果
2009-06-20
超強力で美しい Web カレンダー コード、Web ページの特殊効果
2009-06-20
画像のスクラブ スライドショー効果 [Web ページ効果]
2009-06-20
二次ドロップダウン メニュー [Web ページの特殊効果]
2009-06-20
3 段階のドロップダウン メニュー [Web ページの特殊効果]
2009-06-20
雨粒が次々と落ちる絶妙なWebページ特殊効果【Webページ特殊効果】
2009-06-20
Web ページ特殊効果の DHTML 情報ホイール表示効果
2009-06-20
ブラジャーのサイズを計算する Web エフェクト
2009-06-20
浮遊写真 [Web ページの特殊効果]
2009-06-20
Web ページのプログレスバー [Web ページの特殊効果]
2009-06-20
ローカル ディスク ブラウザ [Web ページの特殊効果]
2009-06-18
Web 特殊効果: ランダムな画像表示技術
2009-06-08