`
niunan
  • 浏览: 721155 次
  • 性别: Icon_minigender_1
  • 来自: 南宁
社区版块
存档分类
最新评论

中关村网站产品参数页的参数纠错的制作

阅读更多
今天突然想在正在做的网站中加上个像中关村一样的参数纠错的功能,效果如下图:

虽然看起来好像蛮简单,但是自己还是想了一下午加上晚上的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
分享到:
评论

相关推荐

    中关村的手机参数采集.rar

    标题中的“中关村的手机参数采集.rar”显然指向了一个与手机参数相关的数据收集项目,可能是通过网络爬虫技术从中关村在线等网站抓取的手机产品信息。这个项目可能涉及到的技术包括但不限于网页解析、数据抓取、数据...

    易语言中关村的手机参数采集

    易语言支持多线程编程,通过创建并运行多个线程,我们可以并发地从中关村网站获取手机参数,显著减少整体的采集时间。 4. **URL网址编码与解码**:除了UTF8编码,URL还可能涉及到其他编码格式,如ASCII或GBK。...

    易语言中关村的手机参数采集易语言源码.rar

    易语言中关村的手机参数采集易语言源码.rar 易语言中关村的手机参数采集易语言源码.rar 易语言中关村的手机参数采集易语言源码.rar 易语言中关村的手机参数采集易语言源码.rar 易语言中关村的手机参数采集易语言...

    中关村实时报价器(各种数码产品)

    【中关村实时报价器】是一款专为数码爱好者和消费者设计的小程序,它提供了全面、快速、准确的数码产品报价服务。这款工具集成了中关村这个中国知名的电子产品市场的数据,让用户能够随时随地获取到市场上最新的产品...

    中关村的手机参数采集易语言源码.rar

    在这个项目中,易语言被用来编写程序,从中关村这个知名的电子产品资讯网站上抓取手机的参数信息。 首先,我们需要了解易语言中的网络模块。易语言提供了完善的网络功能支持,包括HTTP请求、数据传输等,使得开发者...

    仿中关村在线参数修改弹出对话框源码

    仿中关村在线参数修改弹出对话框源码 程序描述: 模仿中关村在线商品展览页面中点击编辑按钮后弹出窗口修改商品信息的功能。 日志: 命名规则: 1、所有由多个单词组成的对象(类、函数、属性、变量、字段等)的...

    仿中关村在线注册登录页面模板

    中关村在线是中国知名的科技资讯网站,其用户界面设计通常简洁明了,易于操作。因此,这个模板可能包含了输入框、按钮、提示信息等元素,以模仿ZOL的用户体验。 【标签】"登录页面"指示了这个模板的核心功能。登录...

    仿中关村在线参数修改弹出对话框

    对于“仿中关村在线参数修改弹出对话框”,它应该是模仿了中关村在线网站的某个特定功能,比如产品配置修改,对话框可能包含一系列可编辑的参数,如CPU、内存、硬盘等。用户在对话框中进行选择或输入后,点击确认...

    中关村的手机参数采集易语言源码.zip易语言项目例子源码下载

    中关村的手机参数采集易语言源码.zip易语言项目例子源码下载中关村的手机参数采集易语言源码.zip易语言项目例子源码下载中关村的手机参数采集易语言源码.zip易语言项目例子源码下载 1.合个人学习技术做项目参考 2....

    仿中关村在线参数修改弹出对话框 v1.1源码

    仿中关村在线参数修改弹出对话框 v1.1源码 程序描述: 模仿中关村在线商品展览页面中点击编辑按钮后弹出窗口修改商品信息的功能。 命名规则: 1、所有由多个单词组成的对象(类、函数、属性、变量、字段等)的...

    中关村IT报价系统源码

    【中关村IT报价系统】是一个专为信息技术领域设计的软件应用,它主要服务于中关村地区,提供实时、准确的IT产品价格信息。系统经过测试,确保在运行过程中无误,能够为用户带来稳定的服务体验。 该系统的核心功能...

    ecshop仿中关村商城模板

    “zol”是中关村在线的缩写,是中国知名的科技产品信息和评测网站,其商城部分具有一定的行业影响力和设计特色。 从压缩包子文件的文件名称列表来看: 1. `goods.php`:这是一个处理商品展示和管理的核心PHP文件,...

    易语言-中关村的手机参数采集

    《易语言-中关村的手机参数采集》是一款基于易语言编程的程序,主要功能是通过调用API函数,从中关村在线网站获取手机参数信息并进行数据采集。本文将深入解析该程序涉及的技术点,帮助读者理解易语言在互联网数据...

    中关村储能联盟:储能产业研究白皮书2021(20页).pdf

    中关村储能联盟:储能产业研究白皮书2021(20页).pdf

    中关村报价系统源码

    # 在资讯类信息与产品之间,进行有效关联,并在前台的资讯与产品页面体现。 # 产品库前台增加一个品牌与价格通道页面,进入产品检索。 # 广告与栏目更好地关联,并全面使用混合广告位(一个广告位同时支持图片、FLASH...

    仿中关村在线参数修改弹出对话框 V1.1

    运行环境:Visual studio 2010 SP1、Sql Server 2008 R2 技术特点: 功能描述: 注意事项: 修改 Vilidate.cs中的修改 1、对于 “验证一个对象输入的是否全部都是[数字]”的验证函数进行了修改(2011-11-4) ...

    仿中关村游戏模板一套(dede)

    【标题】"仿中关村游戏模板一套(dede)"指的是基于DEDE CMS(织梦内容管理系统)设计的一款网站模板,专门用于构建游戏类网站。这个模板在设计上参考了知名的科技资讯平台中关村在线的游戏频道,旨在为游戏爱好者提供...

    数据-行业数据-中关村电子产品景气指数_数码配件.rar

    《中关村电子产品景气指数与数码配件市场分析》 在当今科技日新月异的时代,电子产品已经成为日常生活和工作中不可或缺的一部分。特别是在中国,以中关村为代表的科技中心,其电子产品的发展状况往往被视为行业的...

    仿中关村商城网站源码-带限时抢购功能_Ecshop内核

    php+mysql仿中关村商城网站源码-带限时抢购功能 第一步: 访问install目录进行安装, 第二步: 访问install目录进行安装 打开http://域名/bak 用户名:admin 密:123456 还原数据库 还原后: 账号:admin 密码:...

    中关村在线

    中关村在线手机客户端Android版,是中关村在线针对Android用户推出的一款集实时报价、IT资讯新闻、IT数码论坛、产品点评等功能为一体的应用。这是IT垂直媒体在移动互联网领域的第一款应用。 特色功能介绍: 1.看...

Global site tag (gtag.js) - Google Analytics