jquery15（通过jquery当hover到b元素时a左移15px，还有其他7个同class名的7个a元素用fade变暗但不移动）

本文目录

• 通过jquery当hover到b元素时a左移15px，还有其他7个同class名的7个a元素用fade变暗但不移动
• jquery 内部插入一行

通过jquery当hover到b元素时a左移15px，还有其他7个同class名的7个a元素用fade变暗但不移动

我先Mark一个，正在写代码实现中。。。

按照你的需求，我把京东的floor3扣下来了，运行效果如下：

完整html代码：

***隐藏网址***
***隐藏网址***
 《head》
***隐藏网址***
  《title》Document《/title》
  《style》
  html, body, div, span, iframe, h1, h3, h3, h4, h5, h6, p, blockquote, pre, a, address, big, cite, code, del, em, font, img, ins, small, strong, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend {
    margin: 0px;
    padding: 0px;
}
body {
    font: 12px/150% Arial,Verdana,"宋体";
    color: #666;
}
.lh {
    overflow: hidden;
}
  #clothing.clothing-new{
    margin:100px auto;
    width:790px;
  }
  #clothing.clothing-new .accordion {
    background: none repeat scroll 0% 0% #FFF;
    width: 790px;
    height: 361px;
}
#clothing .accordion {
    width: 900px;
}
.root61 .plist .smc {
}
.plist .smc {
    position: relative;
    height: 361px;
    border-bottom: 1px solid #DDD;
}
.curr .mc, .curr .smc {
    display: block;
}
.m2 .mc, .sm2 .smc {
    display: none;
}
.m, .mt, .mc, .mb, .sm, .smt, .smc, .smb {
    overflow: hidden;
}
.root61 #clothing.clothing-new .accordion .item {
    width: 158px;
}
.root61 #clothing .accordion .curr {
    width: 190px;
}
.root61 #clothing .accordion .item {
    width: 158px;
}
#clothing.clothing-new .accordion .item {
    float: left;
    width: 158px;
    height: 361px;
    overflow: hidden;
    background: none repeat scroll 0% 0% #000;
}
#clothing .accordion .curr {
    width: 188px;
}
#clothing .accordion .item {
    width: 148px;
    height: 361px;
    overflow: hidden;
}
.lh li, .lh dl, .lh .item {
    float: left;
}
#clothing.clothing-new .accordion .item .fore2 {
    height: 181px;
}
#clothing.clothing-new .accordion .item a {
    width: 158px;
    background: none repeat scroll 0% 0% #FFF;
    position: relative;
    display: block;
    overflow: hidden;
    text-decoration: none;
    transition: opacity 0.8s ease-out 0s;
}
a {
    color: #666;
    text-decoration: none;
}
#clothing.clothing-new .accordion .item a strong {
    top: 20px;
    left: 10px;
}
#clothing.clothing-new .accordion .item a strong, #clothing.clothing-new .accordion .item a em {
    display: block;
    width: 6em;
    height: 20px;
    line-height: 20px;
    overflow: hidden;
    position: absolute;
    font-family: "微软雅黑";
    text-decoration: none;
    z-index: 5;
    font-size: 13px;
    color: #555;
}
#clothing.clothing-new .accordion .item a em {
    font-size: 12px;
    color: #777;
    top: 37px;
    left: 10px;
}
#clothing.clothing-new .accordion .item a strong, #clothing.clothing-new .accordion .item a em {
    display: block;
    width: 6em;
    height: 20px;
    line-height: 20px;
    overflow: hidden;
    position: absolute;
    font-family: "微软雅黑";
    text-decoration: none;
    z-index: 5;
    font-size: 13px;
    color: #555;
}
em {
    font-style: normal;
}
#clothing.clothing-new .accordion .item a img {
    position: relative;
    transition: all 0.4s ease-out 0s;
}
img.err-product, img.err-poster {
***隐藏网址***
}
a img {
    border: 0px none;
}
img {
    vertical-align: middle;
}
#clothing.clothing-new .accordion .item .fore2 {
    height: 181px;
}
#clothing.clothing-new .accordion .item a {
    width: 158px;
    background: none repeat scroll 0% 0% #FFF;
    position: relative;
    display: block;
    overflow: hidden;
    text-decoration: none;
    transition: opacity 0.8s ease-out 0s;
}
a {
    color: #666;
    text-decoration: none;
}
#clothing.clothing-new .accordion.advanced .item a:hover img {
    margin-left: -15px;
}
.a-light {
    opacity: 1;
}
.a-gray{
    opacity: 0.8;
}
  《/style》
***隐藏网址***
  《script》
  $(function(){
    $(".accordion.advanced .item a").hover(function(){
        $(".accordion.advanced .item a").addClass("a-gray").removeClass("a-light");
        $(this).removeClass("a-gray").addClass("a-light");
    },function(){
        $(".accordion.advanced .item a").removeClass("a-gray").addClass("a-light");
    });
  });
  《/script》
 《/head》
 《body》
 《div class="w w1 clothing-new" data-fid="2" id="clothing"》
 《div class="smc accordion advanced" data-widget="tab-content"》
    《div class="lh"》
        《div class="item curr" id="clothing-accordion-r1"》
            《a clstag="homepage|keycount|home2013|22c2" target="_blank"
                class="fore2"
