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="[&quot;&quot;,&quot;cm&quot;,&quot;cm&quot;,&quot;cm&quot;,&quot;cm&quot;]">

        <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焦点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也勉强能过去. 还是一款全屏的焦点图切换特效.大气而清新.很适合简介大方的网站. 下图还 ...

随机推荐

Java特性-HashMap
想分享一个对HashMap的理解: 我们首先要知道一个HashMap对象的构成,一般的理解是:一个Map里面放了很多个键值对,合在一起就是一个键值对的数组: 大概这么理解没问题,可是有一点要说明一下, ...
一模 (1) day1
第一题:(水题) 题目大意:求出n个 X% (X是小于等于2位的整数) 的乘积,去掉末尾的0: 解题过程: 1.直接把整数乘好,然后确定小数点的位置,去掉多余的0 输出即可. 第二题:(搜索题) ...
UVa 11426 (欧拉函数 GCD之和) GCD - Extreme (II)
题意: 求sum{gcd(i, j) | 1 ≤ i < j ≤ n} 分析: 有这样一个很有用的结论:gcd(x, n) = i的充要条件是gcd(x/i, n/i) = 1,因此满足条件的x ...
java IO 类库的基本架构
I/O问题是任何编程语言都无法回避的问题,可以说I/O问题是整个人机交互的核心问题,因为I/O是机器获取和交换信息的主要渠道,在当今这个数据大爆炸时代,I/O问题尤为突出,很容易成为一个性能瓶颈.正因 ...
SSM-Spring-08：Spring的静态代理初窥案例
------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- 静态代理 java的设计模式的代理模式,就是静态代理写在前面的话,静态代理的优点和缺点优点:可以在不改变一 ...
PY3&lowbar;线程红绿灯
# Author:jum_# event 事件监测红灯停绿灯行线程标志位# 事件主要提供了三个方法wait.clear.set# clear:将“Flag”设置为False#set:将“Flag” ...
two&&num;39&semi;s complement，2的补码
本文为作者原创,允许转载,但必须注明原文地址:https://www.cnblogs.com/byronxie/p/10117265.html Let's start with one questio ...
azkaban安装使用
本文记录azkaban的安装和一些报错处理(文章末尾). AzKaban组成 MySQL数据库,azkaban-server (web端),azkaban-executor (执行job) 1.下载 ...
android学习-仿Wifi模块实现
最近研究android内核-系统关键服务的启动解析,然而我也不知道研究wifi的作用,就当兴趣去做吧(其实是作业-_-) 系统原生WiFI功能大概有:启动WiFI服务,扫描WiFi信息(这个好像已经被 ...
&dollar;{openid&lowbar;wx} el解析式放入url的&OpenCurlyDoubleQuote;”里才起作用。
window.location.href="${ctx }/wx/reservation/content?shopid="+shopid+"&&openi ...