<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style>
*{
margin:0px;
padding:0px;
list-style: none;
}
#parent{
width: 600px;
height: 12px;
position: relative;
top: 12px;
left: 200px;
background: #ff00ff;
}
#childer{
width: 12px;
height: 12px;
position: absolute;
background: #675389;
}
#div1{
width: 300px;
height: 300px;
background: #ff8876;
margin:100px auto;
opacity: 0;
filter:alpha(opacity=0);
}
#div3{
position: relative;
top:10px;
left:50px;
width: 300px;
height: 300px;
overflow: hidden;
border:1px solid #ff00ff;
}
#div4{
position: absolute;
top:0px;
left:0px;
word-break: break-all;
word-wrap: break-word;
}
</style>
<script>
function getpos(ev){
var scrolltop=document.documentElement.scrollTop||document.body.scrollTop;
var scrollleft=document.documentElement.scrollLeft||document.body.scrollLeft;
return {x:ev.clientX+scrollleft,y:ev.clientY+scrolltop};
}
function addEvent(obj,even,fn){ /*事件绑定*/
return obj.addEventListener?obj.addEventListener(even,fn,false):obj.attachEvent("on"+even,fn);
}
function unEvent(obj,even,fn){
return obj.removeEventListener?obj.removeEventListener(even,fn,false):obj.detachEvent("on"+even,fn);
}
window.onload=function(){
var oparent=document.getElementById("parent");
ochildes=document.getElementById("childer");
odiv1=document.getElementById("div1");
odiv3=document.getElementById("div3");
odiv4=document.getElementById("div4");
disX=0;
disY=0;
addEvent(ochildes,"mousedown",function(ev){
var eventer=ev||event;
pos=getpos(eventer);
disX=pos.x-ochildes.offsetLeft;
disY=pos.y-ochildes.offsetTop;
if(ochildes.setCapture){
ochildes.onmousemove=mouseMove;
ochildes.onmouseup=mouseUp;
ochildes.setCapture();
return false;
}else{
document.onmousemove=mouseMove;
document.onmouseup=mouseUp;
return false;
}
})
function mouseMove(ev){
var eventer=ev||event;
pos=getpos(eventer);
ochildes.style.left=pos.x-disX+"px";
ochildes.style.top=0+"px";
if(ochildes.offsetLeft<0){
ochildes.style.left=0+"px";
}
if(ochildes.offsetLeft>oparent.offsetWidth-ochildes.offsetWidth){
ochildes.style.left=oparent.offsetWidth-ochildes.offsetWidth+"px";
}
var scale=ochildes.offsetLeft/(oparent.offsetWidth-ochildes.offsetWidth);
odiv1.style.opacity=scale;
odiv1.style.filter="alpha(opacity:"+scale*100+")";
odiv4.style.top=-(scale*(odiv4.offsetHeight-odiv3.offsetHeight))+"px";
}
function mouseUp(){
unEvent(ochildes,"mousedown");
this.onmousedown=null;
this.onmousemove=null;
/* if(ochildes.releaseCapture){
ochildes.releaseCapture();
} */
}
}
</script>
</head>
<body>
<div id="parent">
<div id="childer"></div>
</div>
<div id="div1"></div>
<div id="div3">
<div id="div4">sssssssssssssssssssssssss
ssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssvvvv
</div>
</div>
</body>
</html>
