<DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd>
<html>
<head>
<!--首先把图片放上来给图片一个id-->
<!--选择事件-->
<!--获得图片的坐标-->
<!--获得页面其他地方的坐标-->
<!--让图片移动到鼠标点击的坐标上-->
<!--插入脚本-->
<script language="javascript" type="text/javascript">
<!--将页面内所有元素的一个集合定义到 ie, 将里面所有id集合定义到nn6里, 将否 定义到 isdrag里面, 定义 x y, 定义 doby-->
var ie=document.all;
var nn6=document.getElementById && !document.all;
var isdrag=false;
var dobj;
var x,y;
//var setp=10;
<!--定义dianji函数-->
function dianji()
{
<!--获得dian 的id 点击的事件-->
document.getElementById("dian").onmouseup=function(oEvent)
{
<!--判断事件是用点击左键还是右键-->
if (!oEvent) oEvent=window.event;
if (oEvent.button==0)
{
<!--获得在图片里距左的坐标-->
x=document.body.scrollLeft+event.clientX;
<!--获得在图片里距上的坐标-->
y=document.body.scrollTop+event.clientY;
//alert(x);
//alert(y);
}
}
}
<!--定义mousePosition函数-->
function mousePosition(ev){
<!--判断页面的坐标 返回页面坐标-->
if(ev.pageX || ev.pageY){
return {x:ev.pageX, y:ev.pageY};
}
return {
<!--获得页面坐标距左的坐标 获得页面距上的坐标-->
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
y:ev.clientY + document.body.scrollTop - document.body.clientTop
};
}
<!--定义mouseMove函数-->
function mouseMove(ev){
//var img1 = document.getElementById("dian");
// if(img1.style.pixelLeft <(main.clientWidth-img1.clientWidth-setp)){
// img1.style.pixelLeft =img1.style.pixelLeft+setp;
// }
<!--循环图片到下一个坐标-->
ev = ev || window.event;
var mousePos = mousePosition(ev);
for (i=0;i<100;i++)
{
for(j=0;j<1000;j++){document.getElementById("numText").value=j;}
document.getElementById("tupian").style.left = i;
document.getElementById("tupian").style.top = i;
}
}
<!--获得moseMove-->
document.onmousedown = mouseMove;
</script>
</head>
<body>
<!--插入一个输入框-->
<input type="text" size="2" id = "numText" />
<!--定义div和图片-->
<div id="tupian" style="position:relative;top:10;left:10;"><img src="图片111.jpg" id="dian" onmousedown="dianji()"></div>
</body>
</html>
12月27号图片移动(第54天的学习)
猜你喜欢
转载自xjwolaile.iteye.com/blog/1755248
今日推荐
周排行