首页 > 教程 > 帝国CMS > 帝国cms产品对比插件使用说明：使用结合项实现产品对比

帝国cms产品对比插件使用说明：使用结合项实现产品对比

ECMSPLUS | 2021-08-19 |

摘要：这里可以修改结合项的条件
url += "&"+"duibinum"+"["+sw+"]"+"="+proid;对比列表<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/...

nHxECMSPLUS
这里可以修改结合项的条件nHxECMSPLUS
 url += "&"+"duibinum"+"["+sw+"]"+"="+proid;

对比列表

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">nHxECMSPLUS
<html xmlns="http://www.w3.org/1999/xhtml">nHxECMSPLUS
<head>nHxECMSPLUS
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />nHxECMSPLUS
<title>漂亮实用的商品对比效果JS代码</title>nHxECMSPLUS
<link rel="stylesheet" href="[!--news.url--]assets/css/duibi.css" type="text/css" />nHxECMSPLUS
</head>nHxECMSPLUS
<body>nHxECMSPLUS
<div class="b5" id="bdbb">nHxECMSPLUS
  <div class="m2">nHxECMSPLUS
    <div class="m2lf"><a href="http://www.17sucai.com/"><img src="images/01.jpg" alt=" 深层净化活力洁面摩丝"/></a></div>nHxECMSPLUS
    <div class="m2rg">nHxECMSPLUS
      <h3><a href="http://www.17sucai.com/">Neutrogena露得清</a> | <a href="http://www.17sucai.com/">深层净化活力洁面摩丝</a>&nbsp;&nbsp;￥89.00</h3>nHxECMSPLUS
      <dl>nHxECMSPLUS
        <dt>分类：<a href="http://www.17sucai.com/">洁面</a>&nbsp;&nbsp;&nbsp;评论：<a href="http://www.17sucai.com"><span class="color3">6453</span></a> 条 &nbsp;&nbsp;<span class="color3">15</span>人用过</dt>nHxECMSPLUS
        <dd>nHxECMSPLUS
          <input type="checkbox" id="a27285" value="深层净化活力洁面摩丝" onclick="dblist(27285,event)" />nHxECMSPLUS
          <label for="a27285">加入对比</label>nHxECMSPLUS
        </dd>nHxECMSPLUS
      </dl>nHxECMSPLUS
      <p>全新推出的露得清深层净化活力洁面摩丝，含有丰富而柔密的泡沫，直接深入毛孔清洁污垢，让肌肤更透亮；独特活力成分帮助唤醒你的肌肤，给你清新......<a href="http://www.17sucai.com/">&gt;&gt;查看详细</a></p>nHxECMSPLUS
    </div>nHxECMSPLUS
  </div>nHxECMSPLUS
  <div class="m2">nHxECMSPLUS
    <div class="m2lf"><a href="http://www.17sucai.com"><img src="images/02.jpg" alt=" 深层卸妆油"/></a></div>nHxECMSPLUS
    <div class="m2rg">nHxECMSPLUS
      <h3><a href="http://www.17sucai.com">DHC蝶翠诗</a> | <a href="http://www.17sucai.com">深层卸妆油</a>&nbsp;&nbsp;￥198.00</h3>nHxECMSPLUS
      <dl>nHxECMSPLUS
        <dt> 分类：<a href="http://www.17sucai.com">卸妆</a>&nbsp;&nbsp;&nbsp;评论：<a href="http://www.17sucai.com"><span class="color3">4367</span></a> 条 &nbsp;&nbsp;<span class="color3">1487</span>人用过</dt>nHxECMSPLUS
        <dd>nHxECMSPLUS
          <input type="checkbox" id="a5754" value="深层卸妆油" onclick="dblist(5754,event)" />nHxECMSPLUS
       nHxECMSPLUS
        </dd>nHxECMSPLUS
      </dl>nHxECMSPLUS
      <p>以优质橄榄精华油为主要成分的DHC深层卸妆油虽是油类，但又具有水溶性，可用清水完全洗净，是一种划时代的卸妆品。可迅速溶解难以卸除的彩妆，......<a href="http://www.17sucai.com">&gt;&gt;查看详细</a></p>nHxECMSPLUS
    </div>nHxECMSPLUS
  </div>nHxECMSPLUS
  <div class="m2">nHxECMSPLUS
    <div class="m2lf"><a href="http://www.17sucai.com"><img src="images/03.jpg" alt=" 纯榄滋养皂"/></a></div>nHxECMSPLUS
    <div class="m2rg">nHxECMSPLUS
      <h3><a href="http://www.17sucai.com">DHC蝶翠诗</a> | <a href="http://www.17sucai.com">纯榄滋养皂</a>&nbsp;&nbsp;￥110.00</h3>nHxECMSPLUS
      <dl>nHxECMSPLUS
        <dt>分类：<a href='http://www.17sucai.com'>洁面</a>&nbsp;&nbsp;&nbsp;评论：<a href="http://www.17sucai.com"><span class="color3">3729</span></a> 条 &nbsp;&nbsp;<span class="color3">1557</span>人用过</dt>nHxECMSPLUS
        <dd>nHxECMSPLUS
          <input type="checkbox" id="a5755" value="纯榄滋养皂" onclick="dblist(5755,event)" />nHxECMSPLUS
        nHxECMSPLUS
        </dd>nHxECMSPLUS
      </dl>nHxECMSPLUS
      <p>皮肤粗糙、青春痘、暗沉等多半是因面部没有彻底洗净而造成的。DHC纯榄滋养皂是一款内含橄榄精华油和蜂蜜的透明洁面皂。具备能够彻底清除肌肤污......<a href="http://www.17sucai.com">&gt;&gt;查看详细</a></p>nHxECMSPLUS
    </div>nHxECMSPLUS
  </div>nHxECMSPLUS
  <div class="m2">nHxECMSPLUS
    <div class="m2lf"><a href="http://www.17sucai.com"><img src="images/01.jpg" alt=" 纯榄滋养皂"/></a></div>nHxECMSPLUS
    <div class="m2rg">nHxECMSPLUS
      <h3><a href="http://www.17sucai.com">DHC蝶翠诗1</a> | <a href="http://www.17sucai.com">纯榄滋养皂1</a>&nbsp;&nbsp;￥110.00</h3>nHxECMSPLUS
      <dl>nHxECMSPLUS
        <dt>分类：<a href='http://www.17sucai.com'>洁面</a>&nbsp;&nbsp;&nbsp;评论：<a href="http://www.17sucai.com"><span class="color3">3729</span></a> 条 &nbsp;&nbsp;<span class="color3">1557</span>人用过</dt>nHxECMSPLUS
        <dd>nHxECMSPLUS
          <input type="checkbox" id="a5757" value="纯榄滋养皂1" onclick="dblist(5757,event)" />nHxECMSPLUS
        nHxECMSPLUS
        </dd>nHxECMSPLUS
      </dl>nHxECMSPLUS
      <p>皮肤粗糙、青春痘、暗沉等多半是因面部没有彻底洗净而造成的。DHC纯榄滋养皂是一款内含橄榄精华油和蜂蜜的透明洁面皂。具备能够彻底清除肌肤污......<a href="http://www.17sucai.com">&gt;&gt;查看详细</a></p>nHxECMSPLUS
    </div>nHxECMSPLUS
  </div>nHxECMSPLUS