***隐藏网址***
                《strong》女鞋新品会《/strong》 《em》单鞋新品会《/em》 《img class="err-product"
***隐藏网址***
                data-img="2" alt=""》
            《/a》《a clstag="homepage|keycount|home2013|22c3" target="_blank"
                class="fore2"
***隐藏网址***
                《strong》开学雷朋镜架《/strong》 《em》全场低至399《/em》 《img class="err-product"
***隐藏网址***
                data-img="2" alt=""》
            《/a》
        《/div》
        《div class="item" id="clothing-accordion-r2"》
            《a clstag="homepage|keycount|home2013|22c4" target="_blank"
                class="fore1"
***隐藏网址***
                《strong》寻找星座内衣《/strong》 《em》低至1.9折《/em》 《img class="err-product"
***隐藏网址***
                data-img="2" alt=""》
            《/a》
        《/div》
        《div class="item" id="clothing-accordion-r3"》
            《a clstag="homepage|keycount|home2013|22c5" target="_blank"
                class="fore2"
***隐藏网址***
                《strong》金秋男鞋《/strong》 《em》不新不型《/em》 《img class="err-product"
***隐藏网址***
                data-img="2" alt=""》
            《/a》《a clstag="homepage|keycount|home2013|22c6" target="_blank"
                class="fore2"
***隐藏网址***
                《strong》健身装备换新《/strong》 《em》新品半价专场《/em》 《img class="err-product"
***隐藏网址***
                data-img="2" alt=""》
            《/a》
        《/div》
        《div class="item" id="clothing-accordion-r4"》
            《a clstag="homepage|keycount|home2013|22c7" target="_blank"
                class="fore1"
***隐藏网址***
                《strong》跑步机品牌汇《/strong》 《em》5折起《/em》 《img class="err-product"
***隐藏网址***
                data-img="2" alt=""》
            《/a》
        《/div》
        《div class="item" id="clothing-accordion-r5"》
            《a clstag="homepage|keycount|home2013|22c8" target="_blank"
                class="fore2"
***隐藏网址***
                《strong》箱约开学季《/strong》 《em》满399减100《/em》 《img class="err-product"
***隐藏网址***
                data-img="2" alt=""》
            《/a》《a clstag="homepage|keycount|home2013|22c9" target="_blank"
                class="fore2"
***隐藏网址***
                《strong》奢品打白条《/strong》 《em》299元起《/em》 《img class="err-product"
***隐藏网址***
                data-img="2" alt=""》
            《/a》
        《/div》
    《/div》
《/div》
《/div》
 《/body》
《/html》

jquery 内部插入一行

table width="40%" class="property" id="property"》
《tr id="genre_view"》
《td》《input name="textfield" type="text" id="textfield" size="15" maxlength="20" /》《/td》
《td》《input name="textfield2" type="text" id="textfield2" size="5" maxlength="5" /》《/td》
《td》《input name="textfield3" type="text" id="textfield3" size="5" maxlength="5" /》《/td》
《td》《input name="textfield4" type="text" id="textfield4" size="15" maxlength="20" /》《/td》
《td》《input name="textfield5" type="text" id="textfield5" size="15" maxlength="20" /》《/td》
《td》《a href="javascript:add();" class="J_add"》+《/a》《/td》
《/tr》 
《/table》
《script type="text/javascript" src="jquery.js"》《/script》
《script type="text/javascript"》
var g=$("#genre_view");
var t=$("#property");
var t_index=0;
function add(){
var des=g.html();
t.append("《tr id=’tb"+t_index+"’》"+des+"《/tr》");
var k=$("#tb"+t_index).find(".J_add");
k.attr("href","javascript:del("+t_index+");").text("删除");
t_index++;
}
function del(id){
$("#tb"+id).remove();
}
《/script》

试试吧 我这可以的。只是你想把第一行input输入的内容一起复制下去，似乎这样不行的。所以要想复制input的值你得像下面这样。

《table width="40%" class="property" id="property"》
《tr id="genre_view"》
《td》《input name="textfield" type="text"  size="15" maxlength="20" /》《/td》
《td》《input name="textfield2" type="text" size="15" maxlength="5" /》《/td》
《td》《input name="textfield3" type="text" size="15" maxlength="5" /》《/td》
《td》《input name="textfield4" type="text" size="15" maxlength="20" /》《/td》
《td》《input name="textfield5" type="text" size="15" maxlength="20" /》《/td》
《td》《a href="javascript:add();" class="J_add"》添加《/a》《/td》
《/tr》 
《/table》
《script type="text/javascript" src="jquery.js"》《/script》
《script type="text/javascript"》
var g=$("#genre_view");
var t=$("#property");
var t_index=0;
var p=g.find("input");
var len=p.length;
function add(){
var des;
for(var i=0;i《len;i++){
des+=’《td》《input name="textfield4" type="text" size="15" maxlength="20" value="’+p.eq(i).val()+’" /》《/td》’;
}
des+=’《td》《a href="javascript:del(’+t_index+’);"》删除《/a》《/td》’;
t.append("《tr id=’tb"+t_index+"’》"+des+"《/tr》");
t_index++;
}
function del(id){
$("#tb"+id).remove();
}
《/script》