产品对比插件

$.fn.comparison = function (options) {
    var defaults = {
        coparison: $('<div></div>').attr({ 'class': 'compCon', 'id': 'comparisonCon' }),
        hideDivBtn: $('<a></a>').attr({ 'class': 'hideDivBtn', 'href': 'javascript:void(0);' }).text('隐藏'),
        selectedplan: $('<ul></ul>').attr({ 'id': 'selectedplan' }),
        clearLink: $('<a></a>').attr({ 'class': 'buttonLink', 'href': 'javascript:void(0);' }).text('清空'),
        compLink: $('<a></a>').attr({ 'class': 'buttonLink', 'href': 'javascript:void(0);' }).text('对比')
    }
    var opts = $.extend(defaults, options);
    

    opts.coparison.append(opts.hideDivBtn, opts.selectedplan, opts.selectedplan, opts.clearLink, opts.compLink);
//显示对比窗口
    function toShow() {
        opts.coparison.show().animate({
            "right": 0
        }, 300, function () {
            if (opts.selectedplan.html()) {
                opts.selectedplan.slideDown(300);
            }
        });
    }
//隐藏对比窗口
    function toHide() {
        if (opts.selectedplan.html()) {
            opts.selectedplan.slideUp(300, function () {
                opts.coparison.animate({
                    "right": -150
                }, 300, function () {
                    opts.coparison.hide();
                });
            });
        } else {
            opts.coparison.animate({
                "right": -150
            }, 300, function () {
                opts.coparison.hide();
            });
        };

    }
//清空对比项目
    function clearAllItems() {
        opts.selectedplan.slideUp(300, function () {
            opts.selectedplan.empty();
            $(".selected").addClass('un_select').removeClass('selected');
            toHide();
        });

    }
//删除对应对比产品
    function delItem(obj) {
        
        $(obj).closest("li").slideUp(300, function () {
            $(obj).closest("li").remove();
            if (!opts.selectedplan.html())
                toHide();
        });
        var id = $(obj).parent().attr("id");
        id = id.substr(2, id.length);
        $("#" + id).addClass('un_select').removeClass('selected');

    }
//获取产品信息
    function actionplan(obj) {
        var othis = $(obj);
        if ($(document.body).find(opts.coparison.attr('id'))) {
                $(document.body).append(opts.coparison);
            }
            var itemPicHtml = othis.closest("li").find("img").eq(0).closest("a");
            var itemName = othis.closest("li").find("h2,h3,h4,h5").children();
            var itemId = othis.attr('id');

            addCompItems(itemPicHtml, itemName, itemId);
        

    }
//添加产品到对比列表
    function addCompItems(itemPicHtml, itemName, itemId) {
        if (!opts.coparison.is(":animated")) {
            if (!$("#" + itemId).hasClass('selected')) {
                if (opts.selectedplan.children('li').length > 3) {
                    alert("最多支持四个产品的对比！");
                    return false;
                } else {
                    if (!opts.selectedplan.children('li').is(":animated")) {
                        var selectedItems = $('<li></li>').attr({ 'id': 'li' + itemId }).hide();
                        var selectTtemPic = $('<div></div>').attr({ 'class': 'selectTtemPic' }).append(itemPicHtml.clone());
                        var selectTtemName = $('<h2></h2>').append(itemName.clone());
                        var valInput = $('<input></input>').attr({ 'type': 'hidden' }).val(itemId);
                        var closeBtn = $('<span></span>').attr({ 'class': 'close' }).click(function () {
                            delItem(this);
                        });
                        opts.selectedplan.append(selectedItems.append(selectTtemPic, selectTtemName, valInput, closeBtn));

                        $("#" + itemId).attr("class", "selected");
                        if (opts.coparison.is(':hidden')) {
                            opts.coparison.show().animate({
                                "right": 0
                            }, 300, function () {
                                if (opts.selectedplan.is(":hidden")) {
                                    opts.selectedplan.find('li:hidden').show().end().slideDown(300);
                                } else
                                    opts.selectedplan.find('li:hidden').slideDown(300);
                            });
                        } else
                            opts.selectedplan.find('li:hidden').slideDown(300);
                    } else
                        opts.selectedplan.find('li:hidden').slideDown(300);
                }
            } else {
                if (opts.coparison.is(':hidden')) {
                    $("#li" + itemId).remove();
                    toShow();
                    if (!opts.selectedplan.html())
                        toHide();
                }
                $("#li" + itemId).slideUp(300, function () {
                    $("#li" + itemId).remove();
                    if (!opts.selectedplan.html())
                        toHide();
                });
                $("#" + itemId).attr("class", "un_select");
            }
        }
    }
//开始对比
    function goToComp() {
        if (true) {
            if (opts.selectedplan.children("li").length < 2) {
                alert('对比需要两个以上产品，请选择');
            }
            else {
                var comStr = 'products=';
                opts.selectedplan.children("li").each(function () {
                    comStr += $(this).closest('li').find('input').val()+'_';
                });
                alert(comStr);
            }
        }
    }
//声明按添加对比钮点击时间（就是调用此脚本的那个按钮点击事件）
    this.click(function () {
        actionplan(this);
    });
//清楚按钮 绑定事件
    opts.clearLink.click(function () {
        clearAllItems();
    });
//隐藏按钮 绑定事件
    opts.hideDivBtn.click(function () {
        toHide();
    });
//对比按钮 绑定事件
    opts.compLink.click(function () {
        goToComp();
    });
//返回this，为了方便jquery链式操作
    return this;

}

