JavaScript 图片放大看！- 放大镜效果 -鼠标放在图片上某个点：出现放大效果的图片


1张图片-放大镜:

缺点：1张图片若为小图，小图放大后图像不清晰（若为大图，则不存在这个问题）

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title> 1张图片 放大镜:</title>
    <style>
        /*    reset  css  样式重置 */
        body,p,pre,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,tr,td,div,img,form,fieldset,select,textarea,input{
            margin: 0;
            padding: 0;
        }
        body{font-size:16px;}
        table{border-collapse: collapse;}
        select,textarea,input{outline:none;  border: none; background:#fff;  }
        textarea{ resize: none; overflow: auto}
        a{  text-decoration: none;}
        li{ list-style: none; vertical-align: top}
        img{ border:none; vertical-align: top}
        /*  end  reset  css     */
        .wrap{
            position: relative;
            height: 400px;   850px; margin:100px  0  0  400px   ;
            background: #ccc;
        }
        .wrap .smallImg,  .wrap .bigImg{
            position: absolute;
            top: 0;
             400px;   height: 400px;   outline: 2px solid red;
            overflow: hidden;
        }
        .wrap .smallImg{
            left: 0;}
        .wrap .bigImg{
            left: 450px;
            display: none;
         }
        .wrap .bigImg img{
            position: absolute;
            left: 0;
            top: 0;
        }
        #shadow{
            position: absolute;
            left: 0;
            top: 0;
            display: none;
             100px;
            height: 100px;background: rgba(0,0,255,0.5)}


    </style>

    <script>
        window.onload = function(){

            var wrap    = document.getElementsByClassName("wrap")[0];
            var smallImgBox = wrap.getElementsByClassName("imgBox")[0];
            var smallImg = smallImgBox.getElementsByTagName("img")[0];
            var bigImgBox = wrap.getElementsByClassName("imgBox")[1];
            var bigImg = bigImgBox.getElementsByTagName("img")[0];
            var shadow = document.getElementById("shadow")

            smallImgBox.onmouseover = function () {
                shadow.style.display="block";
                bigImgBox.style.display="block";
            };
             smallImgBox.onmouseout = function () {
                 shadow.style.display="none";
                 bigImgBox.style.display="none";
             }

            smallImgBox.onmousemove = function (ev) {
                var ev = ev || window.event ;
                var x =  ev.clientX  -   smallImgBox.offsetLeft - wrap.offsetLeft   ;
                var y = ev.clientY  -    smallImgBox.offsetTop  -wrap.offsetTop;

                var l = x-shadow.offsetWidth/2 ;
                var t = y -shadow.offsetHeight/2 ;

                if( l <=0 ) { l=0; }
                else if(  l >=smallImgBox.offsetWidth - shadow.offsetWidth ){
                    l = smallImgBox.offsetWidth - shadow.offsetWidth ;
                }
                if(  t <=0 ){  t=0; }
                else if(  t>=smallImgBox.offsetHeight - shadow.offsetHeight )  {
                    t=   smallImgBox.offsetHeight - shadow.offsetHeight;
                }
                shadow.style.left= l +"px";
                shadow.style.top= t +"px";

               var  radioX = l /   (smallImgBox.offsetWidth - shadow.offsetWidth);
                var  radioY = t /  (smallImgBox.offsetHeight - shadow.offsetHeight) ;
                document.title =radioX+" "+ radioY ;
                bigImg.style.left=-radioX*(bigImg.width - bigImgBox.offsetWidth) +"px";
                bigImg.style.top=-radioY*(bigImg.height - bigImgBox.offsetHeight) +"px";



/*               var  radioX = x /  (smallImgBox.offsetWidth - shadow.offsetWidth)  >=1? 1 : x /   (smallImgBox.offsetWidth - shadow.offsetWidth) ;
                var  radioY = y /  (smallImgBox.offsetHeight - shadow.offsetHeight) >=1? 1 :  y /  (smallImgBox.offsetHeight - shadow.offsetHeight);
                document.title =radioX+" "+ radioY ;
                bigImg.style.left=-radioX*(bigImg.width - bigImgBox.offsetWidth) +"px";
                bigImg.style.top=-radioY*(bigImg.height - bigImgBox.offsetHeight) +"px";*/

            };
        };
    </script>

</head>
<body>
<div class="wrap">
    <div class="smallImg imgBox">
        <img src="images/bimg.jpg" width="400" alt="chothes"/>
        <div id="shadow"> </div>
    </div>
    <div class="bigImg imgBox">
        <img src="images/bimg.jpg" width="800" alt="chothes"/>
    </div>
</div>
</body>
</html>

2张图片-放大镜

