前端之放大镜

最新推荐文章于 2024-07-12 21:49:18 发布

weixin_34132768

最新推荐文章于 2024-07-12 21:49:18 发布

阅读量491

点赞数

文章标签：前端 ViewUI

原文链接：http://www.cnblogs.com/wenxianfeng/p/10356819.html

版权

实现效果：悬浮小图，显示放大镜和大图，放大镜只能在小图内移动并且往右移动的话，大图往左移动，

实现代码如下：

 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>