图片局部放大交互实现-优快云博客

本文链接：https://blog.youkuaiyun.com/tianyazjq/article/details/83423958

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>图片局部放大</title>
        <style>
            body {
                font-size: 12px;
            } #origin {
                float: left;
                width: 400px;
                height: 300px;
                margin-right: 16px;
                overflow: hidden;
                cursor: url(point.ico), auto;
            } #origin img {
                display: block;
            } #zoom {
                float: left;
                width: 400px;
                height: 300px;
                overflow: hidden;
                border: 1px solid #ccc;
                display: none;
            } #detail {
                float: left;
                width: 400px;
                height: 300px;
                overflow: hidden;
                border: 1px solid #ccc;
            }
        </style>
    </head>
    <body>
        <div id="origin">
            <img src="win7.jpg" id="srcImg" />
        </div>
        <div id="zoom">
            <img id="zoomImg" />
        </div>
        <div id="detail">
            详细说明
        </div>
        <script type="text/javascript" src="jquery-1.3.1.js">
        </script>
        <script type="text/javascript">
            $(document).ready(function(){
                //获取两个图片对象
                var oImg = $('#srcImg');
                var nImg = $('#zoomImg');

                //获取原始图片的宽,高以及宽/高比
                var oW = oImg.width();
                var oH = oImg.height();
                var bal = oW / oH;

                //获取图片展示区的宽度和高度
                var originW = $('#origin').width();
                var originH = $('#origin').height();
                //console.log(originW);

                //获取将被缩小的系数zoomRate
                if (bal >= 4 / 3 && oW > originW) { //如果图片比较宽并且过界的话
                    var zoomRate = oW / originW;
                    //originW展示区图片区域;
                    //oImg为原来的那个显示区域；
                    oImg.width(originW);
                    //console.log(oImg.width(originW).attr("width"));
                    oImg.height(originW / bal);
                    //console.log(originW / bal);
                    //console.log(oImg.height(originW / bal).attr("height"));
                    // oImg.show();
                }
                else 
                    if (oH > originH) { //如果图片比较高并且过界
                        var zoomRate = oH / originH;
                        oImg.height(originH);
                        oImg.width(originH * bal);
                    //oImg.show();
                    }
                    else {
                        // oImg.show();
                        $('#origin').css('cursor', 'default');
                        return
                    }
                //设置放大图片的url地址
                nImg.attr('src', oImg.attr('src'));

                //获取原始图片的位置
                var oPos = oImg.offset();
                // console.log(oPos);
                var w = oImg.width() / zoomRate / 2;

                var h = oImg.height() / zoomRate / 2;
                /*
                 console.info(w);
                 console.info(h);
                 */
                oImg.bind('mouseover', function(){
                    $('#detail').hide();
                    $('#zoom').show();
                });

                oImg.bind('mouseout', function(){
                    $('#detail').show();
                    $('#zoom').hide();
                });

                oImg.bind('mousemove', function(event){
                    var x = event.pageX - oPos.left;
                    x = x < (oImg.width() - w) ? x < w ? w : x : oImg.width() - w;
                    nImg.css('marginLeft', (w - x) * zoomRate);
                    var y = event.pageY - oPos.top;
                    y = y < (oImg.height() - h) ? y < h ? h : y : oImg.height() - h;
                    nImg.css('marginTop', (h - y) * zoomRate);
                });
            });
        </script>
    </body>
</html>