前段时间，朋友叫我帮他写个商品对比功能，当时正好在逛绿森数码商城，点开商品列表，看到有商品对比功能，然后直接下载了他的JS滚动文件和抽出了对比框的样式，然后自己完善了下。

下面是小菜自己写的代码，写的不咋的，请老鸟不要见笑

示例页面：http://mt.kgula.com/product/

商品对比功能代码分享

商品对比调用的JS文件（包含了商品对比框浮动JS）：

1. /*浮动窗口*/
2. (function(){
3. var n=10;
4. var obj=document.getElementById("goods-compare");
5. if(!obj){
6. return false;
7. }
8. var x=0;
9. window.onscroll=function(){
10. obj.style.top=(document.body.scrollTop||document.documentElement.scrollTop)+n+'px';
11. };
12. window.onresize=function(){
13. obj.style.top=(document.body.scrollTop||document.documentElement.scrollTop)+n+'px';
14. };
15. })();
16.  
17. //添加显示对比框
18. function addcompare(chk){
19. $('#goods-compare').fadeIn().show();
20. var count=$(".compare-box li").length;
21. if (count>2)//这里可以修改对比的数据哦
22. {
23. alert('产品比较最多选3种哦');
24. return;
25. }
26.  
27. $.ajax({
28. type: 'post',
29. url: 'ajax.php',
30. data: {
31. 'action':'1',
32. 'gid':chk.gid,//商品ID
33. 'gname':chk.gname,//商品名称
34. 'gtype':chk.gtype//商品类别，类别不同时不能比较
35. },
36. cache: false,
37. async: false,
38. success: function(result) {
39. if(result!='')
40. {
41. alert(result);
42. }else{
43. var url='http://www.lusen.com/product-'+chk.gid+'.html';//设置商品的链接地址
44. $(".compare-box").append("<li class='division clearfix' id='"+chk.gid+"'><div class='span-3'><a href='"+url+"' target='_blank' title='"+chk.gname+"'>'"+chk.gname+"'</a></div><span onclick=\"removecompare('"+chk.gid+"');\">删除</span></li>")
45. $("#comids").val($(".compare-box li").map(function(){//将对比的所有商品ID，赋值给#comids
46. return $(this).attr('id');
47. }).get().join(","));
48. }
49. }
50. });
51. }
52.  
53. //删除对比产品
54. function removecompare(id)
55. {
56. $.ajax({
57. type: 'post',
58. url: 'ajax.php',
59. data: {
60. 'action':'2',
61. 'gid':id
62. },
63. cache: false,
64. success: function(result) {
65. $("#"+id).remove();
66. $("#comids").val($(".compare-box li").map(function(){
67. return $(this).attr('id');
68. }).get().join(","));
69. }
70. });
71.  
72. }
73. //清空对比产品
74. function clearcompare()
75. {
76. $.ajax({
77. type: 'post',
78. url: 'ajax.php',
79. data: {
80. 'action':'3'
81. },
82. cache: false,
83. success: function(result) {
84. $(".compare-box").html('');
85. $("#comids").val('');
86. }
87. });
88. }
89. //显示对比框
90. function showcompare()
91. {
92. $.ajax({
93. type: 'post',
94. url: 'ajax.php',
95. data: {
96. 'action':'4'
97. },
98. success: function(result) {
99. if(result){
100. $(".compare-box").append(result);
101. $("#comids").val($(".compare-box li").map(function(){
102. return $(this).attr('id');
103. }).get().join(","));
104. $('#goods-compare').fadeIn().show();
105. }
106. }
107. });
108.  
109. }
110.  
111. //点击关闭对比框
112. $('.close-gc').click(function(){
113. $('#goods-compare').fadeOut().hide();
114. });

商品对比调用Ajax文件

1. <?php
2. function mb_unserialize($serial_str) {
3. $serial_str =stripslashes($serial_str);
4. return unserialize($serial_str);
5. }
6. if($_POST['action']=='1') {//add
7. if(isset($_COOKIE['gtype'])) {
8. if($_COOKIE['gtype']!=$_POST['gtype']) {
9. echo '对不起，您选择的是不同类别的产品无法加入对比，请选择同类产品或清空当前对比栏再选择。';
10. return;
11. }
12. }else {
13. setcookie('gtype',$_POST['gtype']);
14. }
15. if(isset($_COOKIE['gid'])) {
16. $arr_str = $_COOKIE['gid'];
17. $arr=mb_unserialize($arr_str);
18. if(count($arr)>2) {//商品比较数量
19. echo "商品比较最多选3种";
20. return;
21. }
22. foreach($arr as $val) {
23. if($val[0]==$_POST['gid']) {
24. echo "该商品已经加入对比框";
25. return;
26. }
27. }
28. $info=array($_POST['gid'],$_POST['gname'],$_POST['gtype']);
29. $arr[]=$info;
30. $arr_str=serialize($arr);
31. setcookie('gid',$arr_str);
32. }else {
33. $info=array($_POST['gid'],$_POST['gname'],$_POST['gtype']);
34. $arr[]=$info;
35. $arr_str=serialize($arr);
36. setcookie('gid',$arr_str);
37. }
38. }else if($_POST['action']=='2') {//delone
39. $id=$_POST['gid'];
40. $arr_str = $_COOKIE['gid'];
41. $arr=mb_unserialize($arr_str);
42. foreach($arr as $key=>$val) {
43. if($val[0]==$id) {
44. unset ($arr[$key]);
45. }
46. }
47. $arr_str=serialize($arr);
48. setcookie('gid',$arr_str);
49. }else if($_POST['action']=='3') {//delall
50. setcookie('gid','');
51. setcookie('gtype','');
52. }else if($_POST['action']=='4') {//showlist
53. if(isset($_COOKIE['gid'])) {
54. $data='';
55. $arr_str = $_COOKIE['gid'];
56. $arr=mb_unserialize($arr_str);
57. foreach ($arr as $val){
58. $url="http://www.lusen.com/product-".$val[0].".html";
59. $data.="<li id='{$val[0]}' class='division clearfix'><div class='span-3'><a href='{$url}' target='_blank' title='{$val[1]}'>{$val[1]}</a></div><span onclick=\"removecompare('{$val[0]}');\">删除</span></li>";
60. }
61. echo $data;
62. }
63. }
64. ?>