查看: 2008|回复: 0

[DIV/CSS] 使用JS实现具有凸透镜效果的放大镜

发表于 2018-2-26 08:58:46

基本布局:

  1. 输入代码<><!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title></title>
  6. <link rel="stylesheet" type="text/css" href="index.css"/>
  7. <script src="index.js" type="text/javascript" charset="utf-8"></script>
  8. </head>
  9. <body>
  10. <div class="img-box">
  11. <img src="1.png"/>
  12. <div class="fdj" style="display: none;">
  13. <!--放大镜里面也放一张图片-->
  14. <img src="1.png"/>
  15. </div>
  16. </div>
  17. <div class="show-box" style="display: none;">
  18. <img src="1.png"/>
  19. </div>
  20. </body>
  21. </html>
复制代码

CSS样式:

  1. .img-box{
  2. position: relative;
  3. float: left;
  4. width: 400px;
  5. height: 300px;
  6. border: 10px solid #000;
  7. margin-right: 50px;
  8. margin: 50px;
  9. }
  10. .img-box img{
  11. width: 100%;
  12. height: 100%;
  13. }
  14. .fdj{
  15. position: absolute;
  16. top: 0;
  17. left: 0;
  18. width: 100px;
  19. height: 100px;
  20. overflow: hidden;
  21. border-radius: 50px;
  22. border: 1px solid rgba(0,0,0,.5);
  23. }
  24. .fdj img{
  25. position: absolute;
  26. top: 0;
  27. left: 0;
  28. /*放大镜里面的图片是原图片的1.02倍,要设置的很小*/
  29. width: 408px;
  30. height:306px;
  31. }
  32. .show-box{
  33. float: left;
  34. position: relative;
  35. width: 400px;
  36. height: 400px;
  37. overflow: hidden;
  38. border-radius: 200px;
  39. }
  40. .show-box img{
  41. position: absolute;
  42. top: 0;
  43. left: 0;
  44. width: 1600px;
  45. height: 1200px;
  46. }
复制代码

JS:

  1. window.onload = function(){
  2. //获取元素
  3. var imgBox = document.querySelector('.img-box');//图片盒子
  4. var fdj = document.querySelector('.fdj');//放大镜
  5. var img1 = fdj.querySelector('img');//放大镜里面的图片
  6. var showBox = document.querySelector('.show-box');//显示大图的盒子
  7. var img2 = showBox.querySelector('img');//显示放大的图片
  8. imgBox.onmousemove = function(ev){
  9. var ev = ev||event;
  10. //显示放大镜
  11. fdj.style.display = 'block';
  12. showBox.style.display = 'block';
  13. //设置放大镜的定位位置
  14. var left = ev.clientX - imgBox.offsetLeft - imgBox.clientLeft - fdj.offsetWidth/2;
  15. var top = ev.clientY - imgBox.offsetTop - imgBox.clientTop - fdj.offsetHeight/2;
  16. //边界处理
  17. if(left<0){
  18. left = 0;
  19. }else if(left>imgBox.clientWidth-fdj.offsetWidth){
  20. left = imgBox.clientWidth-fdj.offsetWidth
  21. }
  22. if(top<0){
  23. top = 0;
  24. }else if(top>imgBox.clientHeight-fdj.offsetHeight){
  25. top = imgBox.clientHeight-fdj.offsetHeight;
  26. }
  27. //放大镜位置的变化
  28. fdj.style.left = left + 'px';
  29. fdj.style.top = top + 'px';
  30. //放大镜图片偏移量
  31. var l = fdj.offsetWidth*(left/fdj.offsetWidth);
  32. var t = fdj.offsetHeight*(top/fdj.offsetHeight);
  33. //显示图片偏移量
  34. var left_ = showBox.offsetWidth*(left/fdj.offsetWidth);
  35. var top_ = showBox.offsetHeight*(top/fdj.offsetHeight);
  36. //放大镜
  37. img1.style.left = -l + 'px';
  38. img1.style.top = -t+ 'px';
  39. //显示
  40. img2.style.left = -left_ + 'px';
  41. img2.style.top = -top_ + 'px';
  42. };
  43. imgBox.onmouseout =function(){
  44. fdj.style.display = 'none';
  45. showBox.style.display = 'none';
  46. };
  47. };
复制代码


回复

使用道具 举报