放大镜案例

Posted 2020-10-07

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了放大镜案例相关的知识，希望对你有一定的参考价值。

实现功能类似淘宝查看商品功能

鼠标移动到a图查看b图的比例放大照片(首先要有两种1:2比例或更大的图)

重点:图片的定位:

absolute

scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离

scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离

event.clientX 鼠标相对文档的水平座标

event.clientY 鼠标相对文档的垂直座标

offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置

offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置

offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度

offsetWhdth:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的宽度

scrollWidth:获取对象的滚动宽度

scrollHeight: 获取对象的滚动高度。

这些属性的加减

滚轮的高度如果没加的话宽度一高就会出现问题所以滚轮必须加

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>放大镜</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #box{
            width:800px;
            height: 800px;
            position: relative;
            margin: 150px;
        }
        #min,#max{
            width: 400px;
            height: 400px;
        }
        #min{
            float: left;
        }
        #max{
            overflow: hidden;
            float: right;
            position: absolute;
            top:0;
            left: 800px;
            display: none;
        }
        #fu{
            width: 200px;
            height: 200px;
            position: absolute;
            left: 0;
            top: 0;
            background-color: blue;
            opacity: 0.3;
            display: none;
        }
        /*定位很重要 如果没定位就查看不了大图*/
        #imgs{
            position: absolute;
            left: 0;
            top:0;
        }
    </style>
</head>
<body>
<div id="box">
    <div id="min">
        <img src="imgs/min.jpg" alt="">
      <div id="fu"></div>
    </div>
    <div id="max">
        <img src="imgs/max.jpg" alt=""  id="imgs">
    </div>

</div>
<script>
    var min=document.getElementById("min"),
        fu=document.getElementById("fu"),
        max=document.getElementById("max"),
        box=document.getElementById("box"),
        imgs=document.getElementById("imgs")
//    alert(imgs.style.width)
    imgs.style.width="800px"
    min.onmousemove=function (e) {
        fu.style.display="block"
        max.style.display="block"
        var scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft;
        var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
//           alert(fu.offsetWidth)
            var x=e.clientX +scrollLeft- box.offsetLeft-fu.offsetWidth/2
        var y=e.clientY +scrollTop-box.offsetTop-fu.offsetHeight/2


        if(x<0){
            x=0;
        }else if(x>min.offsetWidth-fu.offsetWidth){
            x=min.offsetWidth-fu.offsetWidth;
        }
        if(y<0){
            y=0;
        }else if(y>min.offsetHeight-fu.offsetHeight){
            y=min.offsetHeight-fu.offsetHeight;
        }

        fu.style.left= x+"px"
        fu.style.top=y+"px"

        imgs.style.left = -2*x+"px"
        imgs.style.top = -2*y+"px"


    }
    min.onmouseout=function () {
        fu.style.display="none"
        max.style.display="none"
    }

</script>



</body>
</html>

以上是关于放大镜案例的主要内容，如果未能解决你的问题，请参考以下文章

js+css+html实现放大镜效果

android - 离开应用程序时保持谷歌地图片段在位置上放大

0189 案例：仿京东放大镜效果

放大镜案例