0
点赞
收藏
分享

微信扫一扫

模仿京东放大镜的效果

zhaoxj0217 2022-04-29 阅读 64
csscss3html

主要练习元素偏移量 offset的系列

一、目标实现效果

 

二、实现过程及其思路展示

1、给鼠标设置一个'mouseover'事件在鼠标经过的时候可以将遮罩层和右边的放大图片显示设置为块级显示(页面加载时这两个为none也就是隐藏的状态),再给鼠标设置一个'mouseout',在鼠标超出图片所在范围的时候再将上面的两个属性的display设置为none,再次隐藏起来。

2、鼠标添加'mousemove'事件,再鼠标移动的时候给遮罩层赋予一个坐标跟随鼠标的移动而移动,而且需要在此时给右边的被放大的盒子添加位置(但是左右两边的位移是相反的,需要特别注意,只需要给鼠标产生位移的距离添加'-'号就行了)。
 

在原先需要放大的图片上准备一个有颜色的遮挡层背景的盒子,例如样式为

 .mask {
display: none;
width: 150px;
height: 150px;
background: rgba(228, 248, 138, 0.3);
position: absolute;
top: 0px;
left: 0px;
cursor: move;
}

  1.      子绝父相,给 原图片样式加上相对定位position: relative;
  2. 在原图片旁边准备一个放比原图更大图片(原图的放大版)的盒子
 .big {
display: none;
width: 400px;
height: 400px;
position: absolute;
top: 0px;
left: 310px;
background-color: pink;
overflow: hidden;
}
  1.  鼠标经过,遮挡层和大图片盒子显示,离开隐藏;遮挡层跟随鼠标移动;遮挡层移动,大图片跟随移动功能。

 

代码如下:

1.css样式代码

 <style>
.box {
width: 300px;
height: 300px;
position: relative;
border: 1px solid #ccc;
}

.tupian {
width: 100%;
height: 100%;
}
/* 不能是box里面所有地img百分百比例,这样是无法再大盒子里面移动图片地 */

.mask {
display: none;
width: 150px;
height: 150px;
background: rgba(228, 248, 138, 0.3);
position: absolute;
top: 0px;
left: 0px;
cursor: move;
}

.big {
display: none;
width: 400px;
height: 400px;
position: absolute;
top: 0px;
left: 310px;
background-color: pink;
overflow: hidden;
}

.big img {
position: absolute;
top: 0px;
left: 400px
}
</style>

2、js代码段,此处可以单独创建一个js文件,并且调用到html的head中 ,或者在body里面写,不过必须写在script里

<body>
<div class="box"><img src="imgs/timg.jpeg" alt="" class="tupian">
<div class="mask"></div>
<div class="big"><img src="imgs/timg.jpeg" alt="" class="bigimg"></div>
</div>

<script>
//当鼠标放在box上,箭头变为移动
var tupian = document.querySelector('.tupian')
var mask = document.querySelector('.mask')
var big = document.querySelector('.big')
var box = document.querySelector('.box')
var bigimg = document.querySelector('.bigimg')
//鼠标放在小图片上时,黄色遮挡层显示以及大盒子显示
box.addEventListener('mouseover', function() { //不能是图片添加的事件,因为mask一显示就会把图片给挡住
mask.style.display = 'block'
big.style.display = 'block'
})
//鼠标离开小图片,就隐藏
box.addEventListener('mouseout', function() {
mask.style.display = 'none'
big.style.display = 'none'
})
box.addEventListener('mousemove', function(e) {
//先计算出鼠标在盒子内地坐标
var x = e.pageX - box.offsetLeft
var y = e.pageY - box.offsetTop
//减75(盒子地一般)是为了让鼠标位于盒子地中心
//mask移动地距离
var maskx = x - mask.offsetWidth / 2
var masky = y - mask.offsetHeight / 2 //最好这样赋值一下,就不用考虑if里面地单位情况
//约束--设置小盒子移动范围
if (maskx <= 0) {
maskx = 0
} else if (maskx >= box.offsetWidth - mask.offsetWidth) {
maskx = box.offsetWidth - mask.offsetWidth
}
if (masky <= 0) {
masky = 0
} else if (masky >= box.offsetHeight - mask.offsetHeight) {
masky = box.offsetHeight - mask.offsetHeight
}
mask.style.left = maskx + 'px'
mask.style.top = masky + 'px'
var maxMax = box.offsetWidth - mask.offsetWidth //遮挡层地最大移动距离
var bigMax = bigimg.offsetWidth - big.offsetWidth //大图片地最大移动距离
//大图片地移动距离
var bigx = maskx * bigMax / maxMax
var bigy = masky * bigMax / maxMax
bigimg.style.left = -bigx + 'px'
bigimg.style.top = -bigy + 'px'
})
</script>
</body>

这样就可以实现拖到发大图片的效果,就像是放大镜一样

这里我有一个问题就是计算大图移动距离的公式,可能是因为数学不太会吧!

 大图的移动距离=mask移动距离*大图的最大移动距离 /遮挡层的最大移动距离

举报

相关推荐

0 条评论