今天突然想在正在做的網(wǎng)站中加上個像中關(guān)村一樣的參數(shù)糾錯的功能，效果如下圖：
雖然看起來好像蠻簡單，但是自己還是想了一下午加上晚上的2個小時，不過等到自己做出來的時候好像也感覺到蠻簡單的，其實這種web頁面的小特效只要把思路想通了就很簡單了，呵呵，只是思路，不能說是算法，算法太高深，ME也不懂。
看到這個效果很容易想到，無非也就是給那個td單元格加上一個mouseover事件，當鼠標移上出的時候就出現(xiàn)那個“參數(shù)糾錯”的HTML標簽。
用firebug查看中關(guān)村的頁面，可以那到那個參數(shù)糾錯無非也就是一個span標簽中包含一個img和一段文字，然后給他一個向右浮動，這樣自然會靠在td的右邊。
需要注意的是當鼠標移開td單元格了以后，那個參數(shù)糾錯的標簽還是顯示的，只有當鼠標移到另一個td單元格時，原來的那個參數(shù)糾錯的標簽才會消失，這樣的話td的mouseout事件就不可用了。
我的想法就是利用jquery中的remove方法，每回進到mouseover事件時，首先先把當前頁面中的參數(shù)糾錯的標簽移除，然后再在當前的td單元格內(nèi)加上參數(shù)糾錯的HTML標簽。
廢話講多了，看如下正確的代碼：
以上代碼是我測試成功的代碼，起初我是不想在td標簽上加onmousemove參數(shù)的，想利用jquery直接在$(function(){})中給第個td標簽加上mousemove方法，但是最后測試不成功，如下是錯誤的代碼：
以上代碼的錯誤出在哪里讓自己想了N久，最后基本理解，由于JS的事件觸發(fā)是一個冒泡機制的，大概就是因為我在JS代碼中給td標簽加了mouseover事件，這樣在顯示出來的時候當我移到td內(nèi)的a標簽上時也觸發(fā)了td的mouseover事件，所以會出錯，而之前的那個直接把mouseover事件加上HTML標簽上的就不會有這個問題吧。
源碼下載：http://niunan.net/download/jiucuo.rar
雖然看起來好像蠻簡單，但是自己還是想了一下午加上晚上的2個小時，不過等到自己做出來的時候好像也感覺到蠻簡單的，其實這種web頁面的小特效只要把思路想通了就很簡單了，呵呵，只是思路，不能說是算法，算法太高深，ME也不懂。
看到這個效果很容易想到，無非也就是給那個td單元格加上一個mouseover事件，當鼠標移上出的時候就出現(xiàn)那個“參數(shù)糾錯”的HTML標簽。
用firebug查看中關(guān)村的頁面，可以那到那個參數(shù)糾錯無非也就是一個span標簽中包含一個img和一段文字，然后給他一個向右浮動，這樣自然會靠在td的右邊。
需要注意的是當鼠標移開td單元格了以后，那個參數(shù)糾錯的標簽還是顯示的，只有當鼠標移到另一個td單元格時，原來的那個參數(shù)糾錯的標簽才會消失，這樣的話td的mouseout事件就不可用了。
我的想法就是利用jquery中的remove方法，每回進到mouseover事件時，首先先把當前頁面中的參數(shù)糾錯的標簽移除，然后再在當前的td單元格內(nèi)加上參數(shù)糾錯的HTML標簽。
廢話講多了，看如下正確的代碼：
<!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)品糾錯</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) {
/*
鼠標移到td單元格中，首先先把當前頁面中糾錯的HTML標簽去掉，
再把糾錯的HTML標簽加到當前單元格中
*/
$("#param_jiucuo").remove();
var td = $(obj_td);
var tmp = td.text().replace("參數(shù)糾錯", "");
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ù)糾錯</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>手機類型</strong>
</td>
<td width="450" bgcolor="#ffffff" class="param_td" onmousemove="show(this)">
智能手機,3G手機
</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、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>
以上代碼是我測試成功的代碼，起初我是不想在td標簽上加onmousemove參數(shù)的，想利用jquery直接在$(function(){})中給第個td標簽加上mousemove方法，但是最后測試不成功，如下是錯誤的代碼：
<!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)品糾錯-有問題的頁面</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的冒泡事件機制，給td加個mouseover事件后也會自動給td內(nèi)的a標簽加上
該事件，所以就會有問題
*/
$(".param_td").mouseover(function() {
var td = $(this);
$("#param_jiucuo").remove();
var tmp = $.trim(td.text().replace("參數(shù)糾錯", ""));
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ù)糾錯</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>手機類型</strong>
</td>
<td width="450" bgcolor="#ffffff" class="param_td">
智能手機,3G手機
</td>
</tr>
<tr>
<td width="100" bgcolor="#ffffff" valign="middle" align="left">
<strong>手機制式</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>
以上代碼的錯誤出在哪里讓自己想了N久，最后基本理解，由于JS的事件觸發(fā)是一個冒泡機制的，大概就是因為我在JS代碼中給td標簽加了mouseover事件，這樣在顯示出來的時候當我移到td內(nèi)的a標簽上時也觸發(fā)了td的mouseover事件，所以會出錯，而之前的那個直接把mouseover事件加上HTML標簽上的就不會有這個問題吧。
源碼下載：http://niunan.net/download/jiucuo.rar
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯(lián)系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
