JS效果:放大镜

效果图

原理

需求分析:

  1. 当鼠标在small中移动时,mask显示,big显示
  2. 当鼠标在small中移动时,mask跟随鼠标移动,并且鼠标在mask的中间,mask不能超出small
  3. 当鼠标在small中移动时,mask覆盖的区域,在big中会显示细节
  4. 当鼠标移出small时,mask和big都隐藏;

需要材料:一张大图,一张小图

小图,大图的容器要定位,总容器溢出隐藏

小图:小图中的mask绝对定位,小图宽高设置百分百(小图容器)

大图:执行放大镜的时候,移动大图容器中的大图

布局

1
2
3
4
5
6
7
8
9
<div class="box">
<div class="small">
<img src="images/small.jpg" alt="" />
<div class="mask"></div>
</div>
<div class="big">
<img src="images/big.jpg" alt="" />
</div>
</div>

样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<style>
*{
margin:0;
padding:0;
}
.box{
width: 900px;
height: 430px;
margin:50px 100px;
position: relative;
}
img{
display: block;
}
.small{
float: left;
}
div.mask{
width: 184.9px;
height: 184.9px;
background: lightyellow;
opacity: 0.3;
filter:alpha(opacity=30);
display: none;
position: absolute;
top:0;
left:0;
}
.big{
border:1px solid #ccc;
overflow: hidden;
width: 430px;
height: 430px;
float: left;
margin-left:20px;
}
.big img{
margin-top:0px;
margin-left:0px;
}
</style>

JS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<script>
//需求分析:
//1、当鼠标在small中移动时,mask显示,big显示
//2. 当鼠标在small中移动时,mask跟随鼠标移动,并且鼠标在mask的中间,mask不能超出small
//3、当鼠标在small中移动时,mask覆盖的区域,在big中会显示细节
//4、当鼠标移出small时,mask和big都隐藏;
//获取事件源和相关元素:
var box = document.getElementsByTagName('div')[0];
var small = box.children[0];
var big = box.children[1];
var mask = small.children[1];
var bigImg = big.children[0];
//当鼠标在small中移动时
small.onmousemove = function(event){
//mask显示,big显示
mask.style.display = "block";
big.style.display = "block";
//获取事件对象
var e = event||window.event;
//获取鼠标距离页面顶部和页面左侧的距离
var pageX = e.clientX + scroll().left;
var pageY = e.clientY + scroll().top;
//获取以box为参考系,鼠标的坐标,并且鼠标在mask的中间
var x = pageX - box.offsetLeft-mask.offsetWidth/2;
var y = pageY - box.offsetTop-mask.offsetHeight/2;
//mask不能超出small
if(x<0){
x=0;
}
if(y<0){
y=0;
}
if(x>small.offsetWidth-mask.offsetWidth){
x = small.offsetWidth-mask.offsetWidth;
}
if(y>small.offsetHeight-mask.offsetHeight){
y = small.offsetHeight-mask.offsetHeight;
}
//mask跟随鼠标移动
mask.style.top = y + "px";
mask.style.left = x+"px";
//mask覆盖的区域,在big中会显示细节
//大图从百分之几开始显示
var percentX = x/small.offsetWidth;
var percentY = y/small.offsetHeight;
//大图移动
bigImg.style.marginLeft = -percentX*bigImg.offsetWidth +"px";
bigImg.style.marginTop = -percentY*bigImg.offsetHeight + "px";
}
//当鼠标移出small时,mask和big都隐藏
small.onmouseout = function(){
mask.style.display = "none";
big.style.display = "none";
}
</script>

在原位置的放大镜

这个是在逛游戏商城的时候遇到的,顺带提一下。这里的JS实现原理是一样的,知识在布局上有所不同。

  • (458 438 )→(600 600)
  • 点击下面的小图片》该图片显示 其他隐藏
  • 悬浮在大图片,原本的大图可视为hidden;最大的图出来。执行放大镜

Css样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
.imgdiv{
width: 458px;
height: 438px;
}
.bigUl{
/*position: relative;*/
height: 438px;
overflow: hidden;
cursor: url("../img/zoomin.png"),pointer;

}
.bigUl li{
height: 438px;
position:relative; /*li为定位点*/
/*overflow: hidden;*/
}
.bigUL li,.small{
display: block;
width: 458px;
height: 438px;
}
.small{
position: absolute;
top: 0;
left: 0;
z-index: 50;

}
.small img{
width: 100%;
height: 100%;
}
.mask{
width: 230px;
height: 230px;
background: lightyellow;
filter: alpha(opacity=30);
opacity: 0;
position: absolute;
top: 0;
left: 0;
z-index: 500;
}
.big{
position: absolute;
top: 0;
left: 0;
width: 458px;
height: 438px;
}
.big img{
position: absolute;
top: 0;
left: 0;
}
.smallUl{
margin-left: 2px;
}
.smallUl li{
display: inline-block;
width: 74px;
height: 70px;
padding: 2px;
border: 3px solid #fff;
margin: 2px;

}
.smallUl li img{
width: 100%;
height: 100%;
}
.smallUl .now{
border-color: #fe5268;
}