</div>nHxECMSPLUS
<div id="xsyc"></div>nHxECMSPLUS
<div id="bbv">nHxECMSPLUS
  <div id="dbimg" onclick="dbhidd()"></div>nHxECMSPLUS
  <div id="dbnr">nHxECMSPLUS
    <h4><span>妆品对比</span><span class="span2" onclick="dbhidd()"><img src="images/closex.gif" align="absmiddle" />&nbsp;隐藏对比框</span></h4>nHxECMSPLUS
    <div id="tishi">对不起，您还没有选择产品</div>nHxECMSPLUS
    <ul>nHxECMSPLUS
    </ul>nHxECMSPLUS
    <div class="pkbut"> <span><a href="#" onclick="return comparepro();">开始对比</a></span> <span onclick="clears()">清&nbsp;空</span> </div>nHxECMSPLUS
  </div>nHxECMSPLUS
</div>nHxECMSPLUS
<script src="[!--news.url--]assets/js/dom.js" type="text/javascript"></script>nHxECMSPLUS
<script src="[!--news.url--]assets/js/compare.js" type="text/javascript"></script>nHxECMSPLUS
</body>nHxECMSPLUS
</html>nHxECMSPLUS
nHxECMSPLUS
 

对比结果 列表模板

nHxECMSPLUS

