前端之放大镜
程序员文章站
2024-01-24 10:38:46
实现效果：悬浮小图，显示放大镜和大图，放大镜只能在小图内移动并且往右移动的话，大图往左移动， 实现代码如下： ......
实现效果：悬浮小图，显示放大镜和大图，放大镜只能在小图内移动并且往右移动的话，大图往左移动，
实现代码如下：
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>