经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » JavaScript » 查看文章
利用JavaScript实现仿京东放大镜效果
来源:jb51  时间:2022/3/8 10:43:13  对本文有异议

功能实现

1、鼠标经过小图片盒子,黄色的遮挡层和大图片显示,离开时就隐藏2个盒子功能

2、黄色遮挡层跟着鼠标走

把鼠标的坐标给盒子,不断地进行赋值操作

把鼠标地坐标给遮挡层不合适,因为遮挡层坐标以父盒子为准

首先是获得鼠标在盒子内地坐标

然后把数值给遮挡层地left和top值

此时用到鼠标移动事件,但是还是在小图片盒子内移动

发现,遮挡层位置不对,需要再减去盒子自身高度和宽度地一半

遮挡层不能超出小图片盒子范围

如果小于0,就把坐标设置为0

如果大于遮挡层最大地移动距离,就把坐标设置为最大地移动距离

遮挡层地最大移动距离:小图片盒子宽度减去遮挡层盒子宽度

3、移动黄色遮挡层,大盒子跟着图片走

也太难了、、、、

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>Document</title>
  8. <style>
  9. .box {
  10. width: 300px;
  11. height: 300px;
  12. position: relative;
  13. border: 1px solid #ccc;
  14. }
  15. .tupian {
  16. width: 100%;
  17. height: 100%;
  18. }
  19. /* 不能是box里面所有地img百分百比例,这样是无法再大盒子里面移动图片地 */
  20. .mask {
  21. display: none;
  22. width: 150px;
  23. height: 150px;
  24. background: rgba(228, 248, 138, 0.3);
  25. position: absolute;
  26. top: 0px;
  27. left: 0px;
  28. cursor: move;
  29. }
  30. .big {
  31. display: none;
  32. width: 400px;
  33. height: 400px;
  34. position: absolute;
  35. top: 0px;
  36. left: 310px;
  37. background-color: pink;
  38. overflow: hidden;
  39. }
  40. .big img {
  41. position: absolute;
  42. top: 0px;
  43. left: 400px
  44. }
  45. </style>
  46. </head>
  47. <body>
  48. <div class="box"><img src="http://img14.360buyimg.com/n1/s450x450_jfs/t1/131049/21/21277/105207/61dfcd46E2318f45d/32bd21d7732845bc.jpg" alt="" class="tupian">
  49. <div class="mask"></div>
  50. <div class="big"><img src="http://img14.360buyimg.com/n1/s450x450_jfs/t1/131049/21/21277/105207/61dfcd46E2318f45d/32bd21d7732845bc.jpg" alt="" class="bigimg"></div>
  51. </div>
  52. <script>
  53. //当鼠标放在box上,箭头变为移动
  54. var tupian = document.querySelector('.tupian')
  55. var mask = document.querySelector('.mask')
  56. var big = document.querySelector('.big')
  57. var box = document.querySelector('.box')
  58. var bigimg = document.querySelector('.bigimg')
  59. //鼠标放在小图片上时,黄色遮挡层显示以及大盒子显示
  60. box.addEventListener('mouseover', function() { //不能是图片添加的事件,因为mask一显示就会把图片给挡住
  61. mask.style.display = 'block'
  62. big.style.display = 'block'
  63. })
  64. //鼠标离开小图片,就隐藏
  65. box.addEventListener('mouseout', function() {
  66. mask.style.display = 'none'
  67. big.style.display = 'none'
  68. })
  69. box.addEventListener('mousemove', function(e) {
  70. //先计算出鼠标在盒子内地坐标
  71. var x = e.pageX - box.offsetLeft
  72. var y = e.pageY - box.offsetTop
  73. //减75(盒子地一般)是为了让鼠标位于盒子地中心
  74. //mask移动地距离
  75. var maskx = x - mask.offsetWidth / 2
  76. var masky = y - mask.offsetHeight / 2 //最好这样赋值一下,就不用考虑if里面地单位情况
  77. //约束--设置小盒子移动范围
  78. if (maskx <= 0) {
  79. maskx = 0
  80. } else if (maskx >= box.offsetWidth - mask.offsetWidth) {
  81. maskx = box.offsetWidth - mask.offsetWidth
  82. }
  83. if (masky <= 0) {
  84. masky = 0
  85. } else if (masky >= box.offsetHeight - mask.offsetHeight) {
  86. masky = box.offsetHeight - mask.offsetHeight
  87. }
  88. mask.style.left = maskx + 'px'
  89. mask.style.top = masky + 'px'
  90. var maxMax = box.offsetWidth - mask.offsetWidth //遮挡层地最大移动距离
  91. var bigMax = bigimg.offsetWidth - big.offsetWidth //大图片地最大移动距离
  92. //大图片地移动距离
  93. var bigx = maskx * bigMax / maxMax
  94. var bigy = masky * bigMax / maxMax
  95. bigimg.style.left = -bigx + 'px'
  96. bigimg.style.top = -bigy + 'px'
  97. })
  98. // tupian.addEventListener('mouseover', function() {
  99. // tupian.addEventListener('mousemove', function(e1) {
  100. // mask.style.display = 'block'
  101. // var x = e1.pageX - tupian.offsetLeft
  102. // var y = e1.pageY - tupian.offsetTop
  103. // mask.style.left = x - 75 + 'px'
  104. // mask.style.top = y - 75 + 'px'
  105. // if (mask.style.bottom < -10) {
  106. // mask.style.bottom = 0 + 'px'
  107. // }
  108. // })
  109. //让遮罩层跟随鼠标移动
  110. // div.addEventListener('mousemove', function(e) {
  111. // var a = e.pageX - div.offsetLeft
  112. // var b = e.pageY - div.offsetTop
  113. // if (a > 75) {
  114. // mask.style.left = e.pageX - div.offsetLeft - x + 'px'
  115. // }
  116. // if (mask.style.left < 0) {
  117. // mask.style.left = 0
  118. // }
  119. // if (b > 75) {
  120. // mask.style.top = e.pageY - y + 'px'
  121. // }
  122. // if (mask.style.top < 0) {
  123. // mask.style.top = 0
  124. // }
  125. // mask.style.left = x - 75 + 'px' //鼠标并不一定要在mask的正中间
  126. // mask.style.top = y - 75 + 'px'
  127. // div.addEventListener('mousemove', fn)
  128. // function fn(e) { //这个函数一定要写在mousedown函数里面才能取出x和y
  129. // //不能让白色遮罩层出box盒子
  130. // mask.style.left = e.pageX - x - 75 + 'px'
  131. // mask.style.top = e.pageY - y - 75 + 'px'
  132. // }
  133. // })
  134. //鼠标离开盒子就取消移动事件
  135. // div.addEventListener('mouseout', function() {
  136. // div.removeEventListener('mousemove', fn)
  137. // })
  138. // })
  139. </script>
  140. </body>
  141. </html>

