看到有人求这种效果的实现,
一时心血来潮,
用jquery+css实现了一个简单的,
以备后用
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>test</title>
<script type="text/javascript" src="jquery-1.3.2.js" ></script>
<script type="text/javascript">
function on_mousemove(id) {
if (event.button == 1) {
if (x != 0) {
x = event.clientX - x1;
y = event.clientY - y1;
//alert(document.getElementById(id));
$("#" + id).css("left", ($("#" + id).position().left + x) + "px");
$("#" + id).css("top", ($("#" + id).position().top + y) + "px");
x1 = event.clientX;
y1 = event.clientY;
} else {
x = x1 = event.clientX;
y = y1 = event.clientY;
}
} else {
x = x1 = y = y1 = 0;
}
return false;
}
</script>
</head>
<body style="1000px; height:800px;">
<div id="imgObj" style="position:absolute;"><img style="600px; height:400px;" src="lilies.jpg"></img></div>
<div id="loadDiv" onmousemove="on_mousemove('imgObj');" style="position:absolute; FILTER:alpha(opacity=40); BACKGROUND-COLOR:#666; opacity:0.7; 800px; height:600px; text-align:center;">
<table style="100%; margin-top:100px">
<tr align="center" style="height:100px; 100%">
<td style="40%"></td>
<td style="20%; background-color: White;">
</td>
<td style="40%"></td>
</tr>
</table>
</div>
</body>
</html>
发现上面代码只能用于IE浏览器，而且js代码也比较混乱，再整理一个可以兼容浏览器的版本。。。。<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>test</title>
<script type="text/javascript" src="jquery-1.6.1.js" ></script>
<script type="text/javascript">
$(document).ready(function(){
var mousekey = 0;
$("#loadDiv").mousedown(function(event){
mousekey = 1;
});
$("#loadDiv").mouseup(function(event){
mousekey = 0;
});
$("#loadDiv").mousemove(function(event){
$("#viewTd").html(event.pageX + ", " + event.pageY);
if (mousekey == 1) {
if (x != 0) {
x = event.pageX - x1;
y = event.pageY - y1;
$("#imgObj").css("left", ($("#imgObj").position().left + x) + "px");
$("#imgObj").css("top", ($("#imgObj").position().top + y) + "px");
x1 = event.pageX;
y1 = event.pageY;
} else {
x = x1 = event.pageX;
y = y1 = event.pageY;
}
} else {
x = x1 = y = y1 = 0;
}
return false;
});
});
</script>
</head>
<body style="1000px; height:800px;">
<div id="imgObj" style="position:absolute;"><img style="600px; height:400px;" src="foren.jpg"></img></div>
<div id="loadDiv" style="position:absolute; FILTER:alpha(opacity=40); BACKGROUND-COLOR:#666; opacity:0.7; 800px; height:600px; text-align:center;">
<table style="100%; margin-top:100px">
<tr align="center" style="height:100px; 100%">
<td style="40%"></td>
<td id="viewTd" style="20%; background-color: White;">
<input type="text" id="txtTest" value="abc"/>
</td>
<td style="40%"></td>
</tr>
</table>
</div>
</body>
</html>