再附上对比列表区的css代码

#comparisonCon { background: #E94D3A; top: 50%; margin-top: -256px; position: fixed; width: 80px; right: -82px; z-index: 100; padding: 2px; display: none; text-align: center; }
.hideDivBtn { display: block; background: #E94D3A; color: #fff; text-align: center; cursor: pointer; }
.hideDivBtn:hover { background: #d83c29; }

#selectedplan { margin: 0 auto; display: block; overflow: hidden; zoom: 1; list-style: none; }
#selectedplan li { padding: 5px 0; border-bottom: 1px dotted #e2e2e2; background: #fff; display: block; position: relative; }
#selectedplan li span.close { display: block; background: url(../images/productList/close.gif) center center no-repeat #fff; color: #E94D3A; height: 7px; width: 7px; text-align: center; padding: 1px; position: absolute; right: 2px; top: 2px; cursor: pointer; border: 1px solid #E94D3A; }
#selectedplan li span.close:hover { background: url(../images/productList/close_hover.gif) center center no-repeat #E94D3A; color: #fff; }
#selectedplan .selectTtemPic { margin: 0 auto; text-align: center; height: 70px; width: 70px; line-height: 70px; *display: block; *font-size: 59px; /*约为高度的0.873，200*0.873 约为175*/ *font-family: Arial; /*防止非utf-8引起的hack失效问题，如gbk编码*/ overflow: hidden; text-align: center; }
#selectedplan .selectTtemPic a { display: block; }
#selectedplan .selectTtemPic a:after { content: "."; font-size: 1px; visibility: hidden; }
#selectedplan .selectTtemPic a img { position: static; ＋position: relative; top: -50%; left: -50%; max-height: 70px; max-width: 70px; vertical-align: middle; }

#selectedplan h2 { text-align: left; }
#selectedplan h2 a { color: #09F; text-decoration: none; display: block; line-height: 18px; font-size: 12px; font-weight: normal; height: 36px; padding: 0 5px; overflow: hidden; text-overflow: ellipsis; }

.productl_duibi a.un_select, .productl_duibi a.selected { height: 22px; width: 80px; color: #999; border: 1px solid #e2e2e2; line-height: 22px; text-align: center; cursor: pointer; }
.productl_duibi a.un_select:hover { color: #E94D3A; border-color: #E94D3A; }
.productl_duibi a.selected { color: #FFF; background: #E94D3A; border-color: #E94D3A; }
.clearAllItems { height: 25px; line-height: 25px; text-align: center; display: block; margin: 5px auto; background: #666; color: #fff; cursor: pointer; }
.clearAllItems:hover { background: #333; }
.buttonLink { display: inline-block; _zoom: 1; *display: inline; color: #fff; text-align: center; width: 35px; text-decoration: none; margin: 5px 0; }
.buttonLink:hover { background: #d83c29; text-decoration: none; }
.buttonLink:active { background: #fa5e4b; }