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

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

作者：MJ 发布于：2013-4-28 3:16 Sunday 分类：JQuery
这款代码是用JQ和CSS的结合仿爱乐活和京东商城商品列表页面的商品对比特效效果，点击商品图片下面的“对比”按钮就会把本商品的信息添加到旁边的商品对比栏里面，具体效果请运行下面这个代码进行演示：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; 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>&yen;<em>98</em></span><del>&yen;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>&yen;<em>108</em></span><del>&yen;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>&yen;<em>88</em></span><del>&yen;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>&yen;<em>88</em></span><del>&yen;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>&yen;<em>58</em></span><del>&yen;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>&yen;<em>58</em></span><del>&yen;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>&yen;<em>126</em></span><del>&yen;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>&yen;<em>128</em></span><del>&yen;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>
标签: 商品对比特效
« JS获得当前网址：JS如何获得当前地址栏url地址 | JS浮动对联广告代码»
发表评论：
blogger
分类
- MJ分享(5)
- JQuery(23)
- Css(16)
- Html5(1)
- PHP(20)
- Seo优化(3)
最新碎语
- 佛曰：命由己造，相由心生，世间万物皆是化相，心不动，万物皆不动，心不变，万物皆不变。
  2012-10-24 02:01
- 佛曰：人生有八苦：生、老、病、死，爱别离，怨长久，求不得，放不下！
  2012-10-24 01:59
- 佛曰：笑着面对，不去埋怨。悠然，随心，随性，随缘。注定让一生改变的，只在百年后，那一朵花开的时间。
  2012-10-24 01:56
- 裤子尺码：腰围29（2.23尺/75-76cm）前档24-25cm 大腿48-50cm 小腿32-33cm 裤长95cm
  2012-10-17 15:49
- WEB前端工程师：我们是工程师中的设计师，是设计师中的工程师。
  2012-09-02 15:34
搜索
随机日志
链接
京东商城商品对比特效JS代码

blogger

分类

最新碎语

搜索

随机日志

链接
