jQuery 放大镜（面向过程）

来源：互联网发布：网络舆情汇报编辑：程序博客网时间：2024/04/30 17:11
<head>    <meta charset="UTF-8" />    <title>Document</title>    <style type="text/css">        html {            padding: 100px;        }        /*中等图片*/        #middle {            display: inline-block;            min-width: 400px;            height: 400px;            border: 1px solid #000000;            text-align: center;            position: relative;        }        #middle img {            height: 100%;        }        /*放大窗口(大图片放大镜)*/        #show {            display: none;            position: absolute;            overflow: hidden;            border: 1px solid #000000;        }        /*中等图片放大镜*/        #magnifier {            display: none;            background: #0000FF;            filter: alpha(opacity=50);            opacity: 0.5;            position: absolute;            cursor: move;        }    </style>    <script src="js/jquery-1.12.0.js" type="text/javascript" charset="utf-8"></script>    <script type="text/javascript">        //核心：就是2张图片（中等图片和大图片），2个放大镜（中等图片放大镜和大图片显示窗口）        //【由中等图片放大镜的left值和top值得到大图片放大镜的left值和top值】        //left值和top值        //      1、取得【中等图片放大镜】的position().left和position().top        //      2、计算大图片的宽度（高度）与中等图片的宽度（高度）的比例        //      3、【大图片放大镜】的left：【中等图片放大镜】的position().left * 宽度比        //            【大图片放大镜】的top：【中等图片放大镜】的position().top * 高度比        //【由大图片放大镜的宽度和高度得到中等图片放大镜的宽度和高度】        //放大镜的宽度和高度        //      1、先定大图片放大镜（也就是大图片的显示窗口）的高度=宽度=中等图片的高度        //      2、计算大图片的宽度（高度）与大图片放大镜的宽度（高度）的比例        //      3、中等图片放大镜的宽度：中等图片的宽度/宽度比        //            中等图片放大镜的高度：中等图片的高度/高度比        $(function() {            //中等图片放大镜            var $magnifier = $("#magnifier");            //中等图片展示窗口            var $middle = $("#middle");            //中等图片展示窗口的高度            var middleHeight=$middle.innerHeight();            //获取中等图片展示窗口相对于html的位置            var xMiddle = $middle.offset().left;            var yMiddle = $middle.offset().top;            //中等图片            var $middleImg = $middle.find("img");            //大张图片放大镜(显示窗口)            var $show = $("#show");            //大张图片放大镜(显示窗口)的宽度和高度            var showSize=middleHeight;            //大张图片            var $showImg = $show.find("img");            //图片路径数组            var arrMiddleImgSrc=["images/5.jpg","images/xx.jpg"];            var arrShowImgSrc=["images/5-300.jpg","images/xx300.jpg"];            //小图片            var $smallImg=$("#small img");            //给每个小图片绑定函数，点击小图片切换到相应的中等图片和大图片            $smallImg.each(function (idx,small) {                $(this).on("click",function () {                    $middleImg.attr("src",arrMiddleImgSrc[idx]);                    $showImg.attr("src",arrShowImgSrc[idx]);                })            })            $middle.on("mouseover", function() {                //显示中等图片放大镜                $magnifier.show();                //显示大张图片放大镜(show窗口)                $show.show();                //设置大图片放大镜在页面位置和宽高                $show.css({                        position: "absolute",                        left: xMiddle + $middle.outerWidth() + 20,                        top: yMiddle,                        width: showSize,                        height: showSize                    })                    //大张图片的宽度和高度                $showImg = $show.find("img");                var showImgWidth = $showImg.outerWidth();                var showImgHeight = $showImg.outerHeight();                //计算大图片宽度与大图片放大镜宽度的比例                var xx = showImgWidth / showSize;                //计算大图片高度与大图片放大镜高度的比例                var yy = showImgHeight / showSize;                //中等图片的宽度和高度                var middleImgWidth = $middleImg.outerWidth();                var middleImgHeight = $middleImg.outerHeight();                //设置中等图片放大镜的宽高                $magnifier.css({                        width: middleImgWidth / xx,                        height: middleImgHeight / yy                    })                    //获得放大镜的宽度/2                var iWidth = $magnifier.outerWidth() / 2;                //获得放大镜的高度/2                var iHeight = $magnifier.outerHeight() / 2;                //top值的底部边界                var top_bottom = $middle.innerHeight() - $magnifier.outerWidth();                //left值的右侧边界                var left_right = $middle.innerWidth() - $magnifier.outerWidth();                //移动放大镜                $(document).on("mousemove", function(e) {                        //获取放大镜相对于中等图片显示窗口的位置                        var xMagnifier = $magnifier.position().left;                        var yMagnifier = $magnifier.position().top;                        //计算left值和top值的放大比例                        var xScale = showImgWidth / middleImgWidth;                        var yScale = showImgHeight / middleImgHeight;                        //计算大图片的left值和top值                        var x = xMagnifier * xScale;                        var y = yMagnifier * yScale;                        //设置大图片的left值和top值                        $showImg.css({                            position: "absolute",                            left: -x,                            top: -y                        });                        //计算鼠标在中等图片中的位置                        var iLeft = e.clientX - xMiddle - iWidth;                        // iTop要考虑滚动条的情况                        var iTop = e.clientY - yMiddle - iHeight + $(window).scrollTop();                        //根据鼠标在中等图片中的位置，设置中等图片放大镜的位置                        //第1种情况：中等图片放大镜在四个顶角上                        //左上角                        if(iLeft <= 0 && iTop <= 0) {                            $magnifier.css({                                left: 0,                                top: 0                            })                        }                        //左下角                        else if(iLeft <= 0 && iTop >= top_bottom) {                            $magnifier.css({                                left: 0,                                top: top_bottom                            })                        }                        //右上角                        else if(iLeft >= left_right && iTop <= 0) {                            $magnifier.css({                                left: left_right,                                top: 0                            })                        }                        //右下角                        else if(iLeft >= left_right && iTop >= top_bottom) {                            $magnifier.css({                                left: left_right,                                top: top_bottom                            })                        }                        //第2种情况：中等图片放大镜不在4个顶角上，但超出边界                        //左边界                        else if(iLeft <= 0) {                            $magnifier.css({                                left: 0,                                top: e.clientY - yMiddle - iHeight + $(window).scrollTop()                            })                        }                        //右边界                        else if(iLeft >= left_right) {                            $magnifier.css({                                left: left_right,                                top: e.clientY - yMiddle - iHeight + $(window).scrollTop()                            })                        }                        //上边界                        else if(iTop <= 0) {                            $magnifier.css({                                left: e.clientX - xMiddle - iWidth,                                top: 0                            })                        }                        //下边界                        else if(iTop >= top_bottom) {                            $magnifier.css({                                left: e.clientX - xMiddle - iWidth,                                top: top_bottom                            })                        }                        //第3种情况：中等图片放大镜不在顶角上，也没有超出边界                        else {                            $magnifier.css({                                left: e.clientX - xMiddle - iWidth,                                top: e.clientY - yMiddle - iHeight + $(window).scrollTop()                            })                        }                    })                    //鼠标移出中等图片区域                    //1、取消mouseover事件，                    //2、将放大镜和show窗口隐藏                $middle.on("mouseout", function() {                    $(document).off("mousemove");                    //隐藏放大窗口                    $magnifier.hide();                    //隐藏show窗口                    $show.hide();                })            })        })    </script></head><body>        <div id="middle">            <img src="images/5.jpg" />            <div id="magnifier"></div>        </div>    <div id="small">        <img src="images/5-10.jpg" />        <img src="images/xx10.jpg" />    </div>    <div id="show">        <img src="images/5-300.jpg" />    </div></body>
0 0