javaScript放大镜特效

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="" id="max">
    </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]
		var omax=document.getElementById('max')

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

            if(t<omin_img.offsetTop){
                t=omin_img.offsetTop;
            }
            //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.offsetWidth/omin_img.offsetWidth
            // omax.offsetHeight/omax.offsetHeight
            // 控制大div超出隐藏滚动条的距离=小方块的宽高*倍数
            omax_img.scrollLeft=l*(omax.offsetWidth/omin_img.offsetWidth);
            omax_img.scrollTop=t*(omax.offsetHeight/omin_img.offsetHeight);
        }

        //设置放大镜的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>