图片放大镜特效

单图

css部分：

<style>
    #div1 { width: 200px; height: 200px; padding: 5px; border: 1px solid #ccc; position: relative; }
    #div1 .small_pic { width: 200px; height: 200px; background: #eee; position: relative;}
    #div1 .float_layer { width: 50px; height: 50px; border: 1px solid #000; background: #fff; filter: alpha(opacity: 30); opacity: 0.3; position: absolute; top: 0; left: 0; display:none; }
    #div1 .mark {width:100%; height:100%; position:absolute; z-index:2; left:0px; top:0px; background:red; filter:alpha(opacity:0); opacity:0;}
    #div1 .big_pic { position: absolute; top: -1px; left: 215px; width:300px; height:300px; overflow:hidden; border:2px solid #CCC; display:none; }
    #div1 .big_pic img { position:absolute; top: -30px; left: -80px; }

</style>

html部分：

<div id="div1">
    <div class="small_pic" style="  200px; height: 200px;">
        <span class="mark"></span>
        <span class="float_layer"></span>
        <img src="../../../img/gotop.png"/>
    </div>
    <div class="big_pic" style="300px; height:300px;">
        <img src="../../../img/gotop.png"/>
    </div>
</div>

js部分：（此处需要引入jquery.js）

<script>

    function getByClass(oParent,sClass){
        var aBle=oParent.getElementsByTagName('*');
        var aTmp=[];
        var i=0;
        for(i=0;i<aBle.length;i++){
            if(aBle[i].className==sClass){
                aTmp.push(aBle[i])
            }
        }
        return aTmp;
    }

    window.onload=function(){
        var oDiv=document.getElementById('div1');
        var oMark=getByClass(oDiv,'mark')[0];
        var oFloat=getByClass(oDiv,'float_layer')[0];
        var oBig=getByClass(oDiv,'big_pic')[0];
        var oSmall=getByClass(oDiv,'small_pic')[0];
        var oImg=oBig.getElementsByTagName('img')[0];
        oMark.onmouseover=function(){
            oFloat.style.display='block';
            oBig.style.display='block';
        }
        oMark.onmouseout=function(){
            oFloat.style.display='none';
            oBig.style.display='none';

        }
        oMark.onmousemove=function(ev){
            var oEvent=ev||event;
            var l=oEvent.clientX-oDiv.offsetLeft-oSmall.offsetLeft-oFloat.offsetWidth/2;
            var t=oEvent.clientY-oDiv.offsetTop-oSmall.offsetTop-oFloat.offsetHeight/2;
            if(l<1){
                l=1;
            }else if(l>oMark.offsetWidth-oFloat.offsetWidth){
                l=oMark.offsetWidth-oFloat.offsetWidth;
            }
            if(t<1){
                t=1;
            }else if(t>oMark.offsetHeight-oFloat.offsetHeight){
                t=oMark.offsetHeight-oFloat.offsetHeight;
            }
            oFloat.style.left=l+'px';
            oFloat.style.top=t+'px';
            var percentX=l/(oMark.offsetWidth-oFloat.offsetWidth);
            var percentY=t/(oMark.offsetHeight-oFloat.offsetHeight);
            oImg.style.left=-percentX*(oImg.offsetWidth-oBig.offsetWidth)+'px';
            oImg.style.top=-percentY*(oImg.offsetHeight-oBig.offsetHeight)+'px';

        }
    }
</script>

多图

css部分：

