4-3 编程练习
本节编程练习不计算学习进度，请电脑登录imooc.com操作

编程练习

根据所学知识，补充完整代码，实现课程中的放大镜效果，当鼠标移到产品小图片之上时，右侧实现同步局部放大的放大镜效果。

温馨提示:完成任务后，请验证是否与实践描述效果一致，如一致，恭喜您，你已经掌握此技能，否则，请重复学习此节内容。

任务

请编写mark层的onmousemove事件的响应代码，实现右侧局部放大图片跟随鼠标同步定位。

提示：

回顾一下课程所学的内容，开通脑筋：

1.需要捕获事件。

2.获取鼠标位置。

3.通过计算设置右侧图片的位置，并要注意鼠标的边界问题。

 

index.html 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>放大镜</title>
  6. <style>
  7.         * {
  8. margin: 0;
  9. padding: 0
  10.         }
  11.  
  12.         #demo {
  13. display: block;
  14. width: 400px;
  15. height: 255px;
  16. margin: 50px;
  17. position: relative;
  18. border: 1px solid #ccc;
  19.         }
  20.  
  21.         #small-box {
  22. position: relative;
  23. z-index: 1;
  24.         }
  25.  
  26.         #float-box {
  27. display: none;
  28. width: 160px;
  29. height: 120px;
  30. position: absolute;
  31. background: #ffffcc;
  32. border: 1px solid #ccc;
  33. filter: alpha(opacity=50);
  34. opacity: 0.5;
  35. cursor: move;
  36.         }
  37.  
  38.         #mark {
  39. position: absolute;
  40. display: block;
  41. width: 400px;
  42. height: 255px;
  43. z-index: 10;
  44. background: #fff;
  45. filter: alpha(opacity=0);
  46. opacity: 0;
  47. cursor: move;
  48.         }
  49.  
  50.         #big-box {
  51. display: none;
  52. position: absolute;
  53. top: 0;
  54. left: 460px;
  55. width: 400px;
  56. height: 300px;
  57. overflow: hidden;
  58. border: 1px solid #ccc;
  59. z-index: 1;;
  60.         }
  61.  
  62.         #big-box img {
  63. position: absolute;
  64. z-index: 5
  65.         }
  66. </style>
  67. <script>
  68.  
  69.         //页面加载完毕后执行
  70. window.onload = function () {
  71.  
  72. varobjDemo = document.getElementById("demo");
  73. varobjSmallBox = document.getElementById("small-box");
  74. varobjMark = document.getElementById("mark");
  75. varobjFloatBox = document.getElementById("float-box");
  76. varobjBigBox = document.getElementById("big-box");
  77. varobjBigBoxImage = objBigBox.getElementsByTagName("img")[0];
  78.  
  79. objMark.onmouseover = function () {
  80. objFloatBox.style.display = "block";
  81. objBigBox.style.display = "block";
  82.             }
  83.  
  84. objMark.onmouseout = function () {
  85. objFloatBox.style.display = "none";
  86. objBigBox.style.display = "none";
  87.             }
  88.  
  89. objMark.onmousemove = function (ev) {
  90.  
  91. //请补充此处鼠标移动时的响应方法
  92.             }
  93.         }
  94. </script>
  95. </head>
  96. <body>
  97. <div id="demo">
  98. <div id="small-box">
  99. <div id="mark"></div>
  100. <div id="float-box"></div>
  101. <img src="http://img1.sycdn.imooc.com//537d77fb0001559d04000255.jpg"/>
  102. </div>
  103. <div id="big-box">
  104. <img src="http://img1.sycdn.imooc.com//537d781b0001c04210240654.jpg"/>
  105. </div>
  106. </div>
  107. </body>
  108. </html>
下一节