您的位置：首页 > Web前端 > JavaScript

京东商城商品对比特效JS代码

2015-06-06 13:14 831 查看

京东商城商品对比特效JS代码

<!doctype html>

<html lang="zh-cn">

<head>

<meta charset="gb2312" />

<title>服装MJ.588cy.com</title>

<style type="text/css">

* {margin:0;padding:0;font-size:12px;list-style:none;border:0;}

body{font-family:Arial, Helvetica, sans-serif;}

a{ text-decoration:none;}

.clear{ display:block; height:0px; line-height:0px; font-size:0px; clear:both;}
.mj_lm_nav{ width:979px; height:32px; line-height:32px; color:#999999; margin:0px auto;}

.mj_lm_nav a{ color:#136bad; float:left; display:block;}

.mj_lm_nav a:hover{ text-decoration:underline;}

.mj_lm_nav i{ width:4px; height:8px; margin:12px 8px; font-size:0px; float:left; background:url(http://mj.588cy.com/img/spr_ico.png) no-repeat
-16px 1px;}
.mj_bq_nav{ width:950px; height:auto; margin:0px auto; padding:7px 12px 5px 11px; border:3px solid #e5e5e5;}

.mj_bq_box{ width:950px; height:auto; line-height:24px; padding:6px 0px 7px 0px; overflow:auto; zoom:1;}

.bq_box_a{ border-bottom:1px dashed #e5e5e5;}

.bq_nva_dt,.bq_nva_dd{float:left;}

.bq_nva_dt{width:90px; color:#333333; text-align:right;}

.bq_nva_dd{ width:852px; padding-left:8px;}

.bq_nva_dd li{ float:left; display:block;}

.bq_nva_dd a{ margin-right:6px; color:#136bad;}

.bq_nva_dd a:hover{ color:#FF3300;}

.bq_nva_dd small{ color:#999999;}

.bq_dda{ font-weight:bold; color:#fa3c32; padding-right:13px;}

.bq_ddb{ padding-right:21px;}
.mj_zfw_box{ width:979px; height:auto; margin:15px auto 10px auto;}

.sx_box{ width:949px; padding:0px 15px; height:36px; background-color:#eeeeee; overflow:hidden;}

.sx_box span{ display:block; float:left; padding-top:10px; color:#c9c9c9;}

.sx_box span b{ font-weight:100; color:#333333;}

.sx_box span input{ margin-top:-2px; border:1px solid #d2d2d2;}

.input_a{ width:40px; height:18px; margin-right:4px; }

.input_c{ width:40px; height:18px; margin:0px 4px; }

.input_b{ width:40px; height:20px; background-color:#f6f5f5;}

.sx_box a{ margin:0px 13px; display:inline-block; *display:inline; *zoom:1; }

.sx_aa,.sx_ac{ color:#333333;}

.sx_ab,.sx_ad{ color:#fa3c32;}

.sx_box a i{background-image:url(http://mj.588cy.com/img/spr_ico.png); display:inline-block; *display:inline; *zoom:1;font-size:0px;}

.sx_aa i{ background-position:-34px -38px; width:7px; height:9px; margin:3px 0px 0px 8px;}

.sx_ab i{ background-position:-41px -38px; width:7px; height:9px; margin:3px 0px 0px 8px;}

.sx_ac i{width:13px; height:14px;background-position:-20px 0px; margin:2px 8px 0px 0px; display:block; float:left;}

.sx_ad i{width:13px; height:14px;background-position:-33px 0px;margin:2px 8px 0px 0px; display:block; float:left;}

.sx_ac em,.sx_ad em{ display:block; float:left; font-style:normal; _margin-top:3px;}

.fw_box{ width:976px; margin:0px auto; height:auto; border-top:1px solid #e5e5e5; border-left:1px solid #e5e5e5; overflow:auto; zoom:1;}

.fw_box_tt{width:221px; overflow:auto;zoom:1; float:left;}

.box_tt_a{padding:15px 11px 15px 11px; border-bottom: 1px solid #e5e5e5; border-right:1px solid #e5e5e5;}

.box_tt_b{padding:12px 9px 13px 8px; border: 3px solid #e5e5e5;}

.fw_tt_img{ width:220px; height:220px; margin-bottom:10px; overflow:hidden;}

.fw_tt_bt{ width:220px; height:20px; line-height:20px; font-weight:bold; overflow:hidden;}

.fw_box_tt a{ color:#666666;}

.fw_tt_tx{ width:220px; line-height:20px; height:40px; overflow:hidden; color:#666666;}

.fw_tt_tx i{ float:left; display:block; width:13px; height:14px; margin:3px 2px 0px 0px; background-image:url(http://mj.588cy.com/img/spr_ico.png);
font-size:0px;}

.i_hot{ background-position:-55px -165px;}

.i_new{ background-position:-55px -179px;}

.i_qiang{ background-position:-55px -193px;}

.fw_tt_jg{ width:220px; height:24px; line-height:24px; color:#999999;}

.fw_tt_jg i{ display:block; float:right;width:37px; height:16px; margin:5px 5px 1px 0px; background:url(http://mj.588cy.com/img/spr_ico.png) no-repeat
0px -164px;}

.fw_tt_jg span{ font-size:14px; font-weight:bold;}

.fw_tt_jg em{ color:#fa3c32; font-size:18px; font-style:normal; font-weight:100; margin:0px 3px;}

.fw_tt_jg del{ margin:0px 6px;}

.fw_tt_mc{ width:200px; height:20px; line-height:20px; padding-left:20px; overflow:hidden; background:url(http://mj.588cy.com/img/spr_ico.png)
no-repeat -59px 4px;}

.mj_db{ width:40px; height:26px; padding-left:33px; float:left; background:url(http://mj.588cy.com/img/btnt.png) no-repeat 0px 0px; display:block;
cursor:pointer; color:#666666;line-height:26px; }

.mj_db_hover{background:url(http://mj.588cy.com/img/btnt.png) no-repeat 0px -26px;}

.mj_db_click{background:url(http://mj.588cy.com/img/btnt.png) no-repeat 0px -52px; color:#FF6600;}

.fw_tt_qkk{ width:220px; height:26px; margin-top:5px;}

.fw_tt_qkk a{ display:block; float: left; width:73px; height:26px; margin-right:9px; background-image:url(http://mj.588cy.com/img/qukankan.png);
text-indent:-99999px;}
.db_box{ width:180px;z-index:99; right:0px; bottom:110px;POSITION:fixed;_position:absolute; _margin-top:expression(document.documentElement.clientHeight-this.style.pixelHeight+document.documentElement.scrollTop);
font-family: "宋体";}

.db_right{ width:150px; height:auto; float:right; border:3px solid #959595; background-color:#FFFFFF; display:none;}

.db_right_tt{ width:150px; height:56px; line-height:56px; color:#c6c6c6; border-bottom:1px dotted #959595; text-align:center;}

.db_right_zj{ width:120px; height:auto; border-bottom:1px dotted #959595; padding:20px 15px;}

.db_right_zj a{ line-height:18px;color:#136bad;}

.db_right_zj a:hover{ text-decoration:underline;}

.db_right_zj span{ display:block; line-height:18px; color:#999999}

.db_right_zj span em{color: #FF3300; font-style:normal; font-weight:bold;}

.dd_bottom{ width:138px; height:26px; padding:8px 6px;}

.dd_bottom a{ width:67px; height:26px; float:left; margin-right:4px; background:url(http://mj.588cy.com/img/db.png) 0px -109px; text-indent:-9999px;}

.dd_bottom span{ width:67px; height:26px; float:left;background:url(http://mj.588cy.com/img/db.png) 0px -135px; text-indent:-9999px; cursor:pointer;}

.db_left{ width:24px; height:106px; float:right; background:url(http://mj.588cy.com/img/db.png) no-repeat; cursor:pointer; display:none;}

.db_left_hover{ background:url(http://mj.588cy.com/img/db.png) no-repeat -25px 0px;}
.page{ width:979px; margin:20px auto; text-align:center; font-size:14px;}

.page span,.page a{background-color:#f0f0f0;padding:4px 9px;margin-right:6px; display:inline-block;*display:inline;*zoom:1; vertical-align:middle;}

.page a{color:#3d7a99;text-decoration:none;}

.page a:hover{ color:#ffffff; background-color:#666;}

.page span{ color:#999999;}

.page strong{ background-color:#666;padding:4px 9px;margin-right:6px; color:#FFFFFF; display:inline-block;*display:inline;*zoom:1; vertical-align:middle;}

.page i{ padding:4px 9px;margin-right:6px; color:#999999; display:inline-block;*display:inline;*zoom:1; vertical-align:middle;}

</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$(".fw_box_tt").hover(function(){

   $(this).removeClass("box_tt_a").addClass("box_tt_b");

},function(){

   $(this).removeClass("box_tt_b").addClass("box_tt_a");

});
//对比特效

$(".mj_db").hover(function(){

   $(this).addClass("mj_db_hover");

},function(){

   $(this).removeClass("mj_db_hover");

});

$(".mj_db").toggle(function(){

   var n = $(this).parents(".fw_box_tt").index();

   var jg = $(this).parent().siblings(".fw_tt_jg").find("span").html();

   var bt = $(this).parent().siblings(".fw_tt_bt").html();

   var tt = $(".db_right_zj").size();

   var cs = ".c_"+ n;

   var ncs = $(cs).size();

   if(ncs<1){

$(".db_left").show().addClass("db_left_hover");

$(".db_right").show();

   if(tt<4){

   $(this).addClass("mj_db_click");

   $(".db_right").prepend('<div class="db_right_zj c_'+ n +'">'+ bt +'<span>'+ jg +'</span></div>');

   $(".db_right_tt").first().detach();

   }else{

   alert("您最多只能添加4个服务到对比栏");

   };

}else{

   $(cs).detach();

   var tt = $(".db_right_zj").size();

   if(tt<4){

   $(".dd_bottom").before('<div class="db_right_tt">您还可以继续添加</div>');

   $(this).removeClass("mj_db_click");

   }else{

   alert("您最多只能添加4个服务到对比栏");

   };

};

},function(){

   var n = $(this).parents(".fw_box_tt").index();

   var cs = ".c_"+ n;

   var ncs = $(cs).size();

   if(ncs<1){

   var jg = $(this).parent().siblings(".fw_tt_jg").find("span").html();

   var bt = $(this).parent().siblings(".fw_tt_bt").html();

   var tt = $(".db_right_zj").size();

   if(tt<4){

   $(this).addClass("mj_db_click");

   $(".db_right").prepend('<div class="db_right_zj c_'+ n +'">'+ bt +'<span>'+ jg +'</span></div>');

   $(".db_right_tt").first().detach();

   }else{

   alert("您最多只能添加4个服务到对比栏");

   };

   }else{

   $(cs).detach();

   var tt = $(".db_right_zj").size();

   if(tt<4){

   $(".dd_bottom").before('<div class="db_right_tt">您还可以继续添加</div>');

   $(this).removeClass("mj_db_click");

   }else{

   alert("您最多只能添加4个服务到对比栏");

   };

};

})
//对比展开&关闭特效

$(".db_left").toggle(function(){

   $(this).removeClass("db_left_hover");

   $(".db_right").hide();

},function(){

   $(this).addClass("db_left_hover");

   $(".db_right").show();

});

//对比清空特效

$(".dd_bottom span").click(function(){

   $(".db_right_zj").detach();

   $(".mj_db").removeClass("mj_db_click");

   var zj = $(".db_right_tt").size();

   for(i=(zj+1);i<=4;i++)

   {

   $(".db_right").prepend('<div class="db_right_tt">您还可以继续添加</div>');

   }

})

});

</script>

</head>
<body>

<div class="mj_lm_nav">

<a href="#">逛街</a><i></i><a href="http://ck114.taobao.com">时尚衣橱</a>

</div>
<div class="mj_zfw_box">

<div class="sx_box">

<span class="sx_aa"><b>排序：</b></span>

<span><a href="#" class="sx_ab">默认</a>|</span>

<span><a href="#" class="sx_aa">折扣<i></i></a>|</span>

<span><a href="#" class="sx_aa">价格<i></i></a></span>

<span><input name="" type="text" class="input_a" />-<input name="" type="text" class="input_c" /><input type="button" class="input_b" value="确定" /></span>

<span><a href="#" class="sx_ac"><i></i><em>支持网上订购</em></a></span>

</div>
<div class="fw_box">

<div class="fw_box_tt box_tt_a">

<div class="fw_tt_img">

<a href="http://item.taobao.com/item.htm?id=20193127414" target="_blank"><img height="220" src="http://mj.588cy.com/img/mj1.jpg"
/></a>

</div>

<div class="fw_tt_bt">

<a href="http://item.taobao.com/item.htm?id=20193127414" target="_blank">2013新款外贸男士水洗牛仔裤男式韩版修身锥形裤潮男低腰小脚裤</a>

</div>

<div class="fw_tt_jg"><i></i><span>¥<em>98</em></span><del>¥2700</del><em>0.1</em>折</div>

<div class="fw_tt_qkk">

<a href="http://item.taobao.com/item.htm?id=20193127414" target="_blank">去看看</a><span class="mj_db">对比</span><span class="clear"></span>

</div>

</div>
<div class="fw_box_tt box_tt_a">

<div class="fw_tt_img">

<a href="http://item.taobao.com/item.htm?id=18173786484" target="_blank"><img height="220" src="http://mj.588cy.com/img/mj2.jpg"
/></a>

</div>

<div class="fw_tt_bt">

<a href="http://item.taobao.com/item.htm?id=18173786484" target="_blank">男式长袖牛仔衬衫男士韩版修身浅蓝色牛仔衬衣个性公子潮男春装</a>

</div>

<div class="fw_tt_jg"><i></i><span>¥<em>108</em></span><del>¥2700</del><em>0.1</em>折</div>
<div class="fw_tt_qkk">

<a href="http://item.taobao.com/item.htm?id=18173786484" target="_blank">去看看</a><span class="mj_db">对比</span><span class="clear"></span>

</div>

</div>
<div class="fw_box_tt box_tt_a">

<div class="fw_tt_img">

<a href="http://item.taobao.com/item.htm?id=18153194119" target="_blank"><img height="220" src="http://mj.588cy.com/img/mj3.jpg"
/></a>

</div>

<div class="fw_tt_bt">

<a href="http://item.taobao.com/item.htm?id=18153194119" target="_blank">2013新款英伦风男式牛仔衬衫男士韩版修身短袖牛仔衬衣潮男夏装</a>

</div>

<div class="fw_tt_jg"><i></i><span>¥<em>88</em></span><del>¥2700</del><em>0.1</em>折</div>

<div class="fw_tt_qkk">

<a href="http://item.taobao.com/item.htm?id=18153194119" target="_blank">去看看</a><span class="mj_db">对比</span><span class="clear"></span>

</div>

</div>
<div class="fw_box_tt box_tt_a">

<div class="fw_tt_img">

<a href="http://item.taobao.com/item.htm?id=20124467167" target="_blank"><img height="220" src="http://mj.588cy.com/img/mj4.jpg"
/></a>

</div>

<div class="fw_tt_bt">

<a href="http://item.taobao.com/item.htm?id=20124467167" target="_blank">春装男式牛仔衬衣男士韩版ZAR同款水洗磨白全棉修身长袖牛仔衬衫</a>

</div>

<div class="fw_tt_jg"><i></i><span>¥<em>88</em></span><del>¥2700</del><em>0.1</em>折</div>

<div class="fw_tt_qkk">

<a href="http://item.taobao.com/item.htm?id=20124467167" target="_blank">去看看</a><span class="mj_db">对比</span><span class="clear"></span>

</div>

</div>
<div class="fw_box_tt box_tt_a">

<div class="fw_tt_img">

<a href="http://item.taobao.com/item.htm?id=24428584789" target="_blank"><img height="220" src="http://mj.588cy.com/img/mj5.jpg"
/></a>

</div>

<div class="fw_tt_bt">

<a href="http://item.taobao.com/item.htm?id=24428584789" target="_blank">2013春夏男式休闲裤子男士韩版修身纯棉小脚裤潮男糖果色低腰裤</a>

</div>

<div class="fw_tt_jg"><i></i><span>¥<em>58</em></span><del>¥2700</del><em>0.1</em>折</div>

<div class="fw_tt_qkk">

<a href="http://item.taobao.com/item.htm?id=24428584789" target="_blank">去看看</a><span class="mj_db">对比</span><span class="clear"></span>

</div>

</div>
<div class="fw_box_tt box_tt_a">

<div class="fw_tt_img">

<a href="http://item.taobao.com/item.htm?id=20091747054" target="_blank"><img height="220" src="http://mj.588cy.com/img/mj6.jpg"
/></a>

</div>

<div class="fw_tt_bt">

<a href="http://item.taobao.com/item.htm?id=20091747054" target="_blank">外贸原单男式纯棉衬衣男士韩版修身短袖衬衫潮男格子衬衫夏装</a>

</div>

<div class="fw_tt_jg"><i></i><span>¥<em>58</em></span><del>¥2700</del><em>0.1</em>折</div>

<div class="fw_tt_qkk">

<a href="http://item.taobao.com/item.htm?id=20091747054" target="_blank">去看看</a><span class="mj_db">对比</span><span class="clear"></span>

</div>

</div>
<div class="fw_box_tt box_tt_a">

<div class="fw_tt_img">

<a href="http://item.taobao.com/item.htm?id=24415800524" target="_blank"><img height="220" src="http://mj.588cy.com/img/mj7.jpg"
/></a>

</div>

<div class="fw_tt_bt">

<a href="http://item.taobao.com/item.htm?id=24415800524" target="_blank">男式牛仔九分裤男士韩版修身9份牛仔裤潮男中低腰锥形裤小脚裤</a>

</div>

<div class="fw_tt_jg"><i></i><span>¥<em>126</em></span><del>¥2700</del><em>0.1</em>折</div>

<div class="fw_tt_qkk">

<a href="http://item.taobao.com/item.htm?id=24415800524" target="_blank">去看看</a><span class="mj_db">对比</span><span class="clear"></span>

</div>

</div>
<div class="fw_box_tt box_tt_a">

<div class="fw_tt_img">

<a href="http://item.taobao.com/item.htm?id=19738147574" target="_blank"><img height="220" src="http://mj.588cy.com/img/mj8.jpg"
/></a>

</div>

<div class="fw_tt_bt">

<a href="http://item.taobao.com/item.htm?id=19738147574" target="_blank">2013春夏新款欧美时尚韩版修身男士九分裤潮男小脚裤男式休闲裤</a>

</div>
<div class="fw_tt_jg"><i></i><span>¥<em>128</em></span><del>¥2700</del><em>0.1</em>折</div>

<div class="fw_tt_qkk">

<a href="http://item.taobao.com/item.htm?id=19738147574" target="_blank">去看看</a><span class="mj_db">对比</span><span class="clear"></span>

</div>

</div>

<div class="clear"></div>

</div>

</div>
<div class="page">

<span>上一页</span><strong>1</strong><a href="#">2</a><a href="#">3</a><a href="#">4</a><a href="#">5</a><a href="#">6</a><i>...</i><a href="#">100</a><a href="#">下一页</a>

</div>
<div class="db_box">

<div class="db_right">

<div class="db_right_tt">

您还可以继续添加

</div>

<div class="db_right_tt">

您还可以继续添加

</div>

<div class="db_right_tt">

您还可以继续添加

</div>

<div class="db_right_tt">

您还可以继续添加

</div>

<div class="dd_bottom">

<a href="#">开始对比</a>

<span>清空全部</span>

<div class="clear"></div>

</div>

</div>

<div class="db_left"></div>

<div class="clear"></div>

</div>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航