在网页中用鼠标移动一张图片的位置
发布网友
发布时间：2022-04-26 03:25
共5个回答
热心网友
时间：2022-06-20 11:54
经过调试，可以运行.还可以扩展.
<html>
<script language="javascript">
var dragging=false;//用于控制移动DIV
var top;
var left;
var dragStartTop;
var dragStartLeft;
var zoomSizes=[["2000px","1400px"],["1500px","1050px"]];
function init(){
setInnerDivSize(zoomSizes[0][0],zoomSizes[0][1]);
var outerDiv=document.getElementById("outerDiv");
//绑定事件函数
outerDiv.onmousedown=startMove;
outerDiv.onmousemove=processMove;
outerDiv.onmouseup=stopMove;
}
function setInnerDivSize(width,height){
var innerDiv=document.getElementById("innerDiv");
innerDiv.style.width=width;
innerDiv.style.height=height;
}
function startMove(event){
if(!event)event=window.event;
dragStartLeft=event.clientX;
dragStartTop=event.clientY;
var innerDiv=document.getElementById("innerDiv");
top = stripPx(innerDiv.style.top);
left = stripPx(innerDiv.style.left);
dragging=true;
return false;
}
function processMove(event){
if(!event)event=window.event;
var innerDiv=document.getElementById("innerDiv");
if(dragging){
innerDiv.style.top=parseFloat(top)+(event.clientY-dragStartTop);
innerDiv.style.left=parseFloat(left)+(event.clientX-dragStartLeft);
}
}
function stopMove(){
var innerDiv=document.getElementById("innerDiv");
innerDiv.style.cursor="";
dragging=false;
}
function stripPx(value){
if(value=="")return 0;
return parseFloat(value.substring(0,value.length-2));
}
</script>
<body onload="init()">
<style type="text/css">
h1{
font:20pt sans-serif;
}
#outerDiv{
height:600px;
width:800px;
border:1px solid black;
position:relative;
overflow:hidden;
}
#innerDiv{
position:relative;
left:0px;
top:0px;
}
</style>
<div id="outerDiv"><!-- 定义两个DIV,outerDiv控制innerDiv的移动范围-->
<div id="innerDiv" style="z-index:0">
<H1>Hello World</H1><!--将H1标签换成你的图片-->
</div>
</div>
</body>
</html>
热心网友
时间：2022-06-20 11:54
<div id="myDiv" src="logo.gif" ondrag="doDrag();" onmouseover="this.style.cursor='hand'" style="position:absolute;left=100;top=100;" onmousedown="doMouseDown();">
<a href="#" onclick="return false"><h1>wlecome</h1></a>
</div>
<script>
var orgMouseX;
var orgMouseY;
var orgObjX;
var orgObjY;
function doDrag() {
var myObject=document.all.myDiv;
var x=event.clientX;
var y=event.clientY;
myObject.style.left=x-(orgMouseX-orgObjX);
myObject.style.top=y-(orgMouseY-orgObjY);
}
function doMouseDown() {
orgMouseX=event.clientX;
orgMouseY=event.clientY;
orgObjX=parseInt(document.all.myDiv.style.left);
orgObjY=parseInt(document.all.myDiv.style.top);
}
</script>
热心网友
时间：2022-06-20 11:55
楼上的正解！
效率挺高！
弄了半天也不行，只想到了ondrag.
但是为什么必须要
<a href="#" onclick="return false"><h1>wlecome</h1></a>
我有点想不通。
一直没有这东西，测不通。
热心网友
时间：2022-06-20 11:55
这应该 用JS可以做到吧.
我这里也没有代码,你再去问问别人吧.
热心网友
时间：2022-06-20 11:56
igoogle页面就是这种效果，网址：www.google.com/ig。
去下载回来慢慢研究吧！