缺点：素材需要一张小图，一张大图共计两张图

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title> 2张图片- 放大镜</title>
    <style>
        /*    reset  css  样式重置 */
        body,p,pre,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,tr,td,div,img,form,fieldset,select,textarea,input{
            margin: 0;
            padding: 0;
        }
        body{font-size:16px;}
        table{border-collapse: collapse;}
        select,textarea,input{outline:none;  border: none; background:#fff;  }
        textarea{ resize: none; overflow: auto}
        a{  text-decoration: none;}
        li{ list-style: none; vertical-align: top}
        img{ border:none; vertical-align: top}
        /*  end  reset  css     */
        .wrap{
            position: relative;
            height: 400px;   850px; margin:100px  0  0  400px   ;
            background: #ccc;
        }
        .wrap .smallImg,  .wrap .bigImg{
            position: absolute;
            top: 0;
             400px;   height: 400px;   outline: 2px solid red;
            overflow: hidden;
        }
        .wrap .smallImg{
            left: 0;}
        .wrap .bigImg{
            left: 450px;
            display: none;
        }
        .wrap .bigImg img{
            position: absolute;
            left: 0;
            top: 0;
        }
        #shadow{
            position: absolute;
            left: 0;
            top: 0;
            display: none;
             100px;
            height: 100px;background: rgba(0,0,255,0.5)}


    </style>

    <script>
        window.onload = function(){

            var wrap    = document.getElementsByClassName("wrap")[0];
            var smallImgBox = wrap.getElementsByClassName("imgBox")[0];
            var smallImg = smallImgBox.getElementsByTagName("img")[0];
            var bigImgBox = wrap.getElementsByClassName("imgBox")[1];
            var bigImg = bigImgBox.getElementsByTagName("img")[0];
            var shadow = document.getElementById("shadow")

            smallImgBox.onmouseover = function () {
                shadow.style.display="block";
                bigImgBox.style.display="block";
            };
            smallImgBox.onmouseout = function () {
                shadow.style.display="none";
                bigImgBox.style.display="none";
            }


            smallImgBox.onmousemove = function (ev) {

                var ev = ev || window.event ;

                //鼠标在指定div里面的坐标:可视区里面鼠标坐标- div到文档边界的距离
              /*  var x =  ev.clientX  -   shadow.offsetParent.offsetLeft -shadow.offsetParent.offsetParent.offsetLeft   ;
                var y = ev.clientY  -    shadow.offsetParent.offsetTop  -shadow.offsetParent.offsetParent.offsetLeft;*/
                var x =  ev.clientX  -   smallImgBox.offsetLeft - wrap.offsetLeft   ;
                var y = ev.clientY  -    smallImgBox.offsetTop  -wrap.offsetTop;


                var l = x-shadow.offsetWidth/2 ;
                var t = y -shadow.offsetHeight/2 ;

                if( l <=0 ) { l=0; }
                else if(  l >=smallImgBox.offsetWidth - shadow.offsetWidth ){
                    l = smallImgBox.offsetWidth - shadow.offsetWidth ;
                }
                if(  t <=0 ){  t=0; }
                else if(  t>=smallImgBox.offsetHeight - shadow.offsetHeight )  {
                    t=smallImgBox.offsetHeight - shadow.offsetHeight;
                }
                shadow.style.left= l +"px";
                shadow.style.top= t +"px";

              /*  var  radioX = l /   (smallImgBox.offsetWidth - shadow.offsetWidth);
                var  radioY = t /  (smallImgBox.offsetHeight - shadow.offsetHeight) ;
                document.title =radioX+" "+ radioY ;
                bigImg.style.left=-radioX*(bigImg.width - bigImgBox.offsetWidth) +"px";
                bigImg.style.top=-radioY*(bigImg.height - bigImgBox.offsetHeight) +"px";*/

                 var  radioX = x /  (smallImgBox.offsetWidth - shadow.offsetWidth)  >=1? 1 : x /   (smallImgBox.offsetWidth - shadow.offsetWidth) ;
                 var  radioY = y /  (smallImgBox.offsetHeight - shadow.offsetHeight) >=1? 1 :  y /  (smallImgBox.offsetHeight - shadow.offsetHeight);
                 document.title =radioX+" "+ radioY ;
                 bigImg.style.left=-radioX*(bigImg.width - bigImgBox.offsetWidth) +"px";
                 bigImg.style.top=-radioY*(bigImg.height - bigImgBox.offsetHeight) +"px";

            };
        };
    </script>

</head>
<body>
<div class="wrap">
    <div class="smallImg imgBox">
        <img src="images/simg.jpg" width="400" alt="chothes"/>
        <div id="shadow"> </div>
    </div>
    <div class="bigImg imgBox">
        <img src="images/bimg.jpg" width="800" height="800" alt="chothes"/>
    </div>
</div>
</body>
</html>

