javascriptマウスの浮遊行の変色コードの例
2837 ワード
javascriptマウスの浮遊行の変色コードの例:たくさんの行があれば、非常に不便な状況を確認することができます.もしマウスをある行に置くと、色の効果が実現できます.
一.実現原理:隔行の変色は残を求めてliのパリティラインを判断し、奇数行に背景色を設定することによって、隔行の変色効果を実現します.マウスを行に置くと、行の背景色を設定し、マウスが離れると元の状態に戻ります.二.コードのコメント:1.window.onload=function(){}は、ドキュメントの内容が完全に読み込まれたら関数のコードを実行します.2.var box=document.getElemenntById(「box」)は、id属性値がboの要素を取得する.3.var lis=box.getElements ByTagName(「li」)は、box要素下のli要素セットを取得する.4.for(var i=0;i＜lis.length;i＋＋)｛｝、forサイクルはli要素のセットのそれぞれのli要素を遍歴する.5.if(i 2==0)は、iが0から始まるので、残存判定は奇数行かどうかです.6.lis.className=「gehang」は、奇数行liのスタイルclass属性をgehangとして設定します.7.lis.index=iは、li要素のためにindex属性を作成し、iに値を与えます.8.lis.onmouseover=function()は、それぞれのli要素のためにonmouseoverイベント処理関数を登録します.9.this.className="bg"は、現在の行のスタイルclass属性をbgに設定します.10.lis.onmouseout=function(){}は、それぞれのli要素のためにonmouseoutイベントハンドリング関数を登録します.11.if(this.index%2==0)これは上で紹介されていますので、以下のものも同じです.
原文の住所は:http://www.softwhy.com/forum.php?mod=viewthread&tid=8332
詳細は下記を参照してください.http://www.softwhy.com/javascript/
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<head>
<title> - </title>
<style type="text/css">
ul
{
list-style:none;
margin:50px;
}
ul li
{
width:250px;
height:20px;
line-height:20px;
font-size:12px;
}
.gehang
{
background-color:#E6E6F2;
}
.bg
{
background-color:#A3D1D1;
}
</style>
<script type="text/javascript">
window.onload=function()
{
var box=document.getElementById("box");
var lis=box.getElementsByTagName("li");
for(var i=0;i<lis.length;i++)
{
if(i%2==0)
{
lis[i].className="gehang";
}
lis[i].index=i;
lis[i].onmouseover=function()
{
this.className="bg";
}
lis[i].onmouseout=function()
{
if(this.index%2==0)
{
this.className="gehang";
}
else
{
this.className="";
}
}
}
}
</script>
</head>
<body>
<div id="box">
<ul>
<li> </li>
<li> </li>
<li> </li>
<li> ， </li>
<li> </li>
<li> </li>
</ul>
</div>
</body>
</html> 一.実現原理:隔行の変色は残を求めてliのパリティラインを判断し、奇数行に背景色を設定することによって、隔行の変色効果を実現します.マウスを行に置くと、行の背景色を設定し、マウスが離れると元の状態に戻ります.二.コードのコメント:1.window.onload=function(){}は、ドキュメントの内容が完全に読み込まれたら関数のコードを実行します.2.var box=document.getElemenntById(「box」)は、id属性値がboの要素を取得する.3.var lis=box.getElements ByTagName(「li」)は、box要素下のli要素セットを取得する.4.for(var i=0;i＜lis.length;i＋＋)｛｝、forサイクルはli要素のセットのそれぞれのli要素を遍歴する.5.if(i 2==0)は、iが0から始まるので、残存判定は奇数行かどうかです.6.lis.className=「gehang」は、奇数行liのスタイルclass属性をgehangとして設定します.7.lis.index=iは、li要素のためにindex属性を作成し、iに値を与えます.8.lis.onmouseover=function()は、それぞれのli要素のためにonmouseoverイベント処理関数を登録します.9.this.className="bg"は、現在の行のスタイルclass属性をbgに設定します.10.lis.onmouseout=function(){}は、それぞれのli要素のためにonmouseoutイベントハンドリング関数を登録します.11.if(this.index%2==0)これは上で紹介されていますので、以下のものも同じです.
原文の住所は:http://www.softwhy.com/forum.php?mod=viewthread&tid=8332
詳細は下記を参照してください.http://www.softwhy.com/javascript/