Pure jsで背景画像切り替え効果を実装する code_javascriptスキル

html コード

コードをコピー コードは次のとおりです:

• ;
• 
  
  
  <スクリプト src= "js /bgchage.js" type="text/javascript" >
  

JavaScript には強力な論理シーケンスがあるため、 js への参照の場所
css コード

コードをコピー コードは次のとおりです:

body {font-size:12px ;}
div{ width:950px; height:800px; margin:0 auto; border:solid 1px #d0d0d0;}
li{ list-style-type:none;ボーダー: ソリッド 1px; 余白: 1px; 幅: 10px; } 0 5px; float:left; border:solid 1px #d0d0d0;}*/

JavaScript コード部分:

コードをコピーします コードは次のとおりです:

window.onload=init;

var element= document.getElementsByTagName("li");
function init(); /背景色の初期化
{
var element= document.getElementsByTagName("li");
for(var i=0; i{
var k=i 1;
element[i].style.background="url(images/" k.toString() ".jpg)";
}
}
function addclick()
{
for(var i=0; i{
var k=i 1;
if(window.attachEvent)
element[i].attachEvent("onclick ", new Function("bgchage(" k ") ;")); //イベントを直接 .onclick で作成することはできませんが、.attachEvent("event",new Function("named function("parameter");" を使用する必要があります。 ));IE6 は
else
要素 [i].addEventListener("click", new Function("bgchage(" k ");"),false); を渡します。 >function bgchage(t) //カラーブロックに従って背景を変更します Color
{
document.getElementsByTagName("body")[0].style.background="url(images/" t ".jpg )";
}
addclick();


js 部分では、イベントの記述の互換性に注意する必要があり、実際には、 jq は、独自に使用するために多くの関数をプラグインの形式で記述します。JavaScript で記述すれば、繰り返し使用するための独自のクラス ライブラリを作成でき、jquery クラス ライブラリの負担を負う必要はありません。 。実際、私は jquery が良くないと言っているわけではありません。大きな観点から見ると、jquery プラグインのサイズは大きな影響を与えません。Baidu フロントエンド交流カンファレンスのビデオを見て、他の人のクラスであることがわかりました。ライブラリも js 自体によって記述されます。これが私に js を学習し続ける動機を与えてくれました。