JS

nHxECMSPLUS
var dbnr=$("dbnr");nHxECMSPLUS
var bbv=$("bbv");nHxECMSPLUS
var xsyc=$("xsyc");nHxECMSPLUS
var xul=$("dbnr","ul")[0];nHxECMSPLUS
var dbimg=$("dbimg");nHxECMSPLUS
//初始化页面选框nHxECMSPLUS
function renew()nHxECMSPLUS
{nHxECMSPLUS
    var cooks=GetCookie("listhc").split("/");nHxECMSPLUS
    var bdbb=$("bdbb","input");nHxECMSPLUS
    for(var c=1;c<cooks.length;c++){var wf=cooks[c].split("_");for(var i=0;i<bdbb.length;i++){if(bdbb[i].id=="a"+wf[0]){bdbb[i].checked=true;break;}}}nHxECMSPLUS
}nHxECMSPLUS
//初始化漂浮层nHxECMSPLUS
function newpos()nHxECMSPLUS
{nHxECMSPLUS
    var ouli="",alls=0;nHxECMSPLUS
    var cooks=GetCookie("listhc").split("/");nHxECMSPLUS
    for(var i=1;i<cooks.length;i++){nHxECMSPLUS
        alls++;var wf=cooks[i].split("_");nHxECMSPLUS
        ouli+="<li>"+wf[1].replace("&%#","/")+"</li>";nHxECMSPLUS
    }nHxECMSPLUS
    xul.innerHTML=ouli;nHxECMSPLUS
    dbimg.innerHTML=alls;nHxECMSPLUS
    $("tishi").style.display=(ouli=="")?"block":"none";nHxECMSPLUS
    xul.style.display=(ouli=="")?"none":"block";nHxECMSPLUS
    //if(!alls){dbnr.style.display="none";}nHxECMSPLUS
}nHxECMSPLUS
//点击处理，增加使用其他按钮加入对比的功能，增加替换/分割符nHxECMSPLUS
function dblist(id,event,linkproname)nHxECMSPLUS
{nHxECMSPLUS
    if(typeof(linkproname) != "undefined" && linkproname.length > 0)nHxECMSPLUS
    {nHxECMSPLUS
        var nrid=$("link"+id);nHxECMSPLUS
        var cook=GetCookie("listhc");nHxECMSPLUS
        var cooks=cook.split("/");nHxECMSPLUS
       nHxECMSPLUS
        //判断是否重复添加nHxECMSPLUS
        if(cook.indexOf("/"+id) > -1)nHxECMSPLUS
        {nHxECMSPLUS
            alert(linkproname+"已经加入对比");nHxECMSPLUS
            return;nHxECMSPLUS
        }nHxECMSPLUS
        if(cooks.length>5){alert("最多只允许添加5条");return;}else{SetCookie("listhc",cook+"/"+id+"_"+linkproname.replace("/","&%#"));zbyd(window.event||event);}nHxECMSPLUS
       nHxECMSPLUS
    }nHxECMSPLUS
    elsenHxECMSPLUS
    {nHxECMSPLUS
        var cook=GetCookie("listhc");nHxECMSPLUS
        var cooks=cook.split("/");nHxECMSPLUS
        nHxECMSPLUS
        //修改：支持页面上有多个相同产品nHxECMSPLUS
        var ischecked = false;nHxECMSPLUS
        var nrid=document.getElementsByTagName("input");nHxECMSPLUS
        for(var i = 0;i<nrid.length;i++)nHxECMSPLUS
        {nHxECMSPLUS
            if(nrid[i].id == "a"+id && nrid[i].checked)nHxECMSPLUS
            {nHxECMSPLUS
                //增加判断重复-liuliqiangnHxECMSPLUS
                if(cook.indexOf("/"+id) > -1)nHxECMSPLUS
                {nHxECMSPLUS
                    alert(nrid[i].value+"已经加入对比");nHxECMSPLUS
                    return;nHxECMSPLUS
                }nHxECMSPLUS
                else if(cooks.length>5)nHxECMSPLUS
                {nHxECMSPLUS
                    nrid[i].checked=false;alert("最多只允许添加5条");return;nHxECMSPLUS
                }nHxECMSPLUS
                elsenHxECMSPLUS
                {nHxECMSPLUS
                    SetCookie("listhc",cook+"/"+id+"_"+nrid[i].value.replace("/","&%#"));ischecked=true;zbyd(window.event||event);nHxECMSPLUS
                }nHxECMSPLUS
            }nHxECMSPLUS
        }nHxECMSPLUS
        if(!ischecked)nHxECMSPLUS
            delCookie(id);nHxECMSPLUS
    }nHxECMSPLUS
    nHxECMSPLUS
    newpos();nHxECMSPLUS
    dbnr.style.display="block";nHxECMSPLUS
}nHxECMSPLUS
//漂浮窗口删除nHxECMSPLUS
function delli(id){nHxECMSPLUS
    delCookie(id);nHxECMSPLUS
    var nrid=document.getElementsByTagName("input");nHxECMSPLUS
    for(var i = 0;i<nrid.length;i++)nHxECMSPLUS
    {nHxECMSPLUS
        if(nrid[i].id == "a"+id)nHxECMSPLUS
        {nHxECMSPLUS
            nrid[i].checked = false;nHxECMSPLUS
        }nHxECMSPLUS
    }nHxECMSPLUS
    newpos();nHxECMSPLUS
}nHxECMSPLUS
//设置COOKIE  // 增加设置path，使各目录能取到相同的COOKIEnHxECMSPLUS
function SetCookie(name,value){var exp=new Date();exp.setTime(exp.getTime()+24*3600000);document.cookie=name+"="+escape(value)+";expires="+exp.toGMTString()+";path=/";}nHxECMSPLUS
//获得COOKIEnHxECMSPLUS
function GetCookie(name){var arr=document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));if(arr!=null){return unescape(arr[2]);}else{return "";}}nHxECMSPLUS
//删除COOKIEnHxECMSPLUS
function delCookie(id)nHxECMSPLUS
{nHxECMSPLUS
    var cooks=GetCookie("listhc").split("/"),dstr="";nHxECMSPLUS
    for(var i=1;i<cooks.length;i++){if(cooks[i].split("_")[0]!=id){dstr+="/"+cooks[i];}}nHxECMSPLUS
    SetCookie("listhc",dstr);nHxECMSPLUS
}nHxECMSPLUS
nHxECMSPLUS
function clears()nHxECMSPLUS
{nHxECMSPLUS
    SetCookie("listhc","")nHxECMSPLUS
    newpos();nHxECMSPLUS
    var kk=$("bdbb","input").length;nHxECMSPLUS
    for(var k2=0;k2<kk;k2++){nHxECMSPLUS
        $("bdbb","input")[k2].checked=falsenHxECMSPLUS
    }nHxECMSPLUS
}nHxECMSPLUS
//增加点击开始对比的处理nHxECMSPLUS
function comparepro()nHxECMSPLUS
{nHxECMSPLUS
    var cook=GetCookie("listhc");nHxECMSPLUS
    var cooks=cook.split("/");nHxECMSPLUS
    var url = "";nHxECMSPLUS
nHxECMSPLUS
 nHxECMSPLUS
nHxECMSPLUS
nHxECMSPLUS
 nHxECMSPLUS
nHxECMSPLUS
    for(var i = 0;i<cooks.length ;i++)nHxECMSPLUS
    {nHxECMSPLUS
        var proid = cooks[i].substr(0,cooks[i].indexOf("_"));nHxECMSPLUS
        var sw = [i];nHxECMSPLUS
        if(proid.length > 0 )nHxECMSPLUS
            url += "&"+"duibinum"+"["+sw+"]"+"="+proid;nHxECMSPLUS
    }nHxECMSPLUS
    if(url.length > 7)nHxECMSPLUS
    {nHxECMSPLUS
        window.open("/app/action/duibi.php?mid=10&tempid=16&ph=1&line=10"+url);nHxECMSPLUS
    }nHxECMSPLUS
    elsenHxECMSPLUS
    {nHxECMSPLUS
        alert("请先选择要对比的产品");nHxECMSPLUS
    }nHxECMSPLUS
    return false;nHxECMSPLUS
}nHxECMSPLUS
//提示位置方法nHxECMSPLUS
function zbyd(event)nHxECMSPLUS
{nHxECMSPLUS
    var sw=50,sh=50,vw=15,vh=15,tjs=35;nHxECMSPLUS
    var sl=bbv.l();nHxECMSPLUS
    var vl=(event.pageX||(event.clientX+(document.documentElement.scrollLeft||document.body.scrollLeft)))-7;nHxECMSPLUS
    var st=(document.documentElement.scrollTop||document.body.scrollTop)+300;nHxECMSPLUS
    var vt=(event.pageY||(event.clientY+(document.documentElement.scrollTop||document.body.scrollTop)))-7;nHxECMSPLUS
    var spl=Math.floor(Math.abs((sl-vl)/tjs)),spt=Math.abs((st-vt)/tjs);nHxECMSPLUS
    xsyc.style.display="block";xsyc.l(vl);xsyc.t(vt);xsyc.w(vw);xsyc.h(vh);nHxECMSPLUS
    var maxTime=setInterval(function()nHxECMSPLUS
    {nHxECMSPLUS
        xsyc.l((vl+spl)<sl?vl+=spl:((vl-spl)>sl?vl-=spl:vl=sl));xsyc.t((vt+spt)<st?vt+=spt:((vt-spt)>st?vt-=spt:vt=st));nHxECMSPLUS
        xsyc.w(vw+2<sw?vw++:vw=sw);xsyc.h(vh+2<sh?vh++:vh=sh);nHxECMSPLUS
        tjs--;if(!tjs){xsyc.style.display="none";clearInterval(maxTime);}nHxECMSPLUS
    },10);nHxECMSPLUS
}nHxECMSPLUS
//显示/隐藏列表nHxECMSPLUS
function dbhidd(){dbnr.style.display=(dbnr.style.display=="block")?"none":"block";}nHxECMSPLUS
newpos();nHxECMSPLUS
renew();nHxECMSPLUS
nHxECMSPLUS
仅供参考，不明白的可以咨询我。

