<!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">
<head>
<style>
body{
width:1400px;
height:1400px;
}
#a{
width:300px;
height:100px;
background:red;
}
</style>
<script src="jquery-1.7.1.min.js"></script>
<script>
var isie6 = window.XMLHttpRequest?false:true;
function setBox(targId1,targId2){
var targ1 = document.getElementById(targId1);
var targ2 = document.getElementById(targId2);
targ2.style.display='none';
if(isie6){
targ1.style.position = 'absolute';
targ2.style.position="absolute";
window.onscroll = function(){
var heiTemp = (document.documentElement.scrollTop || document.body.scrollTop)+document.documentElement.clientHeight-targ1.offsetHeight;
var widTemp = (document.documentElement.scrollLeft || document.body.scrollLeft)+document.documentElement.clientWidth-targ1.offsetWidth;
targ1.style.top =heiTemp +'px';
targ1.style.left =widTemp +'px';
targ2.style.top=(heiTemp-targ2.clientHeight-1)+'px';
targ2.style.left=(widTemp-targ2.clientWidth-1)+'px';
}
}
else
{
targ1.style.position = 'fixed';
targ2.style.position = 'fixed';
}
targ1.style.right = '0px';
targ1.style.bottom = '0px';
targ2.style.right = targ1.clientWidth+'px';
targ2.style.bottom = targ1.clientHeight+'px';
targ1.onmouseover = function(){
//targ2.style.display='block';
$(targ2).show("slow");
}
targ1.onmouseout=function(){
//targ2.style.display='none';
$(targ2).hide("slow");
}
}
</script>
</head>
<body onload="setBox('a','b')">
<div id='a'>test</div>
<div id='b' style="width:100px;height:100px;border:1px solid black;">test2</div>
</body>
</html>
- 1
- 2
- 3
前往页