中关村网站产品参数页的参数纠错的制作
2009-06-16 21:25
239 查看
今天突然想在正在做的网站中加上个像中关村一样的参数纠错的功能，效果如下图：
虽然看起来好像蛮简单，但是自己还是想了一下午加上晚上的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://taotao.wsyren.com/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://taotao.wsyren.com/download/jiucuo.rar
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 牛腩购物32：完成整个网站的功能制作（后台产品列表，多表查询+分页）,产品修改保存，图片的上传保存
- 制作网站产品浏览记录
- [招聘] 北京中关村某公司招聘网站程序员（.net,php）
- ASP动态网站制作中使用MYSQL的分析
- 使用ASP.NET从零开始制作设计网站之四
- ps从零开始之制作图片水印制作网站水印
- 【网站制作视频教程】-第06讲 html列表与图片应用！-传智播客
- 购物网站5：产品设计--品牌----产品信息---产品样式---产品类型----性别
- 【网站制作视频教程】-第08讲 html表格应用详解！-传智播客
- 新手怎么学习网站制作？
- 网站网址图标制作
- www.yzcode.com Flash广告下载，自己利用从此网站下载的Flash广告制作了自己第一个广告
- dedecms网站地图xml制作方法 seo一日一贴
- 【网站制作视频教程】-第15讲 html框架技术！-传智播客
- 项目经理，产品经理，网站运营,你选哪一个? 收藏
- 报表制作工具内置参数查询界面布局与背景
- 给大家推荐一个制作Loading图片的网站
- 找到一个学习建站\网页制作的好网站!
- 网站制作素材：创意的404错误页面下载
- ASP.NET 视频教程 商务网站 购物车制作 VS2008 C# SQL2005 开发