要实现放大镜效果,我们首先要有一个大体的效果图,如上图所示,下面是思路分析:
- 页面加载完后就获取所要操作的节点对象(smallBox、tool、bigBox、bigImg等)
- 当鼠标浮动到小盒子上时,显示输出放大镜(tool),显示出右边的大盒子。
- 在鼠标在小盒子上移动时,放大镜(tool)跟着鼠标移动(范围就是小盒子内)。右边的大盒子中的大图片也随之移动。
效果分析图
右部显示出来是放大的效果,那么右部的容器和小工具的大小比求出图片需要放大多少倍。其实这个原理就是小工具在左侧的小盒子上移动,然后图片按比例放大后显示在右侧的盒子上,(图片大盒子小,显示不完全)然后移动小工具,让右侧大图片在右侧盒子内移动,所以小工具的宽高比如为100100,那么右侧大盒子的宽高需按照比例来,可以设置为400400,那么左侧的原始图片假如宽度为300,高度可以不用考虑,在右侧需要把这个张图片宽度设置为300*4=1200的宽度。这些在css中设置好,接下来要求的就是图片怎么移动,上图左侧有一个div,div里面有一个小工具(黄色背景,移动用的),右侧有一个div(黄色背景),绿色背景为放大后的图片。a代表小工具的宽度(offsetWidth),a1代表右侧div的宽度,c代表小工具在左侧div移动的距离,那么c1就是我们要求的值,记住,是让右侧的大图片在盒子内移动,而不是移动盒子。
代码html
<!--小盒子-->
<div id="smallBox" class="smallBox">
<div id="tool" class="tool"></div>
<img src="awe.jpg" />
</div>
<!--大盒子-->
<div id="bigBox" class="bigBox">
<img id="bigImg" src="awe.jpg" />
</div>
代码css
.smallBox{
border:1px solid #ccc;
width:300px;
position:absolute;
top:100px;
left:100px;
cursor:move;
overflow:hidden;
}
.tool{
display:none;
width:100px;
height:100px;
background-color:gold;
filter:alpha(opacity=50);
opacity:0.5;
position:absolute;
}
.smallBox img{
width:300px;
}
.bigBox{
display:none;
width:400px;
height:400px;
overflow:hidden;
position:absolute;
left:500px;
top:100px;
border:1px solid #ccc;
}
.bigBox img{
position:absolute;
width:1200px;
}
代码js
window.onload = function(){
var smallBox = document.getElementById("smallBox"); //小盒子
var tool = document.getElementById("tool"); //放大镜
var bigBox = document.getElementById("bigBox"); //大盒子
var bigImg = document.getElementById("bigImg"); //大图片
//第二步:当鼠标浮动到小盒子上时,显示出放大镜(tool),显示出右边的大盒子。
smallBox.onmouseover = function(){
tool.style.display = "block"; //显示出放大镜(tool)
bigBox.style.display = "block"; //显示出右边的大盒子。
}
smallBox.onmouseout = function(){
tool.style.display = "none"; //隐藏出放大镜(tool)
bigBox.style.display = "none"; //隐藏出右边的大盒子。
}
//第三步:在小盒子上移动鼠标时,放大镜(tool)跟着鼠标移动(范围就是小盒子内)。右边的大盒子中的大图片也随之移动
//offsetWidth offsetHeight 获取一个节点对象的宽度和高度(不包括滚动条)
smallBox.onmousemove = function(e){
var _event = window.event||e; //事件对象
//计算放大镜(tool)的x坐标
var left = _event.clientX-smallBox.offsetLeft-tool.offsetWidth/2;
//计算放大镜(tool)的y坐标
var top = _event.clientY-smallBox.offsetTop-tool.offsetHeight/2;
//处理left和top值(限制范围)
if(left<0){
left = 0;
}
if(top<0){
top = 0;
}
if(left>smallBox.offsetWidth-tool.offsetWidth){
left = smallBox.offsetWidth-tool.offsetWidth;
}
if(top>smallBox.offsetHeight-tool.offsetHeight){
top = smallBox.offsetHeight-tool.offsetHeight;
}
//改变放大镜的一个坐标
tool.style.left = left + "px";
tool.style.top = top + "px";
//求图片应当移动的距离
var x = tool.offsetLeft*bigBox.offsetWidth/tool.offsetWidth;
var y = tool.offsetTop*bigBox.offsetHeight/tool.offsetHeight;
//改变图片移动的距离
bigImg.style.left = -x + "px";
bigImg.style.top = -y + "px";
}
}
这个逻辑部分使用的完全是纯js,下面给出使用jquery的代码,更简洁:
jQuery:
$(function(){
$("#smallBox").on({
mouseenter:function(){
$("#tool").css({display:"block"});
$("#bigBox").css({display:"block"});
},
mouseleave:function(){
$("#tool").css({display:"none"});
$("#bigBox").css({display:"none"})
},
mousemove:function(e){
var cX = e.clientX-$("#smallBox").offset().left-$("#tool").width()/2;
var cY = e.clientY-$("#smallBox").offset().top-$("#tool").height()/2;
if(cX<0){
cX = 0;
}
if(cX>$("#smallBox").width()-$("#tool").width()){
cX = $("#smallBox").width()-$("#tool").width();
}
if(cY<0){
cY = 0;
}
if(cY>$("#smallBox").height()-$("#tool").height()){
cY = $("#smallBox").height()-$("#tool").height();
}
$("#tool").css({
left:cX,
top:cY
});
var x = $("#tool").position().left*$("#bigBox").width()/$("#tool").width();
var y =$("#tool").position().top*$("#bigBox").height()/$("#tool").height();
$("#bigImg").css({
left:-x,
top:-y
})
}
})
})
在实际情况下还会有一个屏幕滚动的高度,我们需要改装这一句,加上$(window).scrollTop()屏幕滚动的高度(jq的写法)
var cY = e.clientY-$(".bigxiao").offset().top-$("#tools").height()/2 +$(window).scrollTop();
转载自:https://blog.csdn.net/susuzhe123/article/details/60571004