免责/版权声明：

本篇文章给大家谈谈帝国cms产品对比插件使用说明：使用结合项实现产品对比以及帝国CMS对应的知识，感谢你花时间阅读本站内容，希望对各位有所帮助，你也可以查看更多关于帝国CMS的信息。

1、所有来源标注为 ECMSPLUS/zwcms.com的内容版权均为本站所有，若您需要引用、转载，只需要注明来源及原文链接即可，如涉及大面积转载，请来信告知，获取授权。

2、本站所提供的文章资讯、软件资源、素材源码等内容均为作者提供、网友推荐、互联网整理而来（部分报媒/平媒内容转载自网络合作媒体），仅供学习参考，如有侵犯您的版权，请联系我们，本站将在三个工作日内改正。

3、若您的网站或机构从本站获取的一切资源进行商业使用，除来源为本站的资料需与本站协商外，其他资源请自行联系版权所有人。

4、 ECMSPLUS/zwcms.com不保证资源的准确性、安全性和完整性，请您在阅读、下载及使用过程中自行确认，本站亦不承担上述资源对您或您的网站造成的任何形式的损失或伤害

5、未经 ECMSPLUS/zwcms.com允许，不得盗链、盗用本站资源；不得复制或仿造本网站，不得在非 ECMSPLUS/zwcms.com所属的服务器上建立镜像， ECMSPLUS/zwcms.com对其自行开发的或和他人共同开发的所有内容、技术手段和服务拥有全部知识产权，任何人不得侵害或破坏，也不得擅自使用。

6、互联网的本质是自由与分享，我们真诚的希望，每一份有价值的正能量能够在互联网中自由传播，能够为每一个网站提供动力。

标签：
精品源码
  • 二维码种子溯源系统,一物一码防伪验证查询(单用户版) 支持定制开发

    惊爆价¥1500.00

    立即购买
    二维码种子溯源系统,一物一码防伪验证查询(单用户版) 支持定制开发
  • 帝国cms7.5精仿企业信息综合门户《莞商网》(原创)

    惊爆价¥1500.00

    立即购买
    帝国cms7.5精仿企业信息综合门户《莞商网》(原创)
  • 厂房网,厂房出租,厂房出售,仓库出租,园区招商商铺厂房网整站源码

    惊爆价¥1999.00

    立即购买
    厂房网,厂房出租,厂房出售,仓库出租,园区招商商铺厂房网整站源码
看点推荐
精选文章

站长交流群

互联网站长技术交流群
共同学习，共同进步，共同成长！

QQ交流群

推荐文章

EmpireCMS(帝国CMS) 最新版(v7.5)已知漏洞汇总

帝国第三方登陆：微信内部登陆+扫码登陆2.0安装说明与使用方法

帝国cms百度Webupload批量上传组件，支持前台投稿

帝国cms通过用灵动标签的SQL语句查询来调用栏目导航

帝国cms图片集字段morepic分割，自定义图片集显示

帝国cms 技巧整理笔记，持续更新中

帝国cms 技巧整理笔记：常用变量，COOKIE获取和系统模板

最新文章

pbootcms一页放两个分页--每页放两个分页，pbootCMS全新版本发布
pbootcms上传产品--使用pbootcms上传产品示范
pbootcms火车头发布模块--火车头发布模块：构建高效的内容发布系统
pbootcms批量添加产品--pbootcms批量添加产品-快速、高效、省时省力的产品管理
pbootcms如何生成静态页面--如何利用pbootcms生成静态页面
pbootcms配置面包屑导航--实现pbootcms的面包屑导航配置
pbootcmsphpstudy--PHPStudy对pbootCMS的部署与配置
pbootcms系统--打造完美网站，选择pbootcms系统
pbootcms找回管理员密码--找回pbootcms管理员密码
云优cms网站建设--云优CMS网站建设：打造高效、灵活、专业的网站

热门标签

APP CMS DEDE APP CMS DEDE APP CMS DEDE

关注我们

微信扫一扫，关注更多精彩

  • 公众号
    全面掌握源码一手资讯

  • 服务号
    精彩活动，推送提醒

垂询热线：18680688182

商务合作：0769-8700 9090
文章投稿：

3 会员总数
3200 免费资源
35670 下载总数
396 模板资源
396 源码资源
28 教程资源
396 插件资源
396 运营资源
396 工具资源
运行天数
专注服务于原创模板
资深建站客服专家
一对一专属售后指导
5000+用户诚意推荐
热门模板
下载上传 模板
企业网站模板
商城网店模板
新闻门户模板
游戏动漫模板
更多模板
插件分类
ECShop插件
BaoCMS插件
帝国CMS插件
ShopNC插件
Wordpress插件
更多插件
精选源码
游戏动漫源码
电脑网络源码
影视音乐源码
休闲娱乐源码
文学小说源码
更多源码
优选教程
pbootcms教程
云优cms教程
Ecshop教程
帝国CMS教程
DedeCMS教程
更多教程
友情链接
大湾区招商
莞商网

客服QQ

ECMSPLUS订阅号

© 2016- 东莞市河马信息技术有限公司 版权所有，并保留所有权利   

备案号:粤ICP备2023002959号 ｜ ｜ 代理域名注册服务机构：成都西维数码科技有限公司 ｜ 服务器服代理：成都西维数码科技有限公司