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 650px; 26 height:650px; 27 border-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>