<style type="text/css">
    /* reset */
    ul,ol,li,dl{list-style-type:none;}
    em,i,dfn,cite,strong,small{font-style:normal;}
    img{border:0;}
    fieldset,button,input,select,option{vertical-align:middle;font:12px/18px "宋体",arial,sans-serif;}
    table{border-collapse:collapse;border-spacing:0}
    textarea{resize:none}

    /* color */
    a:link,a:visited{color:#575757;text-decoration:none;}
    a:hover{color:#ef4165;text-decoration:none;}
    a:active{color:#1d7400;}

    /* clearfix */
    .clearfix:after{ visibility:hidden; display:block; font-size:0; content:" "; clear:both; height:0;}
    *html .clearfix{ zoom:1;}


    .preview{width:400px; height:465px; margin:50px 0px 0px 150px;}
    /* smallImg */
    .smallImg{position:relative; height:52px; margin-top:1px; background-color:#F1F0F0; padding:6px 5px; width:390px; overflow:hidden;float:left;}
    .scrollbutton{width:14px; height:50px; overflow:hidden; position:relative; float:left; cursor:pointer; }
    .scrollbutton.smallImgUp , .scrollbutton.smallImgUp.disabled{background:url(img/1.jpg) no-repeat;}
    .scrollbutton.smallImgDown , .scrollbutton.smallImgDown.disabled{background:url(img/2.jpg) no-repeat; margin-left:375px; margin-top:-50px;}

    #imageMenu {height:50px; width:360px; overflow:hidden; margin-left:0; float:left;}
    #imageMenu li {height:50px; width:60px; overflow:hidden; float:left; text-align:center;}
    #imageMenu li img{width:50px; height:50px;cursor:pointer;}
    #imageMenu li#onlickImg img, #imageMenu li:hover img{ width:44px; height:44px; border:3px solid #959595;}
    /* bigImg */
    .bigImg{position:relative; float:left; width:400px; height:400px; overflow:hidden;}
    .bigImg #midimg{width:400px; height:400px;}
    .bigImg #winSelector{width:235px; height:210px;}
    #winSelector{position:absolute; cursor:crosshair; filter:alpha(opacity=15); -moz-opacity:0.15; opacity:0.15; background-color:#000; border:1px solid #fff;}
    /* bigView */
    #bigView{position:absolute;border: 1px solid #959595; overflow: hidden; z-index:999;}
    #bigView img{position:absolute;}
</style>

html部分：

<div class="preview">

    <div id="vertical" class="bigImg">
        <img src="mid/05.jpg" width="400" height="400" alt="" id="midimg">
        <div style="display: none;" id="winSelector"></div>
    </div><!--bigImg end-->

    <div class="smallImg">
        <div class="scrollbutton smallImgUp disabled"></div>
        <div id="imageMenu">
            <ul>
                <li id="onlickImg"><img src="../../../../img/1.jpg" width="68" height="68" alt="洋妞"></li>
                <li><img src="../../../../img/2.jpg" width="68" height="68" alt="洋妞"></li>
                <li><img src="../../../../img/3.jpg" width="68" height="68" alt="洋妞"></li>
                <li><img src="../../../../img/1.jpg" width="68" height="68" alt="洋妞"></li>
                <li><img src="../../../../img/2.jpg" width="68" height="68" alt="洋妞"></li>
                <li><img src="../../../../img/3.jpg" width="68" height="68" alt="洋妞"></li>
                <li><img src="../../../../img/1.jpg" width="68" height="68" alt="洋妞"></li>
            </ul>
        </div>
        <div class="scrollbutton smallImgDown"></div>
    </div><!--smallImg end-->

    <div id="bigView" style="display:none;"><img width="800" height="800" alt="" src="../../../../img/1.jpg"></div>

</div>

js部分：（此处需要引入jquery.js）

<script type="text/javascript">
    $(document).ready(function(){
        // 图片上下滚动
        var count = $("#imageMenu li").length - 5; /* 显示 6 个 li标签内容 */
        var interval = $("#imageMenu li:first").width();
        var curIndex = 0;

        $('.scrollbutton').click(function(){
            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"}, 600);
        });

        // 解决 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,
             0,
            height: 0
        }
        //放大镜视窗
        $("#bigView").decorateIframe();

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

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

        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(); //选择器宽度
        var $divHeight = $("#winSelector").height(); //选择器高度
        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 = 800;
                }
                $height = $divHeight * $viewImgHeight / $imgHeight;
                $("#bigView").width($divWidth * $viewImgWidth / $imgWidth);
                $("#bigView").height($height);
            }

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

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

    });
</script>