- 浏览: 1049493 次
- 性别:
- 来自: 大连
文章分类
- 全部博客 (228)
- Web开发 (72)
- 页面相关 (43)
- java (33)
- struts (3)
- spring (14)
- oracle (16)
- mysql (13)
- SqlServer (13)
- tomact (7)
- weblogic (2)
- groovy (3)
- JFreeChart (4)
- JNative (2)
- dll (2)
- myeclipse (6)
- eclipse (10)
- svn (1)
- 正则表达式 (2)
- 设计模式 (1)
- 行业积累和感悟 (9)
- c# (2)
- maven (4)
- Node.js (1)
- 网络相关 (1)
- ftp文件上传下载 (2)
- jQuery (6)
- html5 (1)
- linux (5)
- PowerDesigner (2)
- Python (5)
- php (1)
- web service (5)
- MyBatis (4)
- 缓存相关 (3)
- Work summary (3)
- git&github (1)
- dubbo (1)
最新评论
-
fj520lb:
[flash=200,200][url][img][list] ...
Eclipse中将web项目自动发布到Tomcat webapps下 -
追梦少年蒋富贵:
楼主 你这个有问题 在 mapper 配置那段代码之后 ,不通 ...
spring+Mybatis+Ehcache整合 -
Blod123:
如果不在mapper中写 <cache type=&qu ...
spring+Mybatis+Ehcache整合 -
birllove:
看到这个终于搞好了 多谢哈
The prefix "mvc" for element "mvc:annotation-driven" is not bound 的解决方法 -
ccwwdd:
很好用。O(∩_∩)O谢谢分享!!!
ajax异步文件上传,servlet处理,含demo
本文转载自:http://www.jb51.net/article/14736.htm
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>orbitz-like behavior for hovering over table
cells-jsDoc.cn</title>
<style type="text/css">
.cssguycomments {
background: #eee;
border: #ddd;
padding: 8px;
margin-bottom: 40px;
}
.cssguycomments p {
font: normal 12px/18px verdana;
}
table {
border-collapse: collapse;
}
thead th {
font: bold 13px/18px georgia;
text-align: left;
background: #fff4c6;
color: #333;
padding: 8px 16px 8px 8px;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
}
thead th.null {
background: #fff;
}
tbody th {
font: bold 12px/15px georgia;
text-align: left;
background: #fff9e1;
color: #333;
padding: 8px;
border-bottom: 1px solid #f3f0e4;
border-right: 1px solid #fff;
}
tbody td {
font: normal 12px/15px georgia;
color: #333;
padding: 8px;
border-right: 1px solid #f3f0e4;
border-bottom: 1px solid #f3f0e4;
}
/* ��3���ǹؼ� --cssrain.cn */
tbody td.on {
background: green;
}
thead th.on {
background: red;
}
tbody th.on {
background: red;
}
</style>
<script type="text/javascript">
/*
For functions getElementsByClassName, addClassName, and removeClassName
Copyright Robert Nyman, <a href="http://www.robertnyman.com" target="_blank">http://www.robertnyman.com</a>
Free to use if this text is included
*/
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}
function getElementsByClassName(className, tag, elm) {
var testClass = new RegExp("(^|\\s)" + className + "(\\s|$)");
var tag = tag || "*";
var elm = elm || document;
var elements = (tag == "*" && elm.all) ? elm.all : elm
.getElementsByTagName(tag);
var returnElements = [];
var current;
var length = elements.length;
for ( var i = 0; i < length; i++) {
current = elements[i];
if (testClass.test(current.className)) {
returnElements.push(current);
}
}
return returnElements;
}
function addClassName(elm, className) {
var currentClass = elm.className;
if (!new RegExp(("(^|\\s)" + className + "(\\s|$)"), "i")
.test(currentClass)) {
elm.className = currentClass
+ ((currentClass.length > 0) ? " " : "") + className;
}
return elm.className;
}
function removeClassName(elm, className) {
var classToRemove = new RegExp(("(^|\\s)" + className + "(\\s|$)"), "i");
elm.className = elm.className.replace(classToRemove, "").replace(
/^\s+|\s+$/g, "");
return elm.className;
}
function makeTheTableHeadsHighlight() {
// get all the td's in the heart of the table...
var table = document.getElementById('rockartists');
var tbody = table.getElementsByTagName('tbody');
var tbodytds = table.getElementsByTagName('td');
// and loop through them...
for ( var i = 0; i < tbodytds.length; i++) {
// take note of their default class name
tbodytds[i].oldClassName = tbodytds[i].className;
// when someone moves their mouse over one of those cells...
tbodytds[i].onmouseover = function() {
// attach 'on' to the pointed cell
addClassName(this, 'on');
// attach 'on' to the th in the thead with the same class name
var topheading = getElementsByClassName(this.oldClassName,
'th', table);
addClassName(topheading[0], 'on');
// attach 'on' to the far left th in the same row as this cell
var row = this.parentNode;
var rowheading = row.getElementsByTagName('th')[0];
addClassName(rowheading, 'on');
}
// ok, now when someone moves their mouse away, undo everything we just did.
tbodytds[i].onmouseout = function() {
// remove 'on' from this cell
removeClassName(this, 'on');
// remove 'on' from the th in the thead
var topheading = getElementsByClassName(this.oldClassName,
'th', table);
removeClassName(topheading[0], 'on');
// remove 'on' to the far left th in the same row as this cell
var row = this.parentNode;
var rowheading = row.getElementsByTagName('th')[0];
removeClassName(rowheading, 'on');
}
}
}
addLoadEvent(makeTheTableHeadsHighlight);
</script>
</head>
<body>
<div class="cssguycomments">
Final example with JavaScript applied. Hover over a table cell to see
effects. "View Source" and copy if you'd like to use.
</div>
<table id="rockartists">
<thead>
<tr>
<th class="null">
</th>
<th class="stones">
Rolling Stones
</th>
<th class="u2">
U2
</th>
<th class="crue">
M?tley Cr��e
</th>
</tr>
</thead>
<tbody>
<tr>
<th>
Lead Vocals
</th>
<td class="stones">
Mick Jagger
</td>
<td class="u2">
Bono
</td>
<td class="crue">
Vince Neil
</td>
</tr>
<tr>
<th>
Lead Guitar
</th>
<td class="stones">
Keith Richards
</td>
<td class="u2">
The Edge
</td>
<td class="crue">
Mick Mars
</td>
</tr>
<tr>
<th>
Bass Guitar
</th>
<td class="stones">
Ron Wood
</td>
<td class="u2">
Adam Clayton
</td>
<td class="crue">
Nikkie Sixx
</td>
</tr>
<tr>
<th>
Drums
</th>
<td class="stones">
Charlie Watts
</td>
<td class="u2">
Larry Mullen, Jr.
</td>
<td class="crue">
Tommy Lee
</td>
</tr>
</tbody>
</table>
</body>
</html>
发表评论
-
自动补全autoComplete控件demo
2014-04-21 09:45 1020详情参考附件上的demo,如果对你起到了帮助,那真真是极好的。 ... -
左右移动多选列表控件
2014-04-21 09:42 865开发过程中使用多选下拉列表,如果数据较多,往往选择时候会很 ... -
好用的jQuery Tab切换插件 - Tabulous.js
2013-12-07 09:39 1693本文参考:http://site518.net/jquery ... -
jsp实现数字倒计时后页面自动跳转
2013-11-05 16:48 1558在JSP中加入以下代码 <%String path ... -
JS正则验证邮箱的格式
2013-09-23 13:53 1422邮箱的验证一般都通过前段框架实现,下面列出一个手动实现邮箱 ... -
图片上传扩展名和大小控制
2013-08-19 13:16 1142详情查看附件。 简介: 本方法使用jquery ... -
jquery展开收回控制及箭头指向切换
2013-08-17 11:41 2850详情见附件,以下是简单说明: jquery控制展开收回通过 ... -
jsp中表格,表格中的文字根据表格的大小自动换行
2013-08-08 23:21 8070网页开发过程中时常会遇到关于折行和不折行的问题。 比如连 ... -
jQuery控制文本框只读属性
2013-08-02 01:16 3525//添加只读属性 $("#D").at ... -
图片渐变消失、渐变切换的实现
2013-07-28 14:08 2546其实很简单的: 渐变消失是通过fadeOut(10 ... -
一个很好的日期控件
2013-07-27 18:17 1048详情请下载附件查看。 -
网页标题title的闪动提示
2013-07-27 17:29 1526通过网页title来提示用户有新消息这个功能很常见,比如现在 ... -
div控制条形图下面指针的指定位置
2013-07-23 12:48 1094详情见附件,上面的条形图是静态图片,下面的小箭头是通过div ... -
如何设置文字在div的中央、垂直居中显示
2013-07-19 01:02 2835位于中央实现方法:#divId { width: 100p ... -
如何让div渐变消失
2013-07-19 00:55 4757下面的代码可以使“添加成功”四个字4000毫秒之后渐变消失,使 ... -
点击页面中的图片,图片放大效果实现
2013-07-14 15:02 2625页面中有图片文件,我们在初始显示的时候不方便把图片原来的大小 ... -
表格只显示下边框
2013-06-22 17:29 1214<table frame="below&qu ... -
超链接添加onclick事件
2013-06-16 07:59 3323有三种方法来实现: 1 ... -
div浮于页面固定位置、展开与隐藏、锚点定位
2013-05-29 22:18 9594具体代码请参考附件demo。 浮动效果是通过jQuery插件P ... -
js动态向页面中添加表格
2013-05-23 17:59 6859[size=xx-large][size=large]我们在实 ...
相关推荐
javascript实现网页中单击单元格背景变色特效
### JavaScript 实现 HTML Table 单元格合并及隐藏列功能详解 #### 一、背景介绍 在处理 HTML 表格时,我们经常会遇到需要合并相同数据的单元格以及根据需求显示或隐藏某些列的情况。例如,在报表展示或者数据汇总...
Vue SwipeCell 滑动单元格是 Vue.js 应用中一种常见的交互组件,它通常用于模拟微信等应用中的滑动操作,例如显示更多选项、删除等。在本示例中,我们将深入探讨如何实现这样的功能。 首先,我们来看一下核心的 ...
通过这个"table-rowspan表格自动合并单元格插件",开发者可以轻松地实现复杂表格布局的动态管理,提升用户体验,同时减轻了手动调整表格的繁琐工作。这个插件的使用涉及到了HTML、CSS和JavaScript的综合应用,是前端...
在HTML文档中使用JavaScript来自动合并表格中相同行的单元格是一种常见的前端开发技术。这种技术可以提高页面的可读性,尤其是在处理具有相同值的重复数据时。上述代码示例提供了一种简单而有效的方法来实现这一功能...
本文将详细介绍如何实现一个“table行随鼠标移动变色”的功能,帮助开发者创建更具视觉辨识度的数据展示表格。 首先,我们来看一下基本的HTML结构。在给出的示例中,一个简单的表格(`<table>`)被创建,包含了表头...
在本文中,我们将深入探讨如何使用jQuery实现一个仿Excel表格的选中单元格变色特效。这个功能允许用户在网页上的表格中通过鼠标操作选择单个或多个单元格,同时改变选中单元格的背景颜色,以模拟Excel的交互体验。 ...
接着,我们引入jQuery库,并编写JavaScript代码来监听鼠标的滑动事件。当鼠标滑过tab时,我们使用jQuery的`.stop()`方法停止当前的动画,`.animate()`方法进行平滑过渡,切换到相应的tab内容。同时,需要更新tab的...
综上所述,“鼠标经过文字变色”的功能可以通过多种方式实现,包括CSS和JavaScript,其中JavaScript提供了更强大的功能和更广泛的浏览器兼容性。对于现代Web开发而言,推荐使用JavaScript来实现这类动态效果,同时...
在探讨“HTML:鼠标滑动效果”这一主题时,我们主要关注的是如何通过HTML、CSS以及JavaScript技术,来实现网页上鼠标光标的动态变化,尤其是当鼠标悬停或滑过特定元素时,光标能够展现出诸如手型、指针等不同形态的...
【jQuery鼠标滑动切换焦点图代码】是一种基于JavaScript库jQuery实现的动态图片展示技术,它通过用户的鼠标滑动事件来实现焦点图的自动切换,从而为网页增添视觉吸引力和交互性。这种技术常用于网站的首页、产品展示...
在Web开发中,使用JavaScript实现HTML表格(table)单元格的...以上就是使用JavaScript实现table单元格点击展开隐藏效果的知识点。通过理解和应用这些知识点,开发者可以创建出更加互动和用户友好的表格数据展示界面。
综上所述,"ntab鼠标滑动js特效"是通过JavaScript实现的一种交互式网页设计技术,通过监听鼠标滑动和点击事件来切换导航栏中的内容。在实际应用中,开发者需要考虑性能、兼容性和用户体验等因素,以达到最佳效果。
一个基本的表格由`<table>`、`<tr>`(行)、`<th>`(表头单元格)和`<td>`(数据单元格)组成。例如: ```html <table> 姓名 年龄 张三 <td>25 </table> ``` 在JavaScript中,我们可以使用DOM操作来对...
"JQ滑动变色菜单_导航条变色滑动显示"就是一个这样的实践,它利用jQuery库来实现导航条在用户滚动页面时的动态变化,特别是颜色的变换,为网站增添视觉吸引力和互动性。jQuery(简称JQ)是一个广泛使用的JavaScript...
本教程将详细讲解如何通过JavaScript实现表格行在鼠标移动、选中复选框时的变色效果。 首先,我们需要一个包含表格数据的HTML文件,例如`test2l.html`。在这个文件中,我们将创建一个带有复选框的表格。基本的HTML...
在本文中,我们将深入探讨如何在layui框架中...在layui中,我们可以灵活地自定义表格的列,将单元格设置为复选框,实现用户友好的交互。 首先,我们需要引入layui的CSS和JS文件。在HTML头部添加以下代码: ```html ...
5. **事件处理**:JavaScript中,需要监听鼠标的hover事件,当鼠标进入和离开滑动区域时,触发相应的图片切换函数。 6. **图片加载优化**:为了避免一次性加载所有图片导致页面加载速度慢,可以使用懒加载技术,...
"文字列表鼠标移动单元格渐变动画特效"是一个典型的交互式设计案例,它结合了CSS3、JavaScript或者某些前端框架(如React, Vue等)的技术,为用户提供了一种动态的视觉体验。 首先,我们要理解“渐变动画”的概念。...