学步园

js效果的鼠标划过列表并且点击留下混迹。

css代码：

.mail-l-bg<br /> {<br /> float:left;<br /> background:url(../images/mail-l-bg.gif)!important;<br /> width:170px;<br /> height:371px;<br /> margin:6px 4px;<br /> display:inline<br /> }<br /> .c{ clear:both}</p> <p>.mail-line-bg<br /> {<br /> float:left;<br /> width:158px;<br /> height:22px;<br /> margin:10px 0px 3px 6px;<br /> color:#333;<br /> cursor:hand;<br /> display:inline<br /> }<br /> .mail-line-bgcolor<br /> {<br /> background-color:#72a6e0;<br /> }<br /> .mail-line-bg img<br /> {<br /> float:left;<br /> margin:4px 10px;<br /> display:inline<br /> }<br /> .mail-line-bg div<br /> {<br /> float:left;<br /> margin:5px 4px !important margin:4px 4px;<br /> display:inline<br /> }</p> <p>.mail-line-bg font<br /> {<br /> float:left;<br /> margin:3px 2px !important margin:2px 2px;<br /> font-size:12px;<br /> font-weight:bold<br /> }</p> <p>.mail-line-bg1<br /> {<br /> float:left;<br /> width:158px;<br /> height:22px;<br /> margin-bottom:3px;<br /> margin-left:6px;<br /> color:#333;<br /> cursor:hand;<br /> display:inline<br /> }<br /> .mail-line-bgcolor1<br /> {<br /> background-color:#dfe8f1;<br /> }<br /> .mail-line-bg1 img<br /> {<br /> float:left;<br /> margin:4px 10px;<br /> display:inline<br /> }<br /> .mail-line-bg1 div<br /> {<br /> float:left;<br /> margin:5px 4px !important margin:4px 4px;<br /> display:inline<br /> }<br /> .mail-line-bg1 font<br /> {<br /> float:left;<br /> margin:3px 2px !important margin:2px 2px;<br /> font-size:12px;<br /> font-weight:bold<br /> }<br /> .m-xian<br /> {<br /> margin-left:auto;<br /> margin-right:auto;<br /> background-color:#d7dee4;<br /> width:90%;<br /> height:1px;<br /> }<br /> .hh8<br /> {<br /> float:left;<br /> height:8px;<br /> width:100%;<br /> }<br /> .bg_bule<br /> {<br /> float:left;<br /> width:100%;<br /> background-color:#c7d4e5;<br /> margin-bottom:-9999px;<br /> padding-bottom:9999px;<br /> }

js代码：

//设置背景色<br /> setclassbg = function(obj, classname) {<br /> obj.className = classname;<br /> }</p> <p>//点击后更改背景<br /> onclickbg = function(obj,counts) {<br /> var oid = obj.id;<br /> for (var i = 0; i < counts; i++) {<br /> if ("mail-div-left1" == "mail-div-left" + (i + 1)) {<br /> document.getElementById("mail-div-left" + (i + 1)).className = "mail-line-bg";<br /> document.getElementById("mail-div-left" + (i + 1)).onmouseout = function() { setclassbg(this, 'mail-line-bg'); };<br /> }<br /> else {<br /> document.getElementById("mail-div-left" + (i + 1)).className = "mail-line-bg1";<br /> document.getElementById("mail-div-left" + (i + 1)).onmouseout = function() { setclassbg(this, 'mail-line-bg1'); };<br /> }</p> <p> if ("mail-div-left" + (i + 1) == "mail-div-left1") {<br /> if (oid == "mail-div-left" + (i + 1)) {<br /> document.getElementById("mail-div-left" + (i + 1)).onmouseover = function() { setclassbg(this, 'mail-line-bg mail-line-bgcolor'); };<br /> document.getElementById("mail-div-left" + (i + 1)).onmouseout = function() { setclassbg(this, 'mail-line-bg mail-line-bgcolor'); };<br /> }<br /> else {<br /> document.getElementById("mail-div-left" + (i + 1)).onmouseover = function() { setclassbg(this, 'mail-line-bg mail-line-bgcolor1'); };<br /> document.getElementById("mail-div-left" + (i + 1)).onmouseout = function() { setclassbg(this, 'mail-line-bg'); };<br /> }<br /> }<br /> else {<br /> if (oid == "mail-div-left" + (i + 1)) {<br /> document.getElementById("mail-div-left" + (i + 1)).onmouseover = function() { setclassbg(this, 'mail-line-bg1 mail-line-bgcolor'); };<br /> document.getElementById("mail-div-left" + (i + 1)).onmouseout = function() { setclassbg(this, 'mail-line-bg1 mail-line-bgcolor'); };<br /> }<br /> else {<br /> document.getElementById("mail-div-left" + (i + 1)).onmouseover = function() { setclassbg(this, 'mail-line-bg1 mail-line-bgcolor1'); };<br /> document.getElementById("mail-div-left" + (i + 1)).onmouseout = function() { setclassbg(this, 'mail-line-bg1'); };<br /> }<br /> }</p> <p> }<br /> if (oid == "mail-div-left1")<br /> obj.className = "mail-line-bg mail-line-bgcolor";<br /> else<br /> obj.className = "mail-line-bg1 mail-line-bgcolor";</p> <p>}

html代码：

<div class="mail-l-bg"><br /> <div class="mail-line-bg" id="mail-div-left1" onmouseover="setclassbg(this,'mail-line-bg mail-line-bgcolor1')" onmouseout="setclassbg(this,'mail-line-bg')" onclick="onclickbg(this,8);onloadtab('mail_sj','新闻','news_line','mail_sj.html');" title="新闻"><img src="../images/icons/LedIcon_072.png" /><div>新闻</div></div><br /> <div class="mail-line-bg1" id="mail-div-left2" onmouseover="setclassbg(this,'mail-line-bg1 mail-line-bgcolor1')" onmouseout="setclassbg(this,'mail-line-bg1')" onclick="onclickbg(this,8);onloadtab('mail_sj','风云榜','news_line','mail_send.html');" title="风云榜"><img src="../images/icons/LedIcon_072.png" /><div>风云榜</div></div><br /> <div class="mail-line-bg1" id="mail-div-left3" onmouseover="setclassbg(this,'mail-line-bg1 mail-line-bgcolor1')" onmouseout="setclassbg(this,'mail-line-bg1')" onclick="onclickbg(this,8);onloadtab('mail_sj','制度','news_line','mail_cg.html');" title="制度"><img src="../images/icons/LedIcon_072.png" /><div>制度</div></div><br /> <div class="mail-line-bg1" id="mail-div-left4" onmouseover="setclassbg(this,'mail-line-bg1 mail-line-bgcolor1')" onmouseout="setclassbg(this,'mail-line-bg1')" onclick="onclickbg(this,8);onloadtab('mail_sj','文化','news_line','mail_del.html');" title="文化"><img src="../images/icons/LedIcon_072.png" /><div>文化</div></div><br /> <div class="mail-line-bg1" id="mail-div-left5" onmouseover="setclassbg(this,'mail-line-bg1 mail-line-bgcolor1')" onmouseout="setclassbg(this,'mail-line-bg1')" onclick="onclickbg(this,8);onloadtab('mail_sj','新闻','news_line','mail_sj.html');" title="新闻"><img src="../images/icons/LedIcon_072.png" /><div>新闻</div></div><br /> <div class="mail-line-bg1" id="mail-div-left6" onmouseover="setclassbg(this,'mail-line-bg1 mail-line-bgcolor1')" onmouseout="setclassbg(this,'mail-line-bg1')" onclick="onclickbg(this,8);onloadtab('mail_sj','风云榜','news_line','mail_send.html');" title="风云榜"><img src="../images/icons/LedIcon_072.png" /><div>风云榜</div></div><br /> <div class="mail-line-bg1" id="mail-div-left7" onmouseover="setclassbg(this,'mail-line-bg1 mail-line-bgcolor1')" onmouseout="setclassbg(this,'mail-line-bg1')" onclick="onclickbg(this,8);onloadtab('mail_sj','制度','news_line','mail_cg.html');" title="制度"><img src="../images/icons/LedIcon_072.png" /><div>制度</div></div><br /> <div class="mail-line-bg1" id="mail-div-left8" onmouseover="setclassbg(this,'mail-line-bg1 mail-line-bgcolor1')" onmouseout="setclassbg(this,'mail-line-bg1')" onclick="onclickbg(this,8);onloadtab('mail_sj','文化','news_line','mail_del.html');" title="文化"><img src="../images/icons/LedIcon_072.png" /><div>文化</div></div><br /> </div>