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