html布局

bigUl中的每个li为一个放大镜

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<div class="imgdiv">
<ul class="bigUl">
<li>
<div class="small">
<img src="img/small1.jpg" alt="">
<div class="mask"></div>
</div>
<div class="big">
<img src="img/big1.jpg" alt="">
</div>
</li>
<li>
<div class="small">
<img src="img/small2.jpg" alt="">
<div class="mask"></div>
</div>
<div class="big">
<img src="img/big2.jpg" alt="">
</div>
</li>
<li>
<div class="small">
<img src="img/small3.jpg" alt="">
<div class="mask"></div>
</div>
<div class="big">
<img src="img/big3.jpg" alt="">
</div>
</li>
<li>
<div class="small">
<img src="img/small4.jpg" alt="">
<div class="mask"></div>
</div>
<div class="big">
<img src="img/big4.jpg" alt="">
</div>
</li>
<li>
<div class="small">
<img src="img/small5.jpg" alt="">
<div class="mask"></div>
</div>
<div class="big">
<img src="img/big5.jpg" alt="">
</div>
</li>
</ul>
<ul class="smallUl">
<li class="now"><img src="img/small1.jpg" alt=""></li>
<li><img src="img/small2.jpg" alt=""></li>
<li><img src="img/small3.jpg" alt=""></li>
<li><img src="img/small4.jpg" alt=""></li>
<li><img src="img/small5.jpg" alt=""></li>
</ul>
</div>

JS实现代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75

var box = $('.bigUl')[0].children;
for(var i = 0; i < box.length; i++ ){
magnify(box[i]);
}
var small=$('.smallUl')[0].children;
for(var s = 0; s <small .length; s++ ){
small[s].index=s;
small[s].onmouseover=function () {
for(var j = 0; j <small .length; j++ ){
box[j].style.display='none';
small[j].classList.remove('now');
}
box[this.index].style.display='block';
box[this.index].style.opacity='0';
animation(box[this.index],{opacity:1})
this.classList.add('now');

}
}

function magnify(box) {
var small = box.children[0];
var big = box.children[1];
var mask = small.children[1];
var bigImg = big.children[0];
//当鼠标在small中移动时
small.onmousemove = function(event){
//mask显示,big显示
// small.style.opacity='0';
animation(small,{opacity:0});
// animation(mask,{})
big.style.display = "block";
//获取事件对象
var e = event||window.event;
//获取鼠标距离页面顶部和页面左侧的距离
var pageX = e.clientX + scroll().left;
var pageY = e.clientY + scroll().top;
//获取以box为参考系,鼠标的坐标,并且鼠标在mask的中间
var x = pageX - box.offsetLeft-mask.offsetWidth/2;
var y = pageY - box.offsetTop-mask.offsetHeight/2;
//mask不能超出small
if(x<0){
x=0;
}
if(y<0){
y=0;
}
if(x>small.offsetWidth-mask.offsetWidth){
x = small.offsetWidth-mask.offsetWidth;
}
if(y>small.offsetHeight-mask.offsetHeight){
y = small.offsetHeight-mask.offsetHeight;
}
//mask跟随鼠标移动
mask.style.top = y + "px";
mask.style.left = x+"px";
//mask覆盖的区域,在big中会显示细节
//大图从百分之几开始显示
var percentX = x/small.offsetWidth;
var percentY = y/small.offsetHeight;
//大图移动
bigImg.style.left = -percentX*big.offsetWidth +"px";
bigImg.style.top = -percentY*big.offsetHeight + "px";
}
//当鼠标移出small时,mask和big都隐藏
small.onmouseout = function(){
// small.style.opacity='1';
// mask.style.display = "none";
// big.style.display = "none";
animation(small,{opacity:1})
}


}
文章目录
  1. 1. 效果图
  2. 2. 原理
  3. 3. 布局
  4. 4. 样式
  5. 5. JS
  6. 6. 在原位置的放大镜
    1. 6.1. Css样式
    2. 6.2. html布局
    3. 6.3. JS实现代码
|