功能实现
1、鼠标经过小图片盒子,黄色的遮挡层和大图片显示,离开时就隐藏2个盒子功能
2、黄色遮挡层跟着鼠标走
把鼠标的坐标给盒子,不断地进行赋值操作
把鼠标地坐标给遮挡层不合适,因为遮挡层坐标以父盒子为准
首先是获得鼠标在盒子内地坐标
然后把数值给遮挡层地left和top值
此时用到鼠标移动事件,但是还是在小图片盒子内移动
发现,遮挡层位置不对,需要再减去盒子自身高度和宽度地一半
遮挡层不能超出小图片盒子范围
如果小于0,就把坐标设置为0
如果大于遮挡层最大地移动距离,就把坐标设置为最大地移动距离
遮挡层地最大移动距离:小图片盒子宽度减去遮挡层盒子宽度
3、移动黄色遮挡层,大盒子跟着图片走



也太难了、、、、
- <!DOCTYPE html>
- <html lang="en">
-
- <head>
- <meta charset="UTF-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Document</title>
- <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>
- </head>
-
- <body>
- <div class="box"><img src="http://img14.360buyimg.com/n1/s450x450_jfs/t1/131049/21/21277/105207/61dfcd46E2318f45d/32bd21d7732845bc.jpg" alt="" class="tupian">
- <div class="mask"></div>
- <div class="big"><img src="http://img14.360buyimg.com/n1/s450x450_jfs/t1/131049/21/21277/105207/61dfcd46E2318f45d/32bd21d7732845bc.jpg" 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'
- })
-
-
-
-
-
-
-
- // tupian.addEventListener('mouseover', function() {
- // tupian.addEventListener('mousemove', function(e1) {
- // mask.style.display = 'block'
- // var x = e1.pageX - tupian.offsetLeft
- // var y = e1.pageY - tupian.offsetTop
- // mask.style.left = x - 75 + 'px'
- // mask.style.top = y - 75 + 'px'
- // if (mask.style.bottom < -10) {
- // mask.style.bottom = 0 + 'px'
- // }
- // })
-
- //让遮罩层跟随鼠标移动
- // div.addEventListener('mousemove', function(e) {
- // var a = e.pageX - div.offsetLeft
- // var b = e.pageY - div.offsetTop
- // if (a > 75) {
- // mask.style.left = e.pageX - div.offsetLeft - x + 'px'
- // }
- // if (mask.style.left < 0) {
- // mask.style.left = 0
- // }
- // if (b > 75) {
- // mask.style.top = e.pageY - y + 'px'
- // }
- // if (mask.style.top < 0) {
- // mask.style.top = 0
- // }
- // mask.style.left = x - 75 + 'px' //鼠标并不一定要在mask的正中间
- // mask.style.top = y - 75 + 'px'
-
- // div.addEventListener('mousemove', fn)
-
- // function fn(e) { //这个函数一定要写在mousedown函数里面才能取出x和y
- // //不能让白色遮罩层出box盒子
- // mask.style.left = e.pageX - x - 75 + 'px'
- // mask.style.top = e.pageY - y - 75 + 'px'
- // }
- // })
-
-
- //鼠标离开盒子就取消移动事件
- // div.addEventListener('mouseout', function() {
-
- // div.removeEventListener('mousemove', fn)
- // })
- // })
- </script>
- </body>
-
- </html>

复盘:

以上就是利用JavaScript实现仿京东放大镜效果的详细内容,更多关于JavaScript放大镜效果的资料请关注w3xue其它相关文章!