前端之放大镜
实现效果：悬浮小图，显示放大镜和大图，放大镜只能在小图内移动并且往右移动的话，大图往左移动，
实现代码如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>magnifier</title> 6 <style> 7 *{ 8 margin: 0; 9 } 10 .outer .small_box{ 11 height: 350px; 12 width: 350px; 13 border: dashed gray 2px; 14 position: relative; 15 } 16 .outer .small_box .float{ 17 height: 150px; 18 width: 150px; 19 background-color: dodgerblue; 20 opacity: 0.6; 21 position: absolute; 22 display: none; 23 } 24 .outer .big_box{ 25 height: 400px; 26 width: 400px; 27 border: 2px red solid; 28 position: absolute; 29 left: 354px; 30 top: 0px; 31 overflow: hidden; 32 display: none; 33 z-index: 1; 34 } 35 .outer .big_box img{ 36 position: absolute; 37 z-index: 2; 38 } 39 </style> 40 </head> 41 <body> 42 <div class="outer"> 43 <div class="small_box"> 44 <div class="float"></div> 45 <img src="image/small.jpg"> 46 </div> 47 <div class="big_box"> 48 <img src="image/big.jpg"> 49 </div> 50 </div> 51 52 <script src="jquery-1.8.2.js"></script> 53 <script> 54 $('.small_box').mouseover(function () { 55 $('.float').css('display','block'); 56 $('.big_box').css('display','block'); 57 }) 58 $('.small_box').mouseout(function () { 59 $('.float').css('display','none'); 60 $('.big_box').css('display','none'); 61 }) 62 63 $('.small_box').mousemove(function (e) { 64 var _event = e || window.event; 65 var float_width_half = $('.float').width()/2; 66 var float_height_half = $('.float').height()/2; 67 var float_new_left = _event.clientX - float_width_half; 68 var float_new_top = _event.clientY - float_height_half; 69 70 var small_box_width = $('.small_box').width(); 71 var float_width = $('.float').width(); 72 var mux_width = small_box_width-float_width; 73 if(float_new_left<0){ 74 float_new_left=0 75 } 76 if(float_new_left>mux_width){ 77 float_new_left=mux_width 78 } 79 var small_box_height = $('.small_box').height(); 80 var float_height = $('.float').height(); 81 var mux_height =small_box_height-float_height; 82 if(float_new_top<0){ 83 float_new_top=0 84 } 85 if(float_new_top>mux_height){ 86 float_new_top=mux_height 87 } 88 89 $('.float').css('left',float_new_left+'px'); 90 $('.float').css('top',float_new_top+'px'); 91 92 var percentX = ($('.big_box img').width()-$('.big_box').width())/mux_width; 93 var percentY = ($('.big_box img').height()-$('.big_box').height())/mux_height; 94 $('.big_box img').css('left',-percentX*float_new_left+'px'); 95 $('.big_box img').css('top',-percentY*float_new_top+'px'); 96 }) 97 </script> 98 </body> 99 </html>
