console 命令行工具 X clear

console

//找到放大镜、small以及big元素
var fdj = document.getElementsByClassName("fdj")[0];
var small = document.getElementsByClassName("small")[0];
var big = document.getElementsByClassName("big")[0];
var bigImg = big.children[0];

//给small添加事件（鼠标移入、移出事件）
small.onmouseenter = function () {
    //显示fdj和big
    show(fdj);
    show(big);
}
small.onmouseleave = function () {
    //隐藏fdj和big
    hide(fdj);
    hide(big);
}
function show(ele) {
    ele.style.display = "block";
}
function hide(ele) {
    ele.style.display = "none";
}
//让放大镜跟随鼠标
small.onmousemove = function (e) {
    e = e || window.event;
    //获取鼠标在small盒子中的位置
    var x = e.pageX - small.offsetLeft;
    var y = e.pageY - small.offsetTop;
    var offsetX = x - fdj.offsetWidth / 2;
    if (offsetX < 0) {
        offsetX = 0;
    } else if (offsetX > small.offsetWidth - fdj.offsetWidth) {
        offsetX = small.offsetWidth - fdj.offsetWidth;
    }
    var offsetY = y - fdj.offsetHeight / 2;
    if (offsetY < 0) {
        offsetY = 0
    } else if (offsetY > small.offsetHeight - fdj.offsetHeight) {
        offsetY = small.offsetHeight - fdj.offsetHeight
    }
    fdj.style.top = offsetY + 'px';
    fdj.style.left = offsetX + 'px';
    //移动大图片的位置
    var bfb = 1.8;
    bigImg.style.left = -offsetX * bfb + "px";
    bigImg.style.top = -offsetY * bfb + "px";
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>放大镜</title>
</head>
<body>
  <div class="box">
		<div class="small">
			<img src="http://pic25.nipic.com/20121112/9252150_150552938000_2.jpg" alt="">
			<div class="fdj"></div>
		</div>
		<div class="big">
			<img src="http://pic25.nipic.com/20121112/9252150_150552938000_2.jpg" alt="">
		</div>
	</div>
</body>
</html>

.box div {
    float: left;
}

.small {
    width: 450px;
    height: 450px;
    border: 1px solid #ccc;
    position: relative;
}

.small img {
    width: 100%;
    height: 100%;
}

.big {
    width: 540px;
    height: 540px;
    border: 1px solid #ccc;
    overflow: hidden;
    display: none;
    position: relative;
}

.big img {
    width: 800px;
    height: 800px;
    position: absolute;
}

.small .fdj {
    width: 303.75px;
    height: 303.75px;
    border: 1px solid #ccc;
    background-color: #fede4f;
    opacity: 0.5;
    position: absolute;
    display: none;
    cursor: move;
}