- 浏览: 700040 次
- 性别:
- 来自: 南宁
文章分类
最新评论
-
如果我爱上你的笑容:
牛腩老师讲的课很棒 目前新闻发系统学习中 `(*∩_∩*)′
64位win8.1系统安装intelhaxm -
k04110411:
jhlovett 写道牛哥,想问下 public void P ...
ASP.NET通过HTML的上传文件标签来上传文件 -
liuzhijie3:
我也留个脚印用到了,讲的不错
.NET中获取字符串的MD5码 -
han_yankun2009:
,楠老师不错呀
在一堆数中查询相加得某个数的组合 -
allstara609:
请问牛老师,datalist中如何去掉数字中多余的0?
去掉数字中多余的0(ASP.NET)
今天突然想在正在做的网站中加上个像中关村一样的参数纠错的功能,效果如下图:
虽然看起来好像蛮简单,但是自己还是想了一下午加上晚上的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
发表评论
-
jquery制作select列表双向选择
2010-06-15 12:43 1853做项目的时候要用到的一个小功能,以前做过的,用的纯JS ... -
锋利的jQuery实例-图片滚动
2009-11-15 16:02 2745效果看图: 点击按钮后的动画思路倒很容易弄懂,主要就是开始的 ... -
jquery访中关村商城排行榜特效
2009-08-08 11:04 1712目前公司的网站上要用到的效果,其实也算不上什么特效,无非 ... -
框架frame自适应内容高度
2009-07-31 16:17 2976让框架frame自动适应内容的高度 在每个框架子页面中加入如下 ... -
jQuery插件—获取URL参数
2009-06-20 12:44 3975做的项目中需要用到通过JS获取GET参数,上网找了一下,找到如 ... -
鼠标移到某一元素则在元素旁边出现弹出框
2009-05-12 20:54 1855类似于当当网的发货以后的那个发货反馈,鼠标移上去后自动会 ... -
JQuery控制图片无缝滚动
2009-05-10 21:05 6398经常有人问怎么在HTML上制作图片的无缝滚动,我自己在一些项目 ... -
jquery xpath详解
2009-02-17 11:27 3141比如下面html代码 <ul> <li cl ... -
jQuery中使用插件解决ie6下selectfqg元素设置z-index无效的问题!
2009-02-11 11:05 3976没用插件时的效果如下,这是在IE6下预览的结果,层 ... -
jQuery控制元素间隔滚动!
2009-01-12 12:14 1854只记录了本人需要用到的,转载自http://www.yaosa ... -
jquery中筛选表格的特定行数后进行操作
2009-01-06 11:55 3029项目中有个地方,一个页面显示两种商品,显示商品参数的时 ... -
jQuery插件_jcarousel(用于图片滚动)
2008-12-26 14:17 7601效果图如下: 目前制作的项目中用到,先记下来,以备不时之需 ... -
制作多级滑动tab菜单
2008-11-26 11:47 4386效果演示网站:http://kr.shopping.yahoo ... -
jQuery实战(四) - tab菜单
2008-11-19 13:55 2306很多天前就已经看完jQuery实战第四讲了,不过一直没有时间做 ... -
jQuery实战(三)
2008-11-16 15:37 2037刚刚看完第三讲,是用jQuery制作下拉菜单,自己也试着做了一 ... -
只能输入数字的文本框(兼容ie6,7,8,opera,ff,chrome)
2008-11-16 10:36 5625星期天上班真不知道干什么事哦,只好随便看看之前下载的电子书了, ... -
jQuery实战(二)
2008-11-06 11:06 2983很久不上来写文章了,嘿嘿,最近在做一个简单的新闻发布系 ... -
制作符合WEB标准的QQ弹出消息(jQuery)
2008-10-29 11:49 4863这里所说的弹出消息指的是在网页右下角升起又下去的那种框框,在这 ... -
jQuery实战(一)
2008-10-27 12:02 5099从ITCAST上看到出了个jQuery实战的视频(ht ... -
符合WEB标准的浮动层(jQuery版)!
2008-10-26 15:10 11284网上有好多的浮动层之类的代码,所谓的浮动层,就是层里的 ...
相关推荐
中关村的手机参数采集.rar 中关村的手机参数采集.rar 中关村的手机参数采集.rar 中关村的手机参数采集.rar 中关村的手机参数采集.rar 中关村的手机参数采集.rar
易语言中关村的手机参数采集源码,中关村的手机参数采集,搜索子程序,URL网址utf8编码,启动多线程,URL网址编码,返回时间,Api_CreateThread,DLL命令1
易语言中关村的手机参数采集易语言源码.rar 易语言中关村的手机参数采集易语言源码.rar 易语言中关村的手机参数采集易语言源码.rar 易语言中关村的手机参数采集易语言源码.rar 易语言中关村的手机参数采集易语言...
仿中关村在线参数修改弹出对话框源码 程序描述: 模仿中关村在线商品展览页面中点击编辑按钮后弹出窗口修改商品信息的功能。 日志: 命名规则: 1、所有由多个单词组成的对象(类、函数、属性、变量、字段等)的...
中关村实时报价器让你随时,快速.准确.的知道现在流行的各种产品价格.很方便哦,小程序.
中关村的手机参数采集易语言源码.zip易语言项目例子源码下载中关村的手机参数采集易语言源码.zip易语言项目例子源码下载中关村的手机参数采集易语言源码.zip易语言项目例子源码下载 1.合个人学习技术做项目参考 2....
中关村的手机参数采集易语言源码.rar
仿中关村在线参数修改弹出对话框 v1.1源码 程序描述: 模仿中关村在线商品展览页面中点击编辑按钮后弹出窗口修改商品信息的功能。 命名规则: 1、所有由多个单词组成的对象(类、函数、属性、变量、字段等)的...
技术特点:基于传统的三层架构 功能描述:仿中关村在线参数修改弹出对话框, 并可以向数据库中传入除string以外为其它类数据传入null值
这是一个仿照中关村在线注册登录的一个模板
php+mysql仿中关村商城网站源码-带限时抢购功能 第一步: 访问install目录进行安装, 第二步: 访问install目录进行安装 打开http://域名/bak 用户名:admin 密:123456 还原数据库 还原后: 账号:admin 密码:...
中关村储能联盟:储能产业研究白皮书2021(20页).pdf
中关村IT报价系统,已安装测试无措。中关村IT报价系统,已安装测试无措。
运行环境:Visual studio 2010 SP1、Sql Server 2008 R2 技术特点: 功能描述: 注意事项: 修改 Vilidate.cs中的修改 1、对于 “验证一个对象输入的是否全部都是[数字]”的验证函数进行了修改(2011-11-4) ...
中关村在线手机客户端Android版,是中关村在线针对Android用户推出的一款集实时报价、IT资讯新闻、IT数码论坛、产品点评等功能为一体的应用。这是IT垂直媒体在移动互联网领域的第一款应用。 特色功能介绍: 1.看...
程序结合易语言扩展界面支持库,调用API函数实现中关村的手机参数数据的采集。易语言例程还使用到易语言互联网支持库,易语言编码转换支持库,超文本浏览框支持库,正则表达式支持库。
目前手机市场上最全的安卓手机机型参数大全, 一共4个文件,自己收集整理 包含 一个manufacturer(制造商),brand(品牌),model(型号),market_name(市场名称)大小2.4M多手机型号库json文件 一个中关村在线手机爬虫收集...
中关村昌平区媒体资料审批制作.pptx
仿中关村 电脑报价系统 演示我没有放了! 也不需要多少的积分! 自己下了后去测试吧! 反正有一个还挺完整的!不知道是这个,还是福州it系统! 我都会放出来的!
中关村电子产品景气指数_数码配件.xls