js放大镜效果

放大镜

实现原理：使用2个div，里面分别放大图片和小图片,大div超出隐藏, 控制大div超出隐藏滚动条的距离=小方块的宽高*倍数 实现放大,主要根据小图大图同比例缩放实现,有很多种方式

1.html

	<!-- 小div -->
	<div id='box1'>
		<!-- 小图 -->
        <img src="1.jpg" id='pic'>
        <!-- 小方块 -->
        <div id='mov'></div>
    </div>
    <!-- 大div -->
    <div id='box2'>
    	<!-- 大图 -->
        <img src="1.jpg" id='pic2'>
    </div>

2.css

<style>
         *{
        margin: 0;
        padding: 0;
        } 
        /*小div*/
        #box1{
            width: 450px;
            float: left;
            border: 1px solid red;
        }
        /*小图*/
        #pic{
            width: 100%;
            height: 100%;
        }
        /*移动方块*/
        #mov{
            width: 50px;
            height: 50px;
            background-color: aqua;
            opacity: 0.3;
            position: absolute;
            display: none;
        }
        /*大div*/
        #box2{
            width: 450px;
            height: 290px;
            border: 1px solid red;
            float: left;
            overflow: hidden;
            display: none;

        }
        /*大div*/
        #pic2{
            position: relative;
        }
    </style>

3.js

1)选取

var box1 = document.getElementById('box1')
var box2 = document.getElementById('box2')
var pic = document.getElementById('pic')
var pic2 = document.getElementById('pic2')
var mov = document.getElementById('mov')

2)移入让大图片显示

box1.onmouseover=function(){
     mov.style.display='block'; // 小方块显示
     box2.style.display='block'; // 大div显示
}

3)移出让大图片隐藏

box1.onmouseout=function(){
     mov.style.display='none'; // 小方块隐藏
     box2.style.display='none'; // 大div隐藏
}

4)放大效果

document.onmousemove=function(e){
            var ev=e||window.event	// 处理兼容
            // 鼠标居中
            var movT = e.clientY-mov.offsetTop/2;  // 定义一个变量存放小方块的left和top值
            var movL = e.clientX-mov.offsetWidth/2;
            // 限制小方块范围,不让它超出div
            if(movL < box1.offsetLeft){
                movL = box1.offsetLeft
            }
            if(movL > box1.offsetLeft+box1.offsetWidth-mov.offsetWidth){
                movL = box1.offsetLeft+box1.offsetWidth-mov.offsetWidth
            }
            if(movT < box1.offsetTop){
                movT = box1.offsetTop
            }
            if(movT > box1.offsetHeight-mov.offsetHeight-2){
                movT = box1.offsetHeight-mov.offsetHeight-2
            }
            // 给小方块赋值
            mov.style.top = movT+'px'  
            mov.style.left = movL+'px'
            // 大图与小图倍数=大图的宽高/小图宽高
            // pic2.offsetWidth/pic.offsetWidth
            // pic2.offsetHeight/pic.offsetHeight
            // 控制大div超出隐藏滚动条的距离=小方块的宽高*倍数
            box2.scrollLeft=movL*(pic2.offsetWidth/pic.offsetWidth)
            box2.scrollTop=movT*(pic2.offsetHeight/pic.offsetHeight)
        }