商城商品放大镜 JS 基于JQUERY

(function($){
InitDOM = function(){
    var option = arguments[0];
    var baseHtml= "";
    var default_pic = '<img src="'+option.items[0].levelD+'" jqimg="'+option.items[0].levelD+'" height="'+option.levelBSize[0]+'" width="'+option.levelBSize[1]+'"/>';
        for(var s=0;s<option.items.length;s++){
            baseHtml+='<li><img src='+option.items[s].levelA+' width= "'+option.levelASize[0]+'" height="'+option.levelASize[1]+ '" alt= "'+ (option.items[s].title==""?'NoPIC':option.items[s].title) + '"/></li>';
        }
    var DOM_INNER_HTML = '<div id="preview">'+
    '<div class="jqzoom" id="spec-n1">'+default_pic+'</div>'+
    '<div id=spec-n5>'+
        '<div class=control id=spec-left></div>'+
    '<div id=spec-list>'+
    '<ul class=list-h>'+baseHtml+'</ul>'+
    '</div>'+
    '<div class="control" id="spec-right"></div>'+
    '</div>'+
    '</div>';
  return DOM_INNER_HTML;
};

MouseEvent=function(e) {
    this.x = e.pageX;
    this.y = e.pageY;
};
$.fn.scale = function(options){
    //默认选项
    if(options=='undefined'){
        var opts ={
            alignMaxWidth:screen.width,
            alignMaxHeight:screen.height,
            maxWidth:1000,
            maxHeight:1000,
            minWidth:720,
            minHeight:720,
            tempStep:50,
            scale:0.8
        };    
    }else{
        var opts = options;
    }

    $(this).mousewheel(function(event, delta, deltaX, deltaY) {
                    var scale_X = $(this).width();
                    var scale_Y = $(this).height();
                    var minHeight = opts.minHeight;   // min height
                    var minWidth  = opts.minWidth;
                    var maxHeight = opts.maxHeight;
                    var maxWidth  = opts.maxWidth;
                    var tempStep  = opts.tempStep;    // evey step for scroll down or up  
                    var sc = opts.scale;
                    if(delta>0 && (scale_X<=maxWidth || scale_Y<=maxHeight)){
                          scale_Y = scale_Y+tempStep>maxHeight?maxHeight:scale_Y+tempStep*opts.scale;
                          scale_X = scale_X+tempStep>maxWidth?maxWidth:scale_X+tempStep*opts.scale;
                          $(this).height(scale_Y);
                          $(this).width(scale_X);
                    }else if(delta<0 && ((scale_X>=minWidth || scale_Y>=minHeight))){
                          scale_Y = scale_Y-tempStep<minHeight?minHeight:scale_Y-tempStep*opts.scale;
                          scale_X = scale_X-tempStep<minWidth?minWidth:scale_X-tempStep*opts.scale;
                          $(this).height(scale_Y);
                          $(this).width(scale_X);
                    }
                    window.console.log('sc='+sc + 'maxWidth='+maxWidth+'maxHeight='+maxHeight+'minWidth='+minWidth+'minHeight='+minHeight+'\r\n'+'current_Width='+ scale_X + 'current_Height='+scale_Y);
                    var scTop = ((opts.alignMaxHeight-scale_Y) /2);
                    var scLeft =((opts.alignMaxWidth-scale_X) /2);
                    $(this).css("margin",function(){
                        return scTop + "px" + ' ' + scLeft + "px";
                    });
                    /*阻止冒泡事件和默认浏览器行为*/
                    event.preventDefault(); 
                    event.stopPropagation();
      });    

};
$.fn.jqueryzoom = function(options) {
        var settings = {
            xzoom: 200,
            yzoom: 200,
            offset: 10,
            position: "right",
            lens: 1,
            preload: 1
        };
        if (options) {
            $.extend(settings, options);
        }
        var noalt = '';
        $(this).hover(function() {
            //原始脚本中实用同一个变量导致放大镜层漂移，重新定义变量取值。
            var ll=$(this).offset().left;
            var tt=$(this).offset().top;
            var imageLeft = 0;
            var imageTop = 0;
            var imageWidth = $(this).children('img').get(0).offsetWidth;
            var imageHeight = $(this).children('img').get(0).offsetHeight;
            noalt = $(this).children("img").attr("alt");
            var bigimage = $(this).children("img").attr("jqimg");
            $(this).children("img").attr("alt", '');
            if ($("div.zoomdiv").get().length == 0) {
                $(this).after("<div class='zoomdiv'><img class='bigimg' src='" + bigimage + "'/></div>");
                $(this).append("<div class='jqZoomPup'>&nbsp;</div>");
            }
            if (settings.position == "right") {
                if (imageLeft + imageWidth + settings.offset + settings.xzoom > screen.width) {
                    leftpos = imageLeft - settings.offset - settings.xzoom;
                } else {
                    leftpos = imageLeft + imageWidth + settings.offset;
                }
            } else {
                leftpos = imageLeft - settings.xzoom - settings.offset;
                if (leftpos < 0) {
                    leftpos = imageLeft + imageWidth + settings.offset;
                }
            }
            $("div.zoomdiv").css({
                top: imageTop,
                left: leftpos,
                display:"inline-block",
            });
            $("div.zoomdiv").width(settings.xzoom);
            $("div.zoomdiv").height(settings.yzoom);
            $("div.zoomdiv").show();
            if (!settings.lens) {
                $(this).css('cursor', 'crosshair');
            }
            $(document.body).mousemove(function(e) {
                mouse = new MouseEvent(e);
                var bigwidth = $(".bigimg").get(0).offsetWidth;
                var bigheight = $(".bigimg").get(0).offsetHeight;
                var scaley = 'x';
                var scalex = 'y';
                if (isNaN(scalex) | isNaN(scaley)) {
                    var scalex = (bigwidth / imageWidth);
                    var scaley = (bigheight / imageHeight);
                    $("div.jqZoomPup").width((settings.xzoom) / (scalex * 1));
                    $("div.jqZoomPup").height((settings.yzoom) / (scaley * 1));
                    if (settings.lens) {
                        $("div.jqZoomPup").css('visibility', 'visible');
                    }
                }
                xpos = mouse.x - $("div.jqZoomPup").width() / 2 - ll;
                ypos = mouse.y - $("div.jqZoomPup").height() / 2 - tt;
                if (settings.lens) {
                    xpos = (mouse.x - $("div.jqZoomPup").width() / 2 < ll) ? 0 : (mouse.x + $("div.jqZoomPup").width() / 2 > imageWidth + ll) ? (imageWidth - $("div.jqZoomPup").width() - 2) : xpos;
                    ypos = (mouse.y - $("div.jqZoomPup").height() / 2 < tt) ? 0 : (mouse.y + $("div.jqZoomPup").height() / 2 > imageHeight + tt) ? (imageHeight - $("div.jqZoomPup").height() - 2) : ypos;
                }
                //console.log(ypos+ "<--y|x-->"+xpos);
                if (settings.lens) {
                    $("div.jqZoomPup").css({
                        top: ypos,
                        left: xpos
                    });
                }
                scrolly = ypos;
                $("div.zoomdiv").get(0).scrollTop = scrolly * scaley;
                scrollx = xpos;
                $("div.zoomdiv").get(0).scrollLeft = (scrollx) * scalex;
            });
        }, function() {
            $(this).children("img").attr("alt", noalt);
            $(document.body).unbind("mousemove");
            if (settings.lens) {
                $("div.jqZoomPup").remove();
            }
            $("div.zoomdiv").remove();
        });
        count = 0;
        if (settings.preload) {

            $(this).each(function() {
                var imagetopreload = $(this).children("img").attr("jqimg");
                var content = jQuery('div.jqPreload' + count + '').html();
                jQuery('div.jqPreload' + count + '').html(content + '<img src=\"' + imagetopreload + '\">');
            });
        }
    };
$.fn.jdMarquee = function(option, callback){
        if(typeof option == "function") {
            callback = option;
            option = {};
        };
        var s = $.extend({
            deriction: "up",
            speed: 10,
            auto: false,
            width: null,
            height: null,
            step: 1,
            control: false,
            _front: null,
            _back: null,
            _stop: null,
            _continue: null,
            wrapstyle: "",
            stay: 5000,
            delay: 20,
            dom: "div>ul>li".split(">"),
            mainTimer: null,
            subTimer: null,
            tag: false,
            convert: false,
            btn: null,
            disabled: "disabled",
            pos: {
                ojbect: null,
                clone: null
            }
        }, option || {});
        var object = this.find(s.dom[1]);
        var subObject = this.find(s.dom[2]);
        var clone;
        if (s.deriction == "up" || s.deriction == "down") {
            var height = object.eq(0).outerHeight();
            var step = s.step * subObject.eq(0).outerHeight();
            object.css({
                width: s.width + "px",
                overflow: "hidden"
            });
        };
        if (s.deriction == "left" || s.deriction == "right") {
            var width = subObject.length * subObject.eq(0).outerWidth();
            object.css({
                width: width + "px",
                overflow: "hidden"
            });
            var step = s.step * subObject.eq(0).outerWidth();
        };
        var init = function() {
            var wrap = "<div style='position:relative;overflow:hidden;z-index:1;width:" + s.width + "px;height:" + s.height + "px;" + s.wrapstyle + "'></div>";
            object.css({
                position: "absolute",
                left: 0,
                top: 0
            }).wrap(wrap);
            s.pos.object = 0;
            clone = object.clone();
            object.after(clone);
            switch (s.deriction) {
                default:
                case "up":
                    object.css({
                        marginLeft: 0,
                        marginTop: 0
                    });
                    clone.css({
                        marginLeft: 0,
                        marginTop: height + "px"
                    });
                    s.pos.clone = height;
                    break;
                case "down":
                    object.css({
                        marginLeft: 0,
                        marginTop: 0
                    });
                    clone.css({
                        marginLeft: 0,
                        marginTop: -height + "px"
                    });
                    s.pos.clone = -height;
                    break;
                case "left":
                    object.css({
                        marginTop: 0,
                        marginLeft: 0
                    });
                    clone.css({
                        marginTop: 0,
                        marginLeft: width + "px"
                    });
                    s.pos.clone = width;
                    break;
                case "right":
                    object.css({
                        marginTop: 0,
                        marginLeft: 0
                    });
                    clone.css({
                        marginTop: 0,
                        marginLeft: -width + "px"
                    });
                    s.pos.clone = -width;
                    break;
            };
            if (s.auto) {
                initMainTimer();
                object.hover(function() {
                    clear(s.mainTimer);
                }, function() {
                    initMainTimer();
                });
                clone.hover(function() {
                    clear(s.mainTimer);
                }, function() {
                    initMainTimer();
                });
            };
            if (callback) {
                callback();
            };
            if (s.control) {
                initControls();
            }
        };
        var initMainTimer = function(delay) {
            clear(s.mainTimer);
            s.stay = delay ? delay : s.stay;
            s.mainTimer = setInterval(function() {
                initSubTimer()
            }, s.stay);
        };
        var initSubTimer = function() {
            clear(s.subTimer);
            s.subTimer = setInterval(function() {
                roll()
            }, s.delay);
        };
        var clear = function(timer) {
            if (timer != null) {
                clearInterval(timer);
            }
        };
        var disControl = function(A) {
            if (A) {
                $(s._front).unbind("click");
                $(s._back).unbind("click");
                $(s._stop).unbind("click");
                $(s._continue).unbind("click");
            } else {
                initControls();
            }
        };
        var initControls = function() {
            if (s._front != null) {
                $(s._front).click(function() {
                    $(s._front).addClass(s.disabled);
                    disControl(true);
                    clear(s.mainTimer);
                    s.convert = true;
                    s.btn = "front";
                    if (!s.auto) {
                        s.tag = true;
                    };
                    convert();
                });
            };
            if (s._back != null) {
                $(s._back).click(function() {
                    $(s._back).addClass(s.disabled);
                    disControl(true);
                    clear(s.mainTimer);
                    s.convert = true;
                    s.btn = "back";
                    if (!s.auto) {
                        s.tag = true;
                    };
                    convert();
                });
            };
            if (s._stop != null) {
                $(s._stop).click(function() {
                    clear(s.mainTimer);
                });
            };
            if (s._continue != null) {
                $(s._continue).click(function() {
                    initMainTimer();
                });
            }
        };
        var convert = function() {
            if (s.tag && s.convert) {
                s.convert = false;
                if (s.btn == "front") {
                    if (s.deriction == "down") {
                        s.deriction = "up";
                    };
                    if (s.deriction == "right") {
                        s.deriction = "left";
                    }
                };
                if (s.btn == "back") {
                    if (s.deriction == "up") {
                        s.deriction = "down";
                    };
                    if (s.deriction == "left") {
                        s.deriction = "right";
                    }
                };
                if (s.auto) {
                    initMainTimer();
                } else {
                    initMainTimer(4 * s.delay);
                }
            }
        };
        var setPos = function(y1, y2, x) {
            if (x) {
                clear(s.subTimer);
                s.pos.object = y1;
                s.pos.clone = y2;
                s.tag = true;
            } else {
                s.tag = false;
            }; if (s.tag) {
                if (s.convert) {
                    convert();
                } else {
                    if (!s.auto) {
                        clear(s.mainTimer);
                    }
                }
            };
            if (s.deriction == "up" || s.deriction == "down") {
                object.css({
                    marginTop: y1 + "px"
                });
                clone.css({
                    marginTop: y2 + "px"
                });
            };
            if (s.deriction == "left" || s.deriction == "right") {
                object.css({
                    marginLeft: y1 + "px"
                });
                clone.css({
                    marginLeft: y2 + "px"
                });
            }
        };
        var roll = function() {
            var y_object = (s.deriction == "up" || s.deriction == "down") ? parseInt(object.get(0).style.marginTop) : parseInt(object.get(0).style.marginLeft);
            var y_clone = (s.deriction == "up" || s.deriction == "down") ? parseInt(clone.get(0).style.marginTop) : parseInt(clone.get(0).style.marginLeft);
            var y_add = Math.max(Math.abs(y_object - s.pos.object), Math.abs(y_clone - s.pos.clone));
            var y_ceil = Math.ceil((step - y_add) / s.speed);
            switch (s.deriction) {
                case "up":
                    if (y_add == step) {
                        setPos(y_object, y_clone, true);
                        $(s._front).removeClass(s.disabled);
                        disControl(false);
                    } else {
                        if (y_object <= -height) {
                            y_object = y_clone + height;
                            s.pos.object = y_object;
                        };
                        if (y_clone <= -height) {
                            y_clone = y_object + height;
                            s.pos.clone = y_clone;
                        };
                        setPos((y_object - y_ceil), (y_clone - y_ceil));
                    };
                    break;
                case "down":
                    if (y_add == step) {
                        setPos(y_object, y_clone, true);
                        $(s._back).removeClass(s.disabled);
                        disControl(false);
                    } else {
                        if (y_object >= height) {
                            y_object = y_clone - height;
                            s.pos.object = y_object;
                        };
                        if (y_clone >= height) {
                            y_clone = y_object - height;
                            s.pos.clone = y_clone;
                        };
                        setPos((y_object + y_ceil), (y_clone + y_ceil));
                    };
                    break;
                case "left":
                    if (y_add == step) {
                        setPos(y_object, y_clone, true);
                        $(s._front).removeClass(s.disabled);
                        disControl(false);
                    } else {
                        if (y_object <= -width) {
                            y_object = y_clone + width;
                            s.pos.object = y_object;
                        };
                        if (y_clone <= -width) {
                            y_clone = y_object + width;
                            s.pos.clone = y_clone;
                        };
                        setPos((y_object - y_ceil), (y_clone - y_ceil));
                    };
                    break;
                case "right":
                    if (y_add == step) {
                        setPos(y_object, y_clone, true);
                        $(s._back).removeClass(s.disabled);
                        disControl(false);
                    } else {
                        if (y_object >= width) {
                            y_object = y_clone - width;
                            s.pos.object = y_object;
                        };
                        if (y_clone >= width) {
                            y_clone = y_object - width;
                            s.pos.clone = y_clone;
                        };
                        setPos((y_object + y_ceil), (y_clone + y_ceil));
                    };
                    break;
            }
        };
        if (s.deriction == "up" || s.deriction == "down") {
            if (height >= s.height && height >= s.step) {
                init();
            }
        };
        if (s.deriction == "left" || s.deriction == "right") {
            if (width >= s.width && width >= s.step) {
                init();
            }
        }
    };

})(jQuery);