原生js实现放大镜效果

css部分

<style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }

            .min_img{
                /* 800×678 */
                /* 这里图片的宽高是原来图片的3倍(看自己想弄成几倍) */
                width: 266px;
                height:226px;
                background-image: url(img/1.jpg);
                background-size: 100%;
                position: relative;
            }
            .fdj{
                width: 100px;
                height: 75px;
                background: khaki;
                opacity: 0.5;
                position: absolute;
                display: none;
            }
            .max_img{
                width: 266px;
                height: 226px;
                border: 1px solid red;
                overflow: hidden;
                display: none;
            }
		</style>

主题结构

<div class="min_img">
            <div class="fdj"></div>
        </div>
        <div class="max_img">
            <img src="img/1.jpg" alt="">
        </div>

js部分

<script type="text/javascript">
        //获取元素
		var omin_img=document.getElementsByClassName('min_img')[0];
        var ofdj=document.getElementsByClassName('fdj')[0];
        var omax_img=document.getElementsByClassName('max_img')[0]

        document.onmousemove=function(e){
            //clientX  获取鼠标在文档中X坐标
			// offsetWidth  获取父元素的宽度
			// odiv.offsetWidth/2 是为了让鼠标在div中间显示
            //l 是div在可视区域X轴上距左的距离
            l=e.clientX-ofdj.offsetWidth/2;
            //clientY  获取鼠标在文档中Y坐标
			//offsetHeight  获取父元素的高度
            //t 是div在可视区域Y轴上距上的距离
            t=e.clientY-ofdj.offsetTop/2;
            
            if(l<0){
                l=0;
            }

            if(t<0){
                t=0;
            }
            //document.documentElement.clientWidth 是可视区域的宽
            //odiv.offsetWidth					 是div元素自身的宽
            //如果是div在可视区域X轴上距左的距离>可视区域的宽减去div元素自身的宽
            //就让div在可视区域X轴上距左的距离=可视区域的宽减去div元素自身的宽
            if(l>omin_img.offsetWidth-ofdj.offsetWidth){
                l=omin_img.offsetWidth-ofdj.offsetWidth
            }

            if(t>omin_img.offsetHeight-ofdj.offsetHeight){
                t=omin_img.offsetHeight-ofdj.offsetHeight
            }

            ofdj.style.left=l+'px';
            ofdj.style.top=t+'px';

            //乘以这个放大镜缩小的倍数
            omax_img.scrollLeft=l*3;
            omax_img.scrollTop=t*3;
        }

        //设置放大镜的div和被放大图片的div的显示和隐藏
        omin_img.onmousemove=function(){
            ofdj.style.display='block';
            omax_img.style.display='block';
        }
        omin_img.onmouseout=function(){
            ofdj.style.display='none';
            omax_img.style.display='none';
        }
	</script>