很早的一个效果,今天偶然用到
body {
margin: 0;
padding: 0;
overflow: hidden;
border: 0;
height: 100%;
width: 100%;
}
#handDiv {
width: 40px;
height: 40px;
background: url("123.png");
position: absolute;
display: none;
}
window.onload = function() {
var oTop = document.getElementById("handDiv");
document.getElementById("leftdiv").onmousemove = function(event) {
document.getElementById("handDiv").style.display="block";
var oEvent = event || window.event;
var scrollleft = document.documentElement.scrollLeft || document.body.scrollLeft;
var scrolltop = document.documentElement.scrollTop || document.body.scrollTop;
oTop.style.left = oEvent.clientX + window.screen.availWidth / 2 + 10 + "px";
oTop.style.top = oEvent.clientY + scrolltop + 10 + "px";
}
document.getElementById("leftdiv").onmousedown = function(event) {
document.getElementById("handDiv").style.display="block";
var oEvent = event || window.event;
var scrollleft = document.documentElement.scrollLeft || document.body.scrollLeft;
var scrolltop = document.documentElement.scrollTop || document.body.scrollTop;
oTop.style.left = oEvent.clientX + window.screen.availWidth / 2 + "px";
oTop.style.top = oEvent.clientY + scrolltop + "px";
}
document.getElementById("leftdiv").onmouseout = function(event) {
document.getElementById("handDiv").style.display="none";
}
document.getElementById("rightdiv").onmousemove = function(event) {
document.getElementById("handDiv").style.display="block";
var oEvent = event || window.event;
var scrollleft = document.documentElement.scrollLeft || document.body.scrollLeft;
var scrolltop = document.documentElement.scrollTop || document.body.scrollTop;
oTop.style.left = oEvent.clientX - window.screen.availWidth / 2 + "px";
oTop.style.top = oEvent.clientY + scrolltop + "px";
}
document.getElementById("rightdiv").onmousedown = function(event) {
document.getElementById("handDiv").style.display="block";
var oEvent = event || window.event;
var scrollleft = document.documentElement.scrollLeft || document.body.scrollLeft;
var scrolltop = document.documentElement.scrollTop || document.body.scrollTop;
oTop.style.left = oEvent.clientX - window.screen.availWidth / 2 + "px";
oTop.style.top = oEvent.clientY + scrolltop + "px";
}
document.getElementById("rightdiv").onmouseout = function(event) {
document.getElementById("handDiv").style.display="none";
}
}