<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="keyword" content="冒泡排序法"/>
<meta name="description" content="冒泡排序法"/>
<title>动来动去</title>
<style>
*{margin:0;padding:0;}
#bb{width:1024px;height:668px;background:url(1.jpg)no-repeat;overflow:hidden;position:absolute;left:100px;top:100px;}
#cc{width:150px;height:200px;border:2px solid gray;position:absolute;opacity:0;cursor:crosshair;}
#dd{width:600px;height:800px;background:url(11.jpg)no-repeat;position:absolute;left:1144px;top:50px;opacity:0;}
</style>
</head>
<body>
<div id="bb">
<div id="cc"></div>
</div>
<div id="dd"></div>
</body>
<script>
var bb=document.getElementById('bb');
var cc=document.getElementById('cc');
var dd=document.getElementById('dd');
bb.οnmοuseοver=function(){
cc.style.opacity="1"
dd.style.opacity="1"
window.οnmοusemοve=function(event){
X=(event.pageX);
Y=(event.pageY);
//alert(Y);
if(X>=100 && Y>=100 && X<1124 && Y<=768){
cc.style.left=X-100+"px"
dd.style.backgroundPosition=""+4*(100-X)+"px "+4*(100-Y)+"px";
cc.style.top=Y-100+"px"
}
}
}
bb.οnmοuseοut=function(){
cc.style.opacity="0";
dd.style.opacity="0";
}
</script>
<html>
<head>
<meta charset="utf-8"/>
<meta name="keyword" content="冒泡排序法"/>
<meta name="description" content="冒泡排序法"/>
<title>动来动去</title>
<style>
*{margin:0;padding:0;}
#bb{width:1024px;height:668px;background:url(1.jpg)no-repeat;overflow:hidden;position:absolute;left:100px;top:100px;}
#cc{width:150px;height:200px;border:2px solid gray;position:absolute;opacity:0;cursor:crosshair;}
#dd{width:600px;height:800px;background:url(11.jpg)no-repeat;position:absolute;left:1144px;top:50px;opacity:0;}
</style>
</head>
<body>
<div id="bb">
<div id="cc"></div>
</div>
<div id="dd"></div>
</body>
<script>
var bb=document.getElementById('bb');
var cc=document.getElementById('cc');
var dd=document.getElementById('dd');
bb.οnmοuseοver=function(){
cc.style.opacity="1"
dd.style.opacity="1"
window.οnmοusemοve=function(event){
X=(event.pageX);
Y=(event.pageY);
//alert(Y);
if(X>=100 && Y>=100 && X<1124 && Y<=768){
cc.style.left=X-100+"px"
dd.style.backgroundPosition=""+4*(100-X)+"px "+4*(100-Y)+"px";
cc.style.top=Y-100+"px"
}
}
}
bb.οnmοuseοut=function(){
cc.style.opacity="0";
dd.style.opacity="0";
}
</script>
</html>