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

编程挑战

通过课程的学习，你已经了解了放大镜的实现原理和使用原生JS实现一个简单的放大镜。请试着使用jQuery技术，实现一个现实中经常会用到的放大镜特效。

任务

1. 使用jQuery技术，实现放大镜特效，要求鼠标浮在产品图片上时，图片区域进行局部放大显示。

2. 页面样式可以发挥想象，自行设计。

index.html 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>放大镜</title>
  6. <script src="http://libs.baidu.com/jquery/1.10.0/jquery.min.js"></script>
  7.  
  8. <style type="text/css">
  9. * {
  10. margin: 0;
  11. padding: 0
  12. }
  13.  
  14. #demo {
  15. display: block;
  16. width: 400px;
  17. height: 255px;
  18. margin: 50px;
  19. position: relative;
  20. border: 1px solid #ccc;
  21. }
  22.  
  23. #small-box {
  24. position: relative;
  25. z-index: 1;
  26. }
  27.  
  28. #float-box {
  29. display: none;
  30. width: 160px;
  31. height: 120px;
  32. position: absolute;
  33. background: #ffffcc;
  34. border: 1px solid #ccc;
  35. filter: alpha(opacity=50);
  36. opacity: 0.5;
  37. cursor: move;
  38. }
  39.  
  40. #mark {
  41. position: absolute;
  42. display: block;
  43. width: 400px;
  44. height: 255px;
  45. z-index: 10;
  46. background: #fff;
  47. filter: alpha(opacity=0);
  48. opacity: 0;
  49. cursor: move;
  50. }
  51.  
  52. #big-box {
  53. display: none;
  54. position: absolute;
  55. top: 0;
  56. left: 460px;
  57. width: 400px;
  58. height: 300px;
  59. overflow: hidden;
  60. border: 1px solid #ccc;
  61. z-index: 1;;
  62. }
  63.  
  64. #big-box img {
  65. position: absolute;
  66. z-index: 5
  67. }
  68. </style>
  69.  
  70.  
  71.  
  72. </head>
  73. <body>
  74. <div id="demo">
  75. <div id="small-box">
  76. <div id="mark"></div>
  77. <div id="float-box"></div>
  78. <img src="http://img1.sycdn.imooc.com//537d77fb0001559d04000255.jpg"/>
  79. </div>
  80. <div id="big-box">
  81. <img src="http://img1.sycdn.imooc.com//537d781b0001c04210240654.jpg"/>
  82. </div>
  83. </div>
  84. </body>
  85. </html>
返回课程