jquery 商城商品放大镜效果

商城商品放大镜效果
html

<div class="preview fl">         
        <div id="vertical" class="bigImg">
              <img src="image/goods1.jpg" id="midimg">
              <div style="left: 0px; top: 82px; display: none;" id="winSelector"></div>
        </div>              
        <div class="smallImg">
            <div class="scrollbutton smallImgUp disabled"></div>
            <div class="imageMenu" id="imageMenu">
                <ul>
                    <li id="onlickImg"><img src="image/goods1.jpg"></li>
                    <li><img src="image/goods2.jpg"></li>
                    <li><img src="image/goods3.jpg"></li>
                    <li><img src="image/goods4.jpg"></li>
                    <li><img src="image/goods5.jpg"></li>
                    <li><img src="image/goods1.jpg"></li>
                    <li><img src="image/goods2.jpg"></li>
                </ul>
            </div>
            <div class="scrollbutton smallImgDown"></div>
        </div>            
        <div class="bigView" id="bigView" style="display: none; width: 358px; height: 358px; top: 199px; left: 888.5px;"><img width="750" height="850" alt="" src="image/goods1.jpg" style="left: 0px; top: -194.693px;"></div>
</div>

js

 /* 商品详情 图片放大镜 */
            var ali = $("#imageMenu li").length;
            var count = $("#imageMenu li").length - 4; 
               // 显示 N-3 个 li标签内容 
            var interval = $("#imageMenu li:first").width();
            var curIndex = 0;

            $('.scrollbutton').click(function(){
                // li小于6个，不能点击
                if (ali <6) return false;;

                if( $(this).hasClass('disabled') ) return false;

                if ($(this).hasClass('smallImgUp')) --curIndex;
                else ++curIndex;

                $('.scrollbutton').removeClass('disabled');
                if (curIndex == 0) $('.smallImgUp').addClass('disabled');
                if (curIndex == count-1) $('.smallImgDown').addClass('disabled');

                $("#imageMenu ul").stop(false, true).animate({"marginLeft" : -curIndex*interval + "px"}, 400);
            });

               // 解决 ie6 select框 问题
            $.fn.decorateIframe = function(options) {
                if ($.browser.msie && $.browser.version < 7) {
                    var opts = $.extend({}, $.fn.decorateIframe.defaults, options);
                    $(this).each(function() {
                        var $myThis = $(this);
                        //创建一个IFRAME
                        var divIframe = $("<iframe />");
                        divIframe.attr("id", opts.iframeId);
                        divIframe.css("position", "absolute");
                        divIframe.css("display", "none");
                        divIframe.css("display", "block");
                        divIframe.css("z-index", opts.iframeZIndex);
                        divIframe.css("border");
                        divIframe.css("top", "0");
                        divIframe.css("left", "0");
                        if (opts.width == 0) {
                            divIframe.css("width", $myThis.width() + parseInt($myThis.css("padding")) * 2 + "px");
                        }
                        if (opts.height == 0) {
                            divIframe.css("height", $myThis.height() + parseInt($myThis.css("padding")) * 2 + "px");
                        }
                        divIframe.css("filter", "mask(color=#fff)");
                        $myThis.append(divIframe);
                    });
                }
            }
            $.fn.decorateIframe.defaults = {
                iframeId: "decorateIframe1",
                iframeZIndex: -1,
                width: 0,
                height: 0
            }

                // 放大镜视窗
            $("#bigView").decorateIframe();

                // 点击到中图
            var midChangeHandler = null;

            $("#imageMenu li img").live("mouseover", function(){
                if ($(this).attr("id") != "onlickImg") {
                    midChange($(this).attr("src").replace("small", "mid"));
                    $("#imageMenu li").removeAttr("id");
                    $(this).parent().attr("id", "onlickImg");
                }
            }).live("mouseover", function(){
                if ($(this).attr("id") != "onlickImg") {
                    window.clearTimeout(midChangeHandler);
                    midChange($(this).attr("src").replace("small", "mid"));
                    $(this).css({ "border": "2px solid #EE3387" });
                }
            }).live("mouseout", function(){
                if($(this).attr("id") != "onlickImg"){
                    $(this).removeAttr("style");
                    midChangeHandler = window.setTimeout(function(){
                        midChange($("#onlickImg img").attr("src").replace("small", "mid"));
                    }, 6000);
                }
            });

            function midChange(src) {
                $("#midimg").attr("src", src).load(function() {
                    changeViewImg();
                });
            }

                // 大视窗看图
            function mouseover(e) {
                if ($("#winSelector").css("display") == "none") {
                    $("#winSelector,#bigView").show();
                }

                $("#winSelector").css(fixedPosition(e));
                e.stopPropagation();
            }


            function mouseOut(e) {
                if ($("#winSelector").css("display") != "none") {
                    $("#winSelector,#bigView").hide();
                }
                e.stopPropagation();
            }


            $("#midimg").mouseover(mouseover); //中图事件
            $("#midimg,#winSelector").mousemove(mouseover).mouseout(mouseOut); //选择器事件

            var $divWidth = $("#winSelector").width()+2; //选择器宽度
            var $divHeight = $("#winSelector").height()+2; //选择器高度
            // 2是选择器的border，上下左右各1px
            var $imgWidth = $("#midimg").width(); //中图宽度
            var $imgHeight = $("#midimg").height(); //中图高度
            var $viewImgWidth = $viewImgHeight = $height = null; 
            //IE加载后才能得到 大图宽度 大图高度 大图视窗高度

            function changeViewImg() {
                $("#bigView img").attr("src", $("#midimg").attr("src").replace("mid", "big"));
            }

            changeViewImg();

            $("#bigView").scrollLeft(0).scrollTop(0);
            function fixedPosition(e) {
                if (e == null) {
                    return;
                }
                var $imgLeft = $("#midimg").offset().left; //中图左边距
                var $imgTop = $("#midimg").offset().top; //中图上边距
                X = e.pageX - $imgLeft - $divWidth / 2; //selector顶点坐标 X
                Y = e.pageY - $imgTop - $divHeight / 2; //selector顶点坐标 Y
                X = X < 0 ? 0 : X;
                Y = Y < 0 ? 0 : Y;
                X = X + $divWidth > $imgWidth ? $imgWidth - $divWidth : X;
                Y = Y + $divHeight > $imgHeight ? $imgHeight - $divHeight : Y;

                if ($viewImgWidth == null) {
                    $viewImgWidth = $("#bigView img").outerWidth();
                    $viewImgHeight = $("#bigView img").height();
                    if ($viewImgWidth < 200 || $viewImgHeight < 200) {
                        $viewImgWidth = $viewImgHeight = 850;
                    }
                    $height = $divHeight * $viewImgHeight / $imgHeight;
                    // $("#bigView").width($divWidth * $viewImgWidth / $imgWidth);
                    // $("#bigView").height($height);

                     $("#bigView").width(358);
                    $("#bigView").height(358);
                }

                var scrollX = X * $viewImgWidth / $imgWidth;
                var scrollY = Y * $viewImgHeight / $imgHeight;
                $("#bigView img").css({ "left": scrollX * -1, "top": scrollY * -1 });
                $("#bigView").css({ "top": $(".preview").offset().top, "left": $(".preview").offset().left + $(".preview").width() + 15 });

                return { left: X, top: Y };
            }