- 浏览: 3292020 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (567)
- Web前端-html/表单 (19)
- Web前端-CSS (24)
- Web前端-CSS框架 (4)
- Web前端-JS语言核心 (50)
- Web前端-JS客户端 (26)
- nodejs生态+grunt (10)
- seajs和requirejs (9)
- backbone等框架 (7)
- 模板基础 (7)
- Web前端-deps(不改动) (6)
- Web前端-component (10)
- Web前端-jquery-plugin (13)
- 浏览器兼容性 (6)
- Web前端-使用jQuery (25)
- Web前端-使用jqueryui (6)
- Web前端-性能优化 (3)
- Web协议-HTTP (6)
- ExtJS (13)
- PHP (22)
- PHP面向对象 (4)
- PHP扩展-SOAP (6)
- PHP扩展-curl (4)
- PHP与HTML(导出) (5)
- PHP扩展-综合 (7)
- mysql基础应用 (18)
- 技术心情 (18)
- 算法和面试题 (17)
- 工具(开发)使用 (36)
- memcached原理 (2)
- session和cookie (4)
- UML (2)
- Web前端_FusionCharts (5)
- Web前端_Flex (4)
- Web前端_JSP (3)
- JavaSE (10)
- JavaEE (4)
- tomcat (2)
- Servlet开发 (3)
- Spring开发 (1)
- REST相关 (2)
- 大访问量、高并发 (2)
- 网络编程 (1)
- YII (21)
- linux命令和内核 (12)
- yii与数据库 (10)
- yii与表单 (12)
- yii view层 (1)
- perl (7)
- yii扩展 (7)
- shell (4)
- photoshop (7)
- 视觉设计 (2)
- 我关注的名人在路上 (4)
- 1-自学能力 (1)
- 2-人际沟通能力 (3)
- 3-职业规划能力 (7)
- 4-项目管理能力 (2)
- python (3)
- django (4)
- Mysql高级应用 (6)
- prototype.js (4)
- Web系统安全 (1)
- Web前端-mobile (2)
- egret (6)
- jQuery源码分析 (5)
- fis (4)
最新评论
-
yzq21056563:
感谢作者分享~请教下,http://www.lisa33xia ...
CSS基础:text-overflow:ellipsis溢出文本 -
u012206458:
$.ajax的error,complete,success方法 -
DEMONU:
谢谢,虽然不能给你赞助,但是要给你顶
mysql中key 、primary key 、unique key 与index区别 -
njupt_tolmes:
阿凡达阿凡达阿凡达阿凡达阿凡达阿凡达阿凡达阿凡达阿凡达阿滕庆亚 ...
CSS基础:text-overflow:ellipsis溢出文本 -
zenmshuo:
用过SpreadJS,也包含数据可视化的图表
推荐几个web中常用js图表插件
zccst整理
为方便直接使用,两个代码如下
(一)截图
代码
(二)
截图
代码
为方便直接使用,两个代码如下
(一)截图
代码
<!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> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <script type="text/javascript"><!--//--><![CDATA[//><!-- startList = function() { if (document.all&&document.getElementById) { navRoot = document.getElementById("nav"); for (i=0; i<navRoot.childNodes.length; i++) { node = navRoot.childNodes[i]; if (node.nodeName=="LI") { node.onmouseover=function() { this.className+=" over"; } node.onmouseout=function() { this.className=this.className.replace(" over", ""); } } } } } window.onload=startList; //--><!]]></script> <style type="text/css"> body{ text-align: center; font-size:12px; font-family:"宋体"; } #popimg{ WIDTH:770px; margin:0 auto; text-align:center; } #popimg2{ WIDTH:770px; margin:0 auto; text-align:center; z-index:-1; } ul { padding: 0; margin: 0; list-style: none; } li { position:relative; float: left; width: 110px; } li ul { position:absolute; display: none; top: 20px;left:0; } li:hover ul, li.over ul { display: block; } ul li a{ display:block; font-size:12px; border: 1px solid #ccc; padding:3px; margin-right:1px; text-decoration: none; color: #777;background:#eee; } ul li a:hover{ background-color:#f4f4f4; } #test{ clear:both; background-color:#999999; width:769px; height:100px; margin:0 auto; } </style> </head> <body> <div id="popimg"> <ul id="nav"> <li><a href="">文章</a> <ul> <li ><a href="">CSS教程</a> </li> <li ><a href="">DOM教程</a></li> <li ><a href="">XML教程</a></li> <li ><a href="">Flash教程</a></li> </ul> </li> <li><a href="">参考</a> <ul> <li><a href="">XHTML</a></li> <li><a href="">XML</a></li> <li><a href="">CSS</a></li> </ul> </li> <li><a href="">博客</a> <ul> <li><a href="">全部</a></li> <li><a href="">网页技术</a></li> <li><a href="">UI技术</a></li> <li><a href="">FLASH技术</a></li> </ul> </li> <li><a href="">文章</a> <ul> <li ><a href="">CSS教程</a> </li> <li ><a href="">DOM教程</a></li> <li ><a href="">XML教程</a></li> <li ><a href="">Flash教程</a></li> </ul> </li> <li><a href="">参考</a> <ul> <li><a href="">XHTML</a></li> <li><a href="">XML</a></li> <li><a href="">CSS</a></li> </ul> </li> <li><a href="">博客</a> <ul> <li><a href="">全部</a></li> <li><a href="">网页技术</a></li> <li><a href="">UI技术</a></li> <li><a href="">FLASH技术</a></li> </ul> </li> <li><a href="">博客</a> <ul> <li><a href="">全部</a></li> <li><a href="">网页技术</a></li> <li><a href="">UI技术</a></li> <li><a href="">FLASH技术</a></li> </ul> </li> </ul> </div> <div id="popimg2"> <div id="test"></div> </div> </body> </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" lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>css菜单演示</title> <style type="text/css"> <!-- *{margin:0;padding:0;border:0;} body { font-family: arial, 宋体, serif; font-size:12px; } #contain{ margin:0px auto; width:1003px; background:#CCCCCC; position:relative;} #nav { line-height: 24px; list-style-type: none; background:#666; } #nav a { display: block; width: 80px; text-align:center; } #nav a:link { color:#666; text-decoration:none; } #nav a:visited { color:#666;text-decoration:none; } #nav a:hover { color:#FFF;text-decoration:none;font-weight:bold; } #nav li { float: left; width: 80px; background:#CCC; } #nav li a:hover{ background:#999; } #nav li ul { line-height: 27px; list-style-type: none;text-align:left; left: -999em; width: 980px; position: absolute; float:left; } #nav li ul li{ float: left; width: 80px; background: #F6F6F6; } #nav li ul a{ display: block; width: 80px;text-align:center; } #nav li ul a:link { color:#666; text-decoration:none; } #nav li ul a:visited { color:#666;text-decoration:none; } #nav li ul a:hover { color:#F3F3F3;text-decoration:none;font-weight:normal; background:#C00; } #nav li:hover ul { margin-left:0px; } #nav li.sfhover ul { left: 0; } #content { clear: left; } --> </style> <script type=text/javascript><!--//--><![CDATA[//><!-- function menuFix() { var sfEls = document.getElementById("nav").getElementsByTagName("li"); for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover=function() { this.className+=(this.className.length>0? " ": "") + "sfhover"; } sfEls[i].onMouseDown=function() { this.className+=(this.className.length>0? " ": "") + "sfhover"; } sfEls[i].onMouseUp=function() { this.className+=(this.className.length>0? " ": "") + "sfhover"; } sfEls[i].onmouseout=function() { this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"), ""); } } } window.onload=menuFix; //--><!]]></script> </head> <body> <div id="contain"> <ul id="nav"> <li><a href="#">菜单一级</a> <ul> <li><a href="#">菜单一级</a></li> <li><a href="#">菜单一级</a></li> <li><a href="#">菜单一级</a></li> <li><a href="#">菜单一级</a></li> <li><a href="#">菜单一级</a></li> <li><a href="#">菜单一级</a></li> </ul> </li> <li><a href="#">菜单二级</a> <ul> <li><a href="#">菜单二级</a></li> <li><a href="#">菜单二级</a></li> <li><a href="#">菜单二级</a></li> <li><a href="#">菜单二级服</a></li> <li><a href="#">菜单二级</a></li> <li><a href="#">菜单二级</a></li> </ul> </li> <li><a href="#">菜单三级</a> <ul> <li><a href="#">菜单三级</a></li> <li><a href="#">菜单三级</a></li> <li><a href="#">菜单三级</a></li> <li><a href="#">菜单三级</a></li> </ul> </li> <li><a href="#">菜单四级</a> <ul> <li><a href="#">菜单四级</a></li> <li><a href="#">菜单四级</a></li> <li><a href="#">菜单四级</a></li> <li><a href="#">菜单四级</a></li> <li><a href="#">菜单四级</a></li> </ul> </li> </ul> </div> </body> </html>
发表评论
-
uploader.js组件原理
2014-11-14 17:07 11854作者:zccst 2014-12-04 重复提交时的bug ... -
基于jscal2单日历与双日历控件的实现
2014-08-27 18:51 1484作者:zccst 由单日历改为双日历,整整花了1.5天的实现 ... -
自己写插件的开始
2014-07-25 18:06 596作者:zccst 很久以前就会使用别人写好的插件了,大概是2 ... -
图片轮播(自己实现)
2014-05-27 22:27 1675作者:zccst 2014-09-21 图片轮播的思路是: ... -
插件实现原理-自己总结
2012-10-31 19:05 1214作者:zccst /*file1 ** gms.j ... -
图片轮播(多种实现)
2012-05-13 12:57 1283作者:zccst 图片轮播有很多种形式,且大多可复用性很高。 ... -
二级菜单(插件网址收藏)
2012-05-01 16:53 964作者:zccst 较好的连接地址收藏: 1,阿里西西 批注 ... -
javascript的一些效果的实现原理(一)
2012-02-25 11:53 1680作者:zccst 一、腾讯qq,鼠标移到头像上,展示个人信息 ... -
jquery 鼠标滚轮效果
2011-09-22 15:35 1399【译】鼠标滚轮来控制input框的值 http://www.r ...
相关推荐
2个目标文件 摘要:Java源码,网络相关,UDP 基于JAVA的UDP服务器模型源代码,内含UDP服务器端模型和UDP客户端模型两个小程序,向JAVA初学者演示UDP C/S结构的原理。 简单聊天软件CS模式 2个目标文件 一个简单的CS模式...
读过本书第1版的朋友将会注意到第2版的两个相当明显的变化。首先,本版包括7个新章节,1章用于讲解MFC视图类,1章涵盖MFC集合类;1章介绍MFC文件I/0和串行化机制,4章讨论了MFC和COM的关系。MFC不是类似活动模板...
第2章(\代码\第02章) • sample01.htm 将JavaScript代码插入在标签与标签之间 • sample02.htm 将JavaScript代码放在了标签与标签之间 • sample03.htm JavaScript与HTML混合执行 • ...
该资料是《Visual C++ 2010入门经典(第5版)》的源代码及课后练习答案 对应的书籍资料见: Visual C++ 2010入门经典(第5版) 基本信息 原书名: Ivor Horton's Beginning Visual C++ 2010 原出版社: Wrox 作者: ...
\和Java的“一次编译,到处运行”跨平台不同的是,Qt是源代码级的跨平台,一次编写,随处编译。一次开发的Qt应用程序可以移植到不同的平台上,只需重新编译即可运行。Qt支持的平台有: \? Microsoft Windows,包括...
毕业设计,基于SpringBoot+Vue+MySql开发的前后端分离的学生综合素质评价系统,内含Java完整源代码,数据库 软件简介 本软件是基于 Vue 和 SpringBoot 的学生综合素质评价系统,包含了学生端、教师端和教务处端。 ...
控件的效果就是类似百度糯米或者美团的二级菜单,我开发iOS的客户端菜单功能,直接参考了git一个项目,对应的UI效果: 其实效果看起来还不错。iOS开发完成以后,又要准备开发Android,发现对应网上的案例还是很少的...
两点二:动态生成各类报表。 亮点三:工作流优化,方便新建任意格式审批单。 亮点四:功能授权于数据授权并用,可对多部门,多人员进行进行交叉授权。 亮点五:提供“智能窗体”向导,可任您快速且自由地制作多...
实例127 一个文件变成多个小文件 178 实例128 多个小文件合成一个文件 181 实例129 统计指定文件中的字符个数 183 实例130 对象的序列化与反序列化 185 实例131 同时显示多个文件 187 实例132...
\和Java的“一次编译,到处运行”跨平台不同的是,Qt是源代码级的跨平台,一次编写,随处编译。一次开发的Qt应用程序可以移植到不同的平台上,只需重新编译即可运行。Qt支持的平台有: \? Microsoft Windows,包括...
内容索引:脚本资源,jQuery,动感菜单,水平导航菜单 jQuery 带动态效果的两级横向导航菜单,全部是由jquery+CSS代码完成,菜单很简洁,使用背景色平铺而成,因此没有使用GIF等图像资源,这个菜单可以两级展开,当把...
《jQuery权威指南》除了理论知识丰富而全面外,它还有一个最大的特点就是注重实战,每个知识点都有一个完整的案例,包括需求分析、代码实现和结果展示三个部分,而且还包含两个综合性的案例,它的实践性之强是目前...
压缩包内有两个源码包,一个是注册机源程序,另一个是解密机的源程序,一套完整的参考实例。 VC+MapX源码含GPS跟踪演示 VC3D 利用VC编程在界面上实现3D文字 在MFC应用程序中浏览PDF、Word文档文件 vcdialog 自...
压缩包内有两个源码包,一个是注册机源程序,另一个是解密机的源程序,一套完整的参考实例。 VC+MapX源码含GPS跟踪演示 VC3D 利用VC编程在界面上实现3D文字 在MFC应用程序中浏览PDF、Word文档文件 vcdialog 自...
该资料是《Visual C++ 2005入门经典》的源代码及课后练习答案 对应的书籍资料见: Visual C++ 2005入门经典 基本信息 原书名: Ivor Horton's Beginning Visual C++ 2005 原出版社: Wiley 作者: (美)Ivor Horton...
a)游戏难度等级设置:初级、中级、高级三个难度等级,每个难度等级又实现了三级加速,主要包括一级加速、二级加速、三级加速; b)蛇体颜色设置:绿色、红色、蓝色、黑色四种颜色可以选择; c) 蛇体宽度设置:初始...
8. 注意通过以上两个方式添加的新闻频道地址一定是符合在线新闻阅读器规范的(例如Rss和Atom格式的地址,否则可能频道添加会出异常). D. 删除频道 1. 在频道资源管理器选中你要删除的频道(注意,节点一定要选中...
基于JAVA的UDP服务器模型源代码,内含UDP服务器端模型和UDP客户端模型两个小程序,向JAVA初学者演示UDP C/S结构的原理。 简单聊天软件CS模式 2个目标文件 一个简单的CS模式的聊天软件,用socket实现,比较简单。 ...
《远程控制编程技术》源代码 内含(重启、图片操作、ip操作、键盘与鼠标、客户端以及服务端、文件传输等实例源码) 多个VC++加密解密算法库(CRYPT++) 详细讲解了Crypt++的加密解密的使用以及其它的加密解密方法...