JQuery焦点Table
.prod_description_sizechart table{margin-bottom:;width:992px;max-width:none;border-collapse:collapse;background-color:transparent;table-layout:fixed;border-spacing:;}
.table-bordered{border:1px solid #ddd;border-left:;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
.table{margin-bottom:20px;width:100%;table-layout:fixed;}
tbody{display:table-row-group;border-color:inherit;vertical-align:middle;}
tr{display:table-row;border-color:inherit;vertical-align:inherit;}
table{margin-bottom:;width:992px;max-width:none;border-collapse:collapse;background-color:transparent;table-layout:fixed;border-spacing:;}
.prod_description_sizechart table td,.prod_description_sizechart table th{text-align:center;word-wrap:break-word;}
.table-bordered th,.table-bordered td{border-left:1px solid #ddd;}
.table-bordered th,.table-bordered td{border-left:1px solid #ddd;}
.table th,.table td{padding:8px;width:120px;border-top:1px solid #ddd;vertical-align:top;text-align:center;word-wrap:break-word;font-size:12px;line-height:20px;}
.prod_description_sizechart .prod_size em{margin:0 4px;font-style:normal;font-size:16px;}
ul,li{margin:;padding:;list-style:none;}
#p-li{margin:0 auto;margin-top:10px;width:630px;}
#p-li div{clear:both;display:none;}
li{float:left;margin-right:2px;padding:10px;background:#b9bec2;color:#FFF;cursor:default;}
.tagIn,#p-li .conIn{display:block;color:#FFF;}
.tagIn{background:#cb2027;}
.mouseover{background:#cb2027;color:#fff;}
Css Code
<div id="p-li">
<ul>
<li class="tagIn level-top"> Inches </li>
<li class="level-top"> Centimeters </li>
</ul>
<div class="conIn level-content">
<table class="table table-bordered">
<tbody>
<tr>
<th>
Size
</th>
<th>
Bust
</th>
<th>
Waist
</th>
<th>
Hips
</th>
<th>
Hollow to Floor
</th>
</tr>
<tr>
<td class="prod_size litb-hover" data-orig="2">
2
</td>
<td class="prod_size" data-orig="83">
32
<em>¾</em>
</td>
<td class="prod_size" data-orig="65">
25
<em>½</em>
</td>
<td class="prod_size" data-orig="91">
35
<em>¾</em>
</td>
<td class="prod_size" data-orig="147">
57
<em>¾</em>
</td>
</tr>
<tr>
<td class="prod_size" data-orig="4">
4
</td>
<td class="prod_size" data-orig="85">
33
<em>½</em>
</td>
<td class="prod_size" data-orig="68">
26
<em>¾</em>
</td>
<td class="prod_size" data-orig="93">
36
<em>½</em>
</td>
<td class="prod_size" data-orig="147">
57
<em>¾</em>
</td>
</tr>
<tr>
<td class="prod_size" data-orig="6">
6
</td>
<td class="prod_size" data-orig="88">
34
<em>¾</em>
</td>
<td class="prod_size" data-orig="70">
27
<em>½</em>
</td>
<td class="prod_size" data-orig="96">
37
<em>¾</em>
</td>
<td class="prod_size" data-orig="150">
59
</td>
</tr>
<tr>
<td class="prod_size" data-orig="8">
8
</td>
<td class="prod_size" data-orig="90">
35
<em>½</em>
</td>
<td class="prod_size" data-orig="72">
28
<em>¼</em>
</td>
<td class="prod_size" data-orig="98">
38
<em>½</em>
</td>
<td class="prod_size" data-orig="150">
59
</td>
</tr>
<tr>
<td class="prod_size" data-orig="10">
10
</td>
<td class="prod_size" data-orig="93">
36
<em>½</em>
</td>
<td class="prod_size" data-orig="75">
29
<em>½</em>
</td>
<td class="prod_size" data-orig="101">
39
<em>¾</em>
</td>
<td class="prod_size" data-orig="152">
59
<em>¾</em>
</td>
</tr>
<tr>
<td class="prod_size" data-orig="12">
12
</td>
<td class="prod_size" data-orig="97">
38
<em>¼</em>
</td>
<td class="prod_size" data-orig="79">
31
</td>
<td class="prod_size" data-orig="105">
41
<em>¼</em>
</td>
<td class="prod_size" data-orig="152">
59
<em>¾</em>
</td>
</tr>
<tr>
<td class="prod_size" data-orig="14">
14
</td>
<td class="prod_size" data-orig="100">
39
<em>¼</em>
</td>
<td class="prod_size" data-orig="83">
32
<em>¾</em>
</td>
<td class="prod_size" data-orig="109">
43
</td>
<td class="prod_size" data-orig="155">
61
</td>
</tr>
<tr>
<td class="prod_size" data-orig="16">
16
</td>
<td class="prod_size" data-orig="104">
41
</td>
<td class="prod_size" data-orig="86">
33
<em>¾</em>
</td>
<td class="prod_size" data-orig="112">
44
</td>
<td class="prod_size" data-orig="155">
61
</td>
</tr>
<tr>
<td class="prod_size" data-orig="16w">
16w
</td>
<td class="prod_size" data-orig="109">
43
</td>
<td class="prod_size" data-orig="92">
36
<em>¼</em>
</td>
<td class="prod_size" data-orig="116">
45
<em>¾</em>
</td>
<td class="prod_size" data-orig="155">
61
</td>
</tr>
<tr>
<td class="prod_size" data-orig="18w">
18w
</td>
<td class="prod_size" data-orig="114">
45
</td>
<td class="prod_size" data-orig="98">
38
<em>½</em>
</td>
<td class="prod_size" data-orig="121">
47
<em>¾</em>
</td>
<td class="prod_size" data-orig="155">
61
</td>
</tr>
<tr>
<td class="prod_size" data-orig="20w">
20w
</td>
<td class="prod_size" data-orig="119">
46
<em>¾</em>
</td>
<td class="prod_size" data-orig="104">
41
</td>
<td class="prod_size" data-orig="126">
49
<em>½</em>
</td>
<td class="prod_size" data-orig="155">
61
</td>
</tr>
<tr>
<td class="prod_size" data-orig="22w">
22w
</td>
<td class="prod_size" data-orig="124">
48
<em>¾</em>
</td>
<td class="prod_size" data-orig="109">
43
</td>
<td class="prod_size" data-orig="131">
51
<em>½</em>
</td>
<td class="prod_size" data-orig="155">
61
</td>
</tr>
<tr>
<td class="prod_size" data-orig="24w">
24w
</td>
<td class="prod_size" data-orig="130">
51
<em>¼</em>
</td>
<td class="prod_size" data-orig="115">
45
<em>¼</em>
</td>
<td class="prod_size" data-orig="136">
53
<em>½</em>
</td>
<td class="prod_size" data-orig="155">
61
</td>
</tr>
<tr>
<td class="prod_size" data-orig="26w">
26w
</td>
<td class="prod_size" data-orig="135">
53
<em>¼</em>
</td>
<td class="prod_size" data-orig="121">
47
<em>¾</em>
</td>
<td class="prod_size" data-orig="141">
55
<em>½</em>
</td>
<td class="prod_size" data-orig="155">
61
</td>
</tr>
</tbody>
</table>
</div>
<div class="level-content">
<table class="table table-bordered" data-chart-unit="" data-unit="["","cm","cm","cm","cm"]">
<tbody>
<tr>
<th>
Size
</th>
<th>
Bust
</th>
<th>
Waist
</th>
<th class="litb-hover">
Hips
</th>
<th>
Hollow to Floor
</th>
</tr>
<tr>
<td class="prod_size" data-orig="2">
2
</td>
<td class="prod_size" data-orig="83">
83
</td>
<td class="prod_size" data-orig="65">
65
</td>
<td class="prod_size" data-orig="91">
91
</td>
<td class="prod_size" data-orig="147">
147
</td>
</tr>
<tr>
<td class="prod_size litb-hover" data-orig="4">
4
</td>
<td class="prod_size" data-orig="85">
85
</td>
<td class="prod_size" data-orig="68">
68
</td>
<td class="prod_size" data-orig="93">
93
</td>
<td class="prod_size" data-orig="147">
147
</td>
</tr>
<tr>
<td class="prod_size" data-orig="6">
6
</td>
<td class="prod_size" data-orig="88">
88
</td>
<td class="prod_size" data-orig="70">
70
</td>
<td class="prod_size" data-orig="96">
96
</td>
<td class="prod_size" data-orig="150">
150
</td>
</tr>
<tr>
<td class="prod_size" data-orig="8">
8
</td>
<td class="prod_size" data-orig="90">
90
</td>
<td class="prod_size" data-orig="72">
72
</td>
<td class="prod_size" data-orig="98">
98
</td>
<td class="prod_size" data-orig="150">
150
</td>
</tr>
<tr>
<td class="prod_size" data-orig="10">
10
</td>
<td class="prod_size" data-orig="93">
93
</td>
<td class="prod_size" data-orig="75">
75
</td>
<td class="prod_size" data-orig="101">
101
</td>
<td class="prod_size" data-orig="152">
152
</td>
</tr>
<tr>
<td class="prod_size" data-orig="12">
12
</td>
<td class="prod_size" data-orig="97">
97
</td>
<td class="prod_size" data-orig="79">
79
</td>
<td class="prod_size" data-orig="105">
105
</td>
<td class="prod_size" data-orig="152">
152
</td>
</tr>
<tr>
<td class="prod_size" data-orig="14">
14
</td>
<td class="prod_size" data-orig="100">
100
</td>
<td class="prod_size" data-orig="83">
83
</td>
<td class="prod_size" data-orig="109">
109
</td>
<td class="prod_size" data-orig="155">
155
</td>
</tr>
<tr>
<td class="prod_size" data-orig="16">
16
</td>
<td class="prod_size" data-orig="104">
104
</td>
<td class="prod_size" data-orig="86">
86
</td>
<td class="prod_size" data-orig="112">
112
</td>
<td class="prod_size" data-orig="155">
155
</td>
</tr>
<tr>
<td class="prod_size" data-orig="16w">
16w
</td>
<td class="prod_size" data-orig="109">
109
</td>
<td class="prod_size" data-orig="92">
92
</td>
<td class="prod_size" data-orig="116">
116
</td>
<td class="prod_size" data-orig="155">
155
</td>
</tr>
<tr>
<td class="prod_size" data-orig="18w">
18w
</td>
<td class="prod_size" data-orig="114">
114
</td>
<td class="prod_size" data-orig="98">
98
</td>
<td class="prod_size" data-orig="121">
121
</td>
<td class="prod_size" data-orig="155">
155
</td>
</tr>
<tr>
<td class="prod_size" data-orig="20w">
20w
</td>
<td class="prod_size" data-orig="119">
119
</td>
<td class="prod_size" data-orig="104">
104
</td>
<td class="prod_size" data-orig="126">
126
</td>
<td class="prod_size" data-orig="155">
155
</td>
</tr>
<tr>
<td class="prod_size" data-orig="22w">
22w
</td>
<td class="prod_size" data-orig="124">
124
</td>
<td class="prod_size" data-orig="109">
109
</td>
<td class="prod_size" data-orig="131">
131
</td>
<td class="prod_size" data-orig="155">
155
</td>
</tr>
<tr>
<td class="prod_size" data-orig="24w">
24w
</td>
<td class="prod_size" data-orig="130">
130
</td>
<td class="prod_size" data-orig="115">
115
</td>
<td class="prod_size" data-orig="136">
136
</td>
<td class="prod_size" data-orig="155">
155
</td>
</tr>
<tr>
<td class="prod_size" data-orig="26w">
26w
</td>
<td class="prod_size" data-orig="135">
135
</td>
<td class="prod_size" data-orig="121">
121
</td>
<td class="prod_size" data-orig="141">
141
</td>
<td class="prod_size" data-orig="155">
155
</td>
</tr>
</tbody>
</table>
</div>
</div>
Html Code
jQuery(document).ready(function(e) {
jQuery("#p-li li").each(function(index, element) {
var thisLi = jQuery(this);
thisLi.mouseover(function() {
//alert(index);
jQuery(".tagIn").removeClass("tagIn");
jQuery(".conIn").removeClass("conIn");
jQuery(this).addClass("tagIn");
jQuery("#p-li div").eq(index).addClass("conIn");
//圆角部分
});
});
jQuery(".level-top").corner("top 8px");
//jQuery(".level-content").corner("buttom");
jQuery(".level-content").corner("tr bl br 8px");
$('.table td').live("mouseover", function() {
$(this).addClass('mouseover');
$(this).parent().children().first().addClass('mouseover');
var cellIndex = $(this).context.cellIndex;
$(this).parent().parent().children().first().children().eq(cellIndex).addClass('mouseover');
});
$('.table td').live("mouseout", function() {
$(this).removeClass('mouseover');
$(this).parent().children().first().removeClass('mouseover');
var cellIndex = $(this).context.cellIndex;
$(this).parent().parent().children().first().children().eq(cellIndex).removeClass('mouseover');
});
});
JavaScript Code
这里全部用到JQuery做的，当然直接写JavaScript也不难。
最终效果
JQuery焦点Table的更多相关文章
- 强大的自适应jQuery焦点图特效
jQuery焦点图切换自适应效果 自适应jQuery焦点图特效是一款支持移动端的响应式jQuery焦点图插件,支持flexible布局,支持移动触摸事件等. 今天我们要来分享一款很灵活的jQuery焦 ...
- jQuery操作Table tr td常用的方法
虽然现在DIV+CSS进行页的布局大行其道,但是很多地方使用table还是有很多优势,用table展示数据是比较方便的,下面汇总了jQuery操作Table tr td常用的方法,熟记这些操作技巧,下 ...
- 汇总常用的jQuery操作Table tr td方法
虽然现在DIV+CSS进行页的布局大行其道,但是很多地方使用table还是有很多优势,用table展示数据是比较方便的,下面汇总了jQuery操作Table tr td常用的方法,熟记这些操作技巧,下 ...
- jquery隐藏table表格的某一列
jquery隐藏table表格的某一列: $('table tr').find('td:eq(13)').hide(); 隐藏table的第13列
- JQuery操作Table元素
使用Jquery操作Table中的tr向上或向下移动,以及全选和反选操作. 点击Table Head中的复选框,全选或反选表格中所有的复选框; 选中复选框,点击Up 按钮, tr上移;点击 Down ...
- 基于jQuery打造的选项卡向上弹出jquery焦点图切换特效
基于jQuery打造的选项卡向上弹出jquery焦点图切换特效 鼠标经过标题栏,会出现层特效向上滑动,并且在同时进行幻灯片切换,效果十分不错. 有兴趣的童鞋可以下载看看,在IE6方面兼容性也不错,只有 ...
- 分享10款常用的jQuery焦点图插件
爱编程一直在收集整理编程相关的知识和解决方案,今天小编为大家带来10款非常常用的jquery焦点图插件. 1.jQuery可自动播放动画的焦点图插件 之前我们已经分享过很多非常实用的jQuery焦点图 ...
- 8款超绚丽的jQuery焦点图动画
随着前端技术和浏览器技术的不断发展,人们开始对网页视觉效果的要求越来越高.我们经常会在页面中看到很多炫酷的图片焦点图播放控件,有些甚至是大屏的焦点图占用大片的页面空间,从而吸引用户的眼球.本文要分享的 ...
- 一款仿PBA官网首页jQuery焦点图的切换特效
一款仿PBA官网首页jQuery焦点图的切换特效,非常的简单大方, 在对浏览器兼容性的方面做了不少的功夫.IE6也勉强能过去. 还是一款全屏的焦点图切换特效.大气而清新.很适合简介大方的网站. 下图还 ...
随机推荐
- 两种常用的MySQL官方客户端软件
本博文的主要内容有 .命令行客户端软件---MySQL Command Line Client .MySQL-Workbench客户端软件 1.命令行客户端软件---MySQL Command Lin ...
- Pick-up sticks - POJ 2653 (线段相交)
题目大意:有一个木棒,按照顺序摆放,求出去上面没有被别的木棍压着的木棍..... 分析:可以维护一个队列,如果木棍没有被压着就入队列,如果判断被压着,就让那个压着的出队列,最后把这个木棍放进队列, ...
- hdoj 2044一只小蜜蜂...【斐波那契变形】
一只小蜜蜂... Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Su ...
- winform中DataGridView的数据实现导出excel
1,窗体设计 首先需要引入程序集:Microsoft.Office.Interop.Excel (如果没有引用过的需要右键添加引用再搜索就行了) 实现的方法: /// <summary> ...
- BZOJ 3262 陌上花开 CDQ分治
= =原来复杂度还是nlog^2(n) Orz 被喷了 #include<cstdio> #include<cstdlib> #include<algorithm> ...
- 自己在安装centos 系统时， 是使用英文安装 成功，现在系统语言为英语，如何设置为中文？
作为一个linux菜鸟,遇到的问题可谓真多,在虚拟机VMware上安装好centos系统后,心里甚喜,也连上网络了. 一.遇到的问题 but,火狐浏览器浏览网页出现乱码,也不知道怎么解决?所有的中文都 ...
- 关于verilog中if与case语句不完整产生锁存器的问题 分类： FPGA 2014-11-08 17:39 260人阅读 评论(0) 收藏
在很多地方都能看到,verilog中if与case语句必须完整,即if要加上else,case后要加上default语句,以防止锁存器的发生,接下来就来说说其中原因. 一,什么是锁存器?锁存器与触发器 ...
- CentOS iSCSI客户端使用配置
配置步骤: 1.查看安装是否安装iSCSI驱动 rpm -qa|grep iscsi 2.查看yum安装源 yum list |grep iscsi 3.安装iscsi驱动 yum install i ...
- Java语言基础（七）
Java语言基础(七) 今天在公司多呆了会,回来晚了 一.自动类型转换 在Java中,数据是可以转换的 例如可以将byte类型的赋给int类型的 这里希望你了解内存的变化,例如 在这里,我想你应该知 ...
- hdu 4622 Reincarnation（后缀数组）
hdu 4622 Reincarnation 题意:还是比较容易理解,给出一个字符串,最长2000,q个询问,每次询问[l,r]区间内有多少个不同的字串. (为了与论文解释统一,这里解题思路里sa数组 ...