实现效果演示:
鼠标移入左侧缩略图时,小盒子和右边大图显示,并且小盒子跟随鼠标移动,右侧大图出现放大效果。我将用三种方法来实现。
1.原生js代码实现
思路:
1.原图窗口与放大窗口插入的是同一个图片,不过原图窗口的图片要适当缩小,放大窗口图片保持原大小,超出部分设置隐藏。
2.先定下放大比例,例如本文原图大小为10001000,可以把原图窗口的图片设为400400,这样放大窗口就能实现2.5倍的放大效果了。
3.首先实现小框框跟着鼠标移动的功能(小框框不能移出边界)。
4.再实现放大窗口中的图片随着小框框的移动实现自身移动。
5.鼠标(小框框)向右移动,放大窗口中的图片是要向左移动的!他们的方向总是相反。
6.小框框大小不是随意设置,与放大倍数有关。
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>放大镜</title>
<style>
*{
margin: 0;
padding: 0;
}
.container{
width: 400px;
height: 250px;
position: relative;
left: 250px;
top: 150px;
}
.bigBox{
width: 500px;
height: 500px;
border-radius: 50%;
position: absolute;
left: 430px;
border: 1px solid #ccc;
overflow: hidden;
display: none;
}
.smallBox{
position: absolute;
border: 1px solid #ccc;
font-size: 0;
}
.mask{
width: 100px;
height: 100px;
cursor: move;
position: absolute;
top: 0;
left: 0;
background-color: rgba(255,255,0,0.4);
display: none;
}
#bigPic{
position: absolute;
}
</style>
<script>
window.onload = function(){
var smallBox = document.getElementsByClassName('smallBox')[0];
var bigBox = document.getElementsByClassName('bigBox')[0];
var mask = document.getElementsByClassName('mask')[0];
var box = document.getElementById('box');
var bigPic = document.getElementById('bigPic');
smallBox.onmouseover = function(){
bigBox.style.display = "block";
mask.style.display = "block";
}
smallBox.onmouseout = function(){
bigBox.style.display = "none";
mask.style.display = "none";
}
smallBox.onmousemove = function(event){
//pageX,pageY
//处理兼容性和滚动条
var event = event || window.event;
var scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft;
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
var pageX = event.pageX || event.clientX + scollLeft;
var pageY = event.pageY || event.clientY + scollTop;
var targetX = pageX - box.offsetLeft - mask.offsetWidth/2;
var targetY = pageY - box.offsetTop - mask.offsetHeight/2;
//左边界
if(targetX<0