javascript放大镜效果

Posted hushengbin789

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了javascript放大镜效果相关的知识,希望对你有一定的参考价值。

JS实现放大镜效果

首先我们先设想一下放大镜效果

1、当鼠标进入小盒子的时候,把大图片显示出来

2、当指定移动区域的时候,显示当前放大区域(放大效果)

3、鼠标移除我们让它消失

一、实现页面布局HTML+CSS

二、实现放大镜的功能js

 

下面来看代码,让你思路变清晰

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>放大镜</title>
<style>
#box{
width: 350px;
height: 350px;
margin: 100px 0 0 100px;
position: relative;
}
#small_box{
width:100%;
height: 100%;
border:1px solid #ccc;
position: relative;
}
#mask{
height: 100px;
width: 100px;

left: 0px;
top: 0px;
position: absolute;
display: none;
cursor: move;
}
#big_box{
height: 600px;
width: 600px;
border: 1px solid #ccc;
overflow: hidden;
top:0px;
left: 360px;
position: absolute;
display: none;
}
</style>
</head>
<body>
<div id="box">
<div id="small_box">
<img src="img/pic01.jpg" />
<span id="mask"></span>
</div>
<div id="big_box">
<img src="img/pic001.jpg" style="position: absolute;"/>
</div>
</div>

<script>
window.onload = function(){
//1.获取需要的元素
var box = document.getElementById("box");
var small_box = document.getElementById("small_box");
var big_box = document.getElementById("big_box");
var mask = document.getElementById("mask");
var big_img = big_box.children[0];

//2.鼠标移入小盒子事件
small_box.onmouseover = function(){
//2.1鼠标移入,显示放大镜和大图片
big_box.style.display = ‘block‘;
mask.style.display = ‘block‘;

//2.2移动鼠标的同时移动放大镜,获取鼠标的移动事件
small_box.onmousemove = function(event){
// //获取鼠标的坐标点X Y
var pointX = event.clientX - box.offsetLeft - mask.offsetHeight*0.5;
var pointY = event.clientY - box.offsetTop - mask.offsetWidth*0.5;

//做边界的校验
if(pointX<0){//当鼠标的坐标点X小于0的时候我们让它等于0,目的是让它不出去
pointX = 0;
}else if(pointX>small_box.offsetWidth-mask.offsetWidth){//当鼠标的坐标点大于(小盒子事件源宽度-指针区域事件源的宽度)时,我们就让它等于那个宽度,防止不出界。
pointX = small_box.offsetWidth-mask.offsetWidth;
}

if(pointY<0){
pointY = 0;
}else if(pointY>small_box.offsetHeight-mask.offsetHeight){
pointY = small_box.offsetHeight-mask.offsetHeight;
}

//移动mask
mask.style.left = pointX + ‘px‘;
mask.style.top = pointY + ‘px‘;

//移动大图
//小盒子中移动的距离:大盒子中移动的距离 = 小盒子的宽度:大盒子的宽度
//大盒子中移动的距离 = 小盒子中移动的距离/(小盒子的宽度:大盒子的宽度);
big_img.style.left = -pointX/(small_box.offsetWidth/big_box.offsetWidth)+‘px‘;
big_img.style.top = - pointY/(small_box.offsetHeight/big_box.offsetHeight)+‘px‘;
}
}

//3.鼠标移除小盒子事件
small_box.onmouseout = function(){
//2.1鼠标移入,显示放大镜和大图片
big_box.style.display = ‘none‘;
mask.style.display = ‘none‘;
}
}
</script>
</body>
</html>
?

 

注意

移动大图

小盒子中移动的距离:大盒子中移动的距离 = 小盒子的宽度:大盒子的宽度大盒子中移动的距离 = 小盒子中移动的距离/(小盒子的宽度:大盒子的宽度);


big_img.style.left = -pointX/(small_box.offsetWidth/big_box.offsetWidth)+‘px‘;
big_img.style.top = - pointY/(small_box.offsetHeight/big_box.offsetHeight)+‘px‘;

里面的减号指的是方向,方向为反方向,这样才能可以实现你所预想的结果,你可以试一下没有减号的效果你就知道是什么样的了

 

其它不懂的地方欢迎留言

 

 

以上是关于javascript放大镜效果的主要内容,如果未能解决你的问题,请参考以下文章

javascript放大镜效果

小5聊纯javascript实现图片放大镜效果

前端特效-Javascript实现购物页面图片放大效果

放大镜代码及效果图

一个javascript放大镜

15.JavaScript实现放大镜效果