利用 border 实现的图片选区效果，只需一层图一蒙层

最新推荐文章于 2025-07-18 23:22:20 发布

转载最新推荐文章于 2025-07-18 23:22:20 发布 · 128 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/vaal-water/p/3362042.html

本文介绍了一种使用CSS和JavaScript实现的鼠标拖动效果，通过调整元素的边界宽度来改变其位置，同时考虑了IE7及以下浏览器的兼容性问题。

 1 <html>
 2 <style>
 3 #p {
 4      background: url("http://soso5.gtimg.cn/sosopic_j/0/4364167033329994952/0") repeat scroll 0 0 rgba(0, 0, 0, 0);
 5     width:650px;
 6     height:650px;
 7     position:relative;
 8     overflow:hidden;
 9 }
10 #m {
11     width:150px;
12     height:150px;
13     position:absolute;
14     left:0px;
15     top:0px;
16     border: solid rgba(220, 220,220, .5);
17     border-width:300px 650px 650px 300px;
18     background-clip: padding-box;
19     filter:alpha(opacity=50);
20 }
21 </style>
22 <!--[if lte IE 7]>
23 <style>
24 #m {
25     width:650px;
26     height:650px;
27     border-width:300px 200px 200px 300px;
28 }
29 </style
30 
31 <![endif]-->
32 <body>
33 <div id=p>
34     <div id=m></div>
35 </div>
36 <script>
37 var dm = document.getElementById('m')
38 var size = {}
39 size.width = size.height = 150
40 size.Pw = size.Ph = 650
41 var border = {}
42 border.left = border.top = 300
43 var ie = dm.currentStyle && (parseInt (dm.currentStyle.width) > size.width)
44 document.getElementById('p').onmousedown =function(ev){
45     ev = ev || window.event
46     var x = ev.clientX
47         ,y= ev.clientY
48     document.body.onmousemove = function(ev){
49         ev = ev || window.event
50         var _x = ev.clientX
51             ,_y= ev.clientY
52         var mx = _x - x
53             ,my = _y -y
54         x = _x , y = _y
55         border.left += mx
56         border.top += my
57         dm.style.borderLeftWidth = border.left + 'px'
58         dm.style.borderTopWidth = border.top + 'px'
59         if (ie){
60             dm.style.borderRightWidth = size.Pw - size.width - border.left + 'px'
61             dm.style.borderBottomWidth = size.Ph - size.height - border.top + 'px'
62         }
63 
64 
65 
66         }
67     document.body.onmouseup = function(){
68         document.body.onmousemove = null
69         document.body.onmouseup = null
70         }
71 
72     }
73 </script>
74 </body>

转载于:https://www.cnblogs.com/vaal-water/p/3362042.html