码迷,mamicode.com
首页 > 移动开发 > 详细

使用JS控制页面元素位置移动

时间:2015-06-18 23:58:55      阅读:471      评论:0      收藏:0      [点我收藏+]

标签:

主要使用一下两个函数

parseInt()

substr()

 

首先获取元素的ID

var j = document.getElementById("ID");

然后获取位置属性

var top = j.style.top
//这里以控制元素上下位置距离,控制左右的话把top换成left即可    

需要注意的是,使用此方法需要把要移动的元素设置为绝对定位,样式中添加    position:absolute;

 

现在开始移动元素位置了,因为使用方法获取的元素应该为(“0px”)为string字符串类型,我们需要将他转换成number数字。并去掉后面的“px”;

j=parseInt(j.substr(0,j.length-2));

 最后简单的加减法

j.style.top=(j+10)+"px";
//top属性增加及位置向下移动

 

 

附上一大块代码参考

<head>
<meta charset="utf-8">
    <script type="text/javascript" src="2.js"></script>
    <script >
        function move(fangxiang){

        var per = document.getElementById("cc");
        var j=per.style.top;
        var k=per.style.left;
        j=parseInt(j.substr(0,j.length-2));
        k=parseInt(k.substr(0,k.length-2));

        switch(fangxiang)
        {
            case 1:
                per.style.top=(j-10)+"px";
                break;
            case 2:
                per.style.top=(j+10)+"px";
                break;
            case 3:
                per.style.left=(k-10)+"px";
                break;
            case 4:
                per.style.left=(k+10)+"px";
                break;
        }
    }

    </script>
</head>
<body>
<div style="width:500;height:500;background-color:pink">
    <div style="background-color:blue;width:50;height:50;position:absolute;left:40px;top:40px" id="cc"></div>
</div>

<button style="margin-left:30px;" onclick="move(1)">W</button><br>
<button onclick="move(3)">A</button>
<button onclick="move(2)">S</button>
<button  onclick="move(4)">D</button><br>

</body>

 

 

 

 

stringObject.substr(start,length)

 

参数描述
start 必需。要抽取的子串的起始下标。必须是数值。如果是负数,那么该参数声明从字符串的尾部开始算起的位置。也就是说,-1 指字符串中最后一个字符,-2 指倒数第二个字符,以此类推。
length 可选。子串中的字符数。必须是数值。如果省略了该参数,那么返回从 stringObject 的开始位置到结尾的字串。

使用JS控制页面元素位置移动

标签:

原文地址:http://www.cnblogs.com/lanjianwc/p/4587189.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!