JS实现DIV动态修改坐标的代码

Admin | 2015-6-1 9:14:51 | 被阅次数 | 6246

温馨提示!

如果未能解决您的问题，请点击搜索；登陆可复制文章，点击登陆

一、div对象在页面中的标签如下

　　<div id="GetDiv" style="border-width:1px; border-style:dotted; width:1000px; overflow:hidden;">
　　　　这里是div里面的内容
　　</div>

　　二、JS代码如下

　　<script type="text/javascript">
　　function SetDiv()
　　{
　　 var GetDiv1 = document.getElementById("GetDiv");
　　 var x=600-GetDiv1.getBoundingClientRect().left;
　　 var y=1300-GetDiv1.getBoundingClientRect().top;
　　 var k=y/x;//目标地址的Y坐标和X坐标比例，即K
　　 ChangeXY=setInterval("SetXY("+k+")", 10);
　　}
　　function SetXY(k)
　　{
　　 var speedxy = 20 ;//每次改变的位移为N个像素
　　 var div2 = document.getElementById("GetDiv");
　　 var x,y;
　　 x=parseInt(div2.getBoundingClientRect().left)+speedxy;
　　 y=parseInt(x*k);
　　 if(x>600)
　　 {
　　   clearInterval(ChangeXY);//停止计时器
　　 }else
　　 {
   　　 div2.style.marginLeft =x+"px";
    　　div2.style.marginTop =y+"px";
　　 }
　　}
　　</script>