复盘:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>Document</title>
  8. <style>
  9. .box {
  10. width: 300px;
  11. height: 300px;
  12. position: relative;
  13. }
  14. .pre {
  15. width: 100%
  16. }
  17. .mask {
  18. display: none;
  19. position: absolute;
  20. top: 0px;
  21. left: 0px;
  22. width: 100px;
  23. height: 150px;
  24. background-color: pink;
  25. opacity: 0.3;
  26. }
  27. .big {
  28. /* display: none; */
  29. position: absolute;
  30. top: 0px;
  31. left: 310px;
  32. width: 400px;
  33. height: 400px;
  34. background-color: pink;
  35. overflow: hidden;
  36. /* 当大盒子里面地图片出来地时候,就将出来部分地图片进行隐藏 */
  37. }
  38. /* 鼠标进入小盒子地时候,变为移动 */
  39. .bigtu {
  40. position: absolute;
  41. top: 0px;
  42. left: 0px;
  43. }
  44. .box:hover {
  45. cursor: move
  46. }
  47. </style>
  48. </head>
  49. <body>
  50. <div class="box">
  51. <img src="http://img14.360buyimg.com/n1/s450x450_jfs/t1/131049/21/21277/105207/61dfcd46E2318f45d/32bd21d7732845bc.jpg" alt="" class="pre">
  52. <div class="mask"></div>
  53. <div class="big"> <img src="http://img14.360buyimg.com/n1/s450x450_jfs/t1/131049/21/21277/105207/61dfcd46E2318f45d/32bd21d7732845bc.jpg" alt="" class="bigtu"></div>
  54. </div>
  55. <script>
  56. //1、鼠标进入小盒子,遮罩层、大盒子出现
  57. var box = document.querySelector('.box')
  58. var mask = document.querySelector('.mask')
  59. var big = document.querySelector('.big')
  60. var bigtu = document.querySelector('.bigtu')
  61. box.addEventListener('mouseover', function() {
  62. mask.style.display = 'block'
  63. big.style.display = 'block'
  64. })
  65. //2、鼠标离开小盒子地时候,遮罩层、大盒子隐藏
  66. box.addEventListener('mouseout', function() {
  67. mask.style.display = 'none'
  68. big.style.display = 'none'
  69. })
  70. //3、添加移动效果,遮罩层跟随鼠标移动,鼠标再小盒子地坐标就是遮罩层地位置
  71. box.addEventListener('mousemove', function(e) {
  72. //求鼠标在小盒子里面地坐标
  73. var x = e.pageX - box.offsetLeft
  74. var y = e.pageY - box.offsetTop
  75. //将鼠标地坐标给遮罩层
  76. // mask.style.left = x + 'px'
  77. // mask.style.top = y + 'px'
  78. //鼠标应该位于遮罩层地中心位置
  79. var maskx = x - mask.offsetWidth / 2
  80. var masky = y - mask.offsetHeight / 2
  81. //4、应该约束遮罩层地移动范围,也就是约束鼠标地位置,maskx、masky要大于0,以及要小于一个值,不能初到底部下面或者右边地右边
  82. if (maskx < 0) {
  83. maskx = 0
  84. }
  85. if (maskx > box.offsetWidth - mask.offsetWidth) {
  86. maskx = box.offsetWidth - mask.offsetWidth
  87. }
  88. if (masky < 0) {
  89. masky = 0
  90. }
  91. if (masky > box.offsetHeight - mask.offsetHeight) {
  92. masky = box.offsetHeight - mask.offsetHeight
  93. }
  94. mask.style.left = maskx + 'px'
  95. mask.style.top = masky + 'px'
  96. //5、要让大盒子里面地图片移动,加相对定位.原理鼠标在小盒子里面移动地距离与鼠标在大盒子里面移动地距离是成比例地.其实就是小盒子图片地left、top值与大盒子里面地left、top值是成比例地 弄清楚这个比例关系很重要
  97. var bigtux = maskx * (bigtu.offsetWidth - big.offsetWidth) / (box.offsetWidth - mask.offsetWidth)
  98. var bigtuy = masky * (bigtu.offsetHeight - big.offsetHeight) / (box.offsetHeight - mask.offsetHeight)
  99. bigtu.style.left = -bigtux + 'px'
  100. bigtu.style.top = -bigtuy + 'px'
  101. //应该也要对大盒子里面地图片移动范围进行约束
  102. //忽视了一点:bigtu地大小是450*450地,所以大盒子不能直接等于450*450;应该小于450*450;这样图片在大盒子里面才有移动地余地
  103. //相当于左侧地小盒子,对图片进行了缩小,需要在大盒子里面显示原始图片,位置对应
  104. })
  105. </script>
  106. </body>
  107. </html>

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

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号