3 大图作为背景图片 - 放大镜
缺点：需要知道背景图片数字大小不像前面两者能获取img样式宽高

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title> 2张图片- 放大镜</title>
    <style>
        /*    reset  css  样式重置 */
        body,p,pre,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,tr,td,div,img,form,fieldset,select,textarea,input{
            margin: 0;
            padding: 0;
        }
        body{font-size:16px;}
        table{border-collapse: collapse;}
        select,textarea,input{outline:none;  border: none; background:#fff;  }
        textarea{ resize: none; overflow: auto}
        a{  text-decoration: none;}
        li{ list-style: none; vertical-align: top}
        img{ border:none; vertical-align: top}
        /*  end  reset  css     */
        .wrap{
            position: relative;
            height: 400px;   850px; margin:100px  0  0  400px   ;
            background: #ccc;
        }
        .wrap .smallImg,  .wrap .bigImg{
            position: absolute;
            top: 0;
             400px;   height: 400px;   outline: 2px solid red;
            overflow: hidden;
        }
        .wrap .smallImg{
            left: 0;}
        .wrap .bigImg{
            left: 450px;
            display: none;
            background: url("images/bimg.jpg") no-repeat 0 0 ;
        }
        .wrap .bigImg img{
            position: absolute;
            left: 0;
            top: 0;
        }
        #shadow{
            position: absolute;
            left: 0;
            top: 0;
            display: none;
             100px;
            height: 100px;background: rgba(0,0,255,0.5)}


    </style>

    <script>
        window.onload = function(){

            var wrap    = document.getElementsByClassName("wrap")[0];
            var smallImgBox = wrap.getElementsByClassName("imgBox")[0];
            var smallImg = smallImgBox.getElementsByTagName("img")[0];
            var bigImgBox = wrap.getElementsByClassName("imgBox")[1];
            var bigImg = bigImgBox.getElementsByTagName("img")[0];
            var shadow = document.getElementById("shadow")

            smallImgBox.onmouseover = function () {
                shadow.style.display="block";
                bigImgBox.style.display="block";
            };
            smallImgBox.onmouseout = function () {
                shadow.style.display="none";
                bigImgBox.style.display="none";
            }


            smallImgBox.onmousemove = function (ev) {

                var ev = ev || window.event ;

                //鼠标在指定div里面的坐标:可视区里面鼠标坐标- div到文档边界的距离
              /*  var x =  ev.clientX  -   shadow.offsetParent.offsetLeft -shadow.offsetParent.offsetParent.offsetLeft   ;
                var y = ev.clientY  -    shadow.offsetParent.offsetTop  -shadow.offsetParent.offsetParent.offsetLeft;*/
                var x =  ev.clientX  -   smallImgBox.offsetLeft - wrap.offsetLeft   ;
                var y = ev.clientY  -    smallImgBox.offsetTop  -wrap.offsetTop;


                var l = x-shadow.offsetWidth/2 ;
                var t = y -shadow.offsetHeight/2 ;

                if( l <=0 ) { l=0; }
                else if(  l >=smallImgBox.offsetWidth - shadow.offsetWidth ){
                    l = smallImgBox.offsetWidth - shadow.offsetWidth ;
                }
                if(  t <=0 ){  t=0; }
                else if(  t>=smallImgBox.offsetHeight - shadow.offsetHeight )  {
                    t=smallImgBox.offsetHeight - shadow.offsetHeight;
                }
                shadow.style.left= l +"px";
                shadow.style.top= t +"px";

              /*
               var  radioX = x /  (smallImgBox.offsetWidth - shadow.offsetWidth)  >=1? 1 : x /   (smallImgBox.offsetWidth - shadow.offsetWidth) ;
               var  radioY = y /  (smallImgBox.offsetHeight - shadow.offsetHeight) >=1? 1 :  y /  (smallImgBox.offsetHeight - shadow.offsetHeight);
               document.title =radioX+" "+ radioY ;
               bigImg.style.left=-radioX*(bigImg.width - bigImgBox.offsetWidth) +"px";
               bigImg.style.top=-radioY*(bigImg.height - bigImgBox.offsetHeight) +"px";
              */

                var  radioX = l /   (smallImgBox.offsetWidth - shadow.offsetWidth);
                var  radioY = t /  (smallImgBox.offsetHeight - shadow.offsetHeight) ;
                document.title =radioX+" "+ radioY ;


                /* 背景图片缺点：  这里需要知道背景图片具体大小-数字 800*800  */
                bigImgBox.style.backgroundPositionX=-radioX*( 800- bigImgBox.offsetWidth) +"px";
                bigImgBox.style.backgroundPositionY=-radioY*( 800- bigImgBox.offsetHeight) +"px";

            };
        };
    </script>

</head>
<body>
<div class="wrap">
    <div class="smallImg imgBox">
        <img src="images/simg.jpg" width="400" alt="chothes"/>
        <div id="shadow"> </div>
    </div>
    <div class="bigImg imgBox">
      <!--  <img src="images/bimg.jpg" width="800" height="800" alt="chothes"/>-->
    </div>
</div>
</body>
</html>

相关阅读:
vue-cli构建的项目手动添加eslint配置
 给通过canvas生成的二维码添加logo
webpack打包时候去掉console.log配置
 gist.github.com 被墙无法访问解决办法
 axios.js 在测试机ios7.1的iphone4中不能发送http请求解决方案
 linux 系统的7个运行级别
 今天遇到了不能创建mysql函数
 今天测试大商创，遇到了 upstream sent too big header while reading response header from upstream
mysql5.7 datetime 默认值为‘0000-00-00 00:00:00'值无法创建问题解决
 IE浏览器中判断IE版本
原文地址：https://www.cnblogs.com/July-/p/5808167.html