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

ECMSPLUS | 2021-08-19 |

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

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

对比列表

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

对比结果 列表模板

Uu9ECMSPLUS

JS

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

免责/版权声明:

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

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

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

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

5、未经 ECMSPLUS/ecmsplus.com允许,不得盗链、盗用本站资源;不得复制或仿造本网站,不得在非 ECMSPLUS/ecmsplus.com所属的服务器上建立镜像, ECMSPLUS/ecmsplus.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获取和系统模板

最新文章

热门标签

关注我们

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

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

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

垂询热线:18680688182

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