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>
