今天突然想在正在做的網(wǎng)站中加上個(gè)像中關(guān)村一樣的參數(shù)糾錯(cuò)的功能，效果如下圖：
雖然看起來好像蠻簡(jiǎn)單，但是自己還是想了一下午加上晚上的2個(gè)小時(shí)，不過等到自己做出來的時(shí)候好像也感覺到蠻簡(jiǎn)單的，其實(shí)這種web頁面的小特效只要把思路想通了就很簡(jiǎn)單了，呵呵，只是思路，不能說是算法，算法太高深，ME也不懂。
看到這個(gè)效果很容易想到，無非也就是給那個(gè)td單元格加上一個(gè)mouseover事件，當(dāng)鼠標(biāo)移上出的時(shí)候就出現(xiàn)那個(gè)“參數(shù)糾錯(cuò)”的HTML標(biāo)簽。
用firebug查看中關(guān)村的頁面，可以那到那個(gè)參數(shù)糾錯(cuò)無非也就是一個(gè)span標(biāo)簽中包含一個(gè)img和一段文字，然后給他一個(gè)向右浮動(dòng)，這樣自然會(huì)靠在td的右邊。
需要注意的是當(dāng)鼠標(biāo)移開td單元格了以后，那個(gè)參數(shù)糾錯(cuò)的標(biāo)簽還是顯示的，只有當(dāng)鼠標(biāo)移到另一個(gè)td單元格時(shí)，原來的那個(gè)參數(shù)糾錯(cuò)的標(biāo)簽才會(huì)消失，這樣的話td的mouseout事件就不可用了。
我的想法就是利用jquery中的remove方法，每回進(jìn)到mouseover事件時(shí)，首先先把當(dāng)前頁面中的參數(shù)糾錯(cuò)的標(biāo)簽移除，然后再在當(dāng)前的td單元格內(nèi)加上參數(shù)糾錯(cuò)的HTML標(biāo)簽。
廢話講多了，看如下正確的代碼：
以上代碼是我測(cè)試成功的代碼，起初我是不想在td標(biāo)簽上加onmousemove參數(shù)的，想利用jquery直接在$(function(){})中給第個(gè)td標(biāo)簽加上mousemove方法，但是最后測(cè)試不成功，如下是錯(cuò)誤的代碼：
以上代碼的錯(cuò)誤出在哪里讓自己想了N久，最后基本理解，由于JS的事件觸發(fā)是一個(gè)冒泡機(jī)制的，大概就是因?yàn)槲以贘S代碼中給td標(biāo)簽加了mouseover事件，這樣在顯示出來的時(shí)候當(dāng)我移到td內(nèi)的a標(biāo)簽上時(shí)也觸發(fā)了td的mouseover事件，所以會(huì)出錯(cuò)，而之前的那個(gè)直接把mouseover事件加上HTML標(biāo)簽上的就不會(huì)有這個(gè)問題吧。
源碼下載：http://niunan.net/download/jiucuo.rar
雖然看起來好像蠻簡(jiǎn)單，但是自己還是想了一下午加上晚上的2個(gè)小時(shí)，不過等到自己做出來的時(shí)候好像也感覺到蠻簡(jiǎn)單的，其實(shí)這種web頁面的小特效只要把思路想通了就很簡(jiǎn)單了，呵呵，只是思路，不能說是算法，算法太高深，ME也不懂。
看到這個(gè)效果很容易想到，無非也就是給那個(gè)td單元格加上一個(gè)mouseover事件，當(dāng)鼠標(biāo)移上出的時(shí)候就出現(xiàn)那個(gè)“參數(shù)糾錯(cuò)”的HTML標(biāo)簽。
用firebug查看中關(guān)村的頁面，可以那到那個(gè)參數(shù)糾錯(cuò)無非也就是一個(gè)span標(biāo)簽中包含一個(gè)img和一段文字，然后給他一個(gè)向右浮動(dòng)，這樣自然會(huì)靠在td的右邊。
需要注意的是當(dāng)鼠標(biāo)移開td單元格了以后，那個(gè)參數(shù)糾錯(cuò)的標(biāo)簽還是顯示的，只有當(dāng)鼠標(biāo)移到另一個(gè)td單元格時(shí)，原來的那個(gè)參數(shù)糾錯(cuò)的標(biāo)簽才會(huì)消失，這樣的話td的mouseout事件就不可用了。
我的想法就是利用jquery中的remove方法，每回進(jìn)到mouseover事件時(shí)，首先先把當(dāng)前頁面中的參數(shù)糾錯(cuò)的標(biāo)簽移除，然后再在當(dāng)前的td單元格內(nèi)加上參數(shù)糾錯(cuò)的HTML標(biāo)簽。
廢話講多了，看如下正確的代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>產(chǎn)品糾錯(cuò)</title>
<style type="text/css">
.param_td
{
line-height: 25px;
}
.param_td a
{
font-size: 12px;
}
.param_td a:link, .param_td a:visited
{
text-decoration: none;
color: #0368A8;
}
.param_td a:hover
{
text-decoration: underline;
color: #FF6600;
}
</style>
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
function show(obj_td) {
/*
鼠標(biāo)移到td單元格中，首先先把當(dāng)前頁面中糾錯(cuò)的HTML標(biāo)簽去掉，
再把糾錯(cuò)的HTML標(biāo)簽加到當(dāng)前單元格中
*/
$("#param_jiucuo").remove();
var td = $(obj_td);
var tmp = td.text().replace("參數(shù)糾錯(cuò)", "");
var html_jiucuo = "<span bgcolor='#ffffff' style='float: right;' id='param_jiucuo'>" +
"<img src='http://icon.zol.com.cn/detail0802/e2.gif'/>" +
"<a href='javascript:alert(\"" + tmp + "\")'>參數(shù)糾錯(cuò)</a>" +
"</span>";
td.html(html_jiucuo + tmp);
}
</script>
</head>
<body>
<table width="770" cellspacing="1" cellpadding="0" border="0" bgcolor="#c5d7ed">
<tbody>
<tr>
<td width="100" bgcolor="#ffffff" valign="middle" align="left">
<strong>手機(jī)類型</strong>
</td>
<td width="450" bgcolor="#ffffff" class="param_td" onmousemove="show(this)">
智能手機(jī),3G手機(jī)
</td>
</tr>
<tr>
<td width="100" bgcolor="#ffffff" valign="middle" align="left">
<strong>手機(jī)制式</strong>
</td>
<td width="450" bgcolor="#ffffff" class="param_td" onmousemove="show(this)">
GSM、WCDMA
</td>
</tr>
<tr>
<td width="100" bgcolor="#ffffff" valign="middle" align="left">
<strong>支持頻段</strong>
</td>
<td width="450" bgcolor="#ffffff" class="param_td" onmousemove="show(this)">
GSM 900/1800/1900MHz
</td>
</tr>
</tbody>
</table>
</body>
</html>
以上代碼是我測(cè)試成功的代碼，起初我是不想在td標(biāo)簽上加onmousemove參數(shù)的，想利用jquery直接在$(function(){})中給第個(gè)td標(biāo)簽加上mousemove方法，但是最后測(cè)試不成功，如下是錯(cuò)誤的代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>產(chǎn)品糾錯(cuò)-有問題的頁面</title>
<style type="text/css">
.param_td
{
line-height: 25px;
}
.param_td a
{
font-size: 12px;
}
.param_td a:link, .param_td a:visited
{
text-decoration: none;
color: #0368A8;
}
.param_td a:hover
{
text-decoration: underline;
color: #FF6600;
}
</style>
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
/*
由于JS的冒泡事件機(jī)制，給td加個(gè)mouseover事件后也會(huì)自動(dòng)給td內(nèi)的a標(biāo)簽加上
該事件，所以就會(huì)有問題
*/
$(".param_td").mouseover(function() {
var td = $(this);
$("#param_jiucuo").remove();
var tmp = $.trim(td.text().replace("參數(shù)糾錯(cuò)", ""));
var html_jiucuo = "<span bgcolor='#ffffff' style='float: right;' id='param_jiucuo'>" +
"<img src='http://icon.zol.com.cn/detail0802/e2.gif'/>" +
"<a href='javascript:alert(\"" + tmp + "\")'>參數(shù)糾錯(cuò)</a>" +
"</span>";
td.html(html_jiucuo + tmp);
});
})
</script>
</head>
<body>
<table width="770" cellspacing="1" cellpadding="0" border="0" bgcolor="#c5d7ed">
<tbody>
<tr>
<td width="100" bgcolor="#ffffff" valign="middle" align="left">
<strong>手機(jī)類型</strong>
</td>
<td width="450" bgcolor="#ffffff" class="param_td">
智能手機(jī),3G手機(jī)
</td>
</tr>
<tr>
<td width="100" bgcolor="#ffffff" valign="middle" align="left">
<strong>手機(jī)制式</strong>
</td>
<td width="450" bgcolor="#ffffff" class="param_td">
GSM、WCDMA
</td>
</tr>
<tr>
<td width="100" bgcolor="#ffffff" valign="middle" align="left">
<strong>支持頻段</strong>
</td>
<td width="450" bgcolor="#ffffff" class="param_td">
GSM 900/1800/1900MHz
</td>
</tr>
</tbody>
</table>
</body>
</html>
以上代碼的錯(cuò)誤出在哪里讓自己想了N久，最后基本理解，由于JS的事件觸發(fā)是一個(gè)冒泡機(jī)制的，大概就是因?yàn)槲以贘S代碼中給td標(biāo)簽加了mouseover事件，這樣在顯示出來的時(shí)候當(dāng)我移到td內(nèi)的a標(biāo)簽上時(shí)也觸發(fā)了td的mouseover事件，所以會(huì)出錯(cuò)，而之前的那個(gè)直接把mouseover事件加上HTML標(biāo)簽上的就不會(huì)有這個(gè)問題吧。
源碼下載：http://niunan.net/download/jiucuo.rar
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號(hào)聯(lián)系： 360901061
您的支持是博主寫作最大的動(dòng)力，如果您喜歡我的文章，感覺我的文章對(duì)您有幫助，請(qǐng)用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點(diǎn)擊下面給點(diǎn)支持吧，站長非常感激您！手機(jī)微信長按不能支付解決辦法：請(qǐng)將微信支付二維碼保存到相冊(cè)，切換到微信，然后點(diǎn)擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對(duì)您有幫助就好】元
