在一个方框内上下左右移动图片

作者: 一个想进步的小白 | 来源:发表于2015-10-16 22:39 被阅读500次

在一个方框内上下左右移动图片
我认为的轮播图
移动端扫一扫车牌，识别出结果
审核优化笔记
ios textfiled修改
07 - Hero Character Mobility
Defold学习笔记001
OpenGL—实现正方形在屏幕中移动
如何应用SpriteKit的Camera实现游戏中的Endles
多线程

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{
            width: 500px;
            height: 500px;
            border: 1px solid red;
            position: relative;
        }
        img{
            width: 100px;
            height: 100px;
            position: absolute;
            top: 0px;
            left: 0px;
        }
    </style>
</head>
<body>
    <div>
        <img src="1.jpg" alt="">
    </div>
    <table>
        <tr>
            <td></td>
            <td><button value="up">向上</button></td>
            <td></td>
        </tr>
        <tr>
            <td><button value="left">向左</button></td>
            <td></td>
            <td><button value="right">向右</button></td>
        </tr>
        <tr>
            <td></td>
            <td><button value="down">向下</button></td>
            <td></td>
        </tr>
    </table>
    <script>
    window.onload=function(){
        var img = document.getElementsByTagName('img')[0];
        var imgStyle = document.styleSheets[0].rules[1];//html中第一个css链接中的第二个css选择器。
        var imgTop = parseInt(imgStyle.style.top);
        var imgLeft = parseInt(imgStyle.style.left);
        var imgWidth = parseInt(imgStyle.style.width);
        var imgHeight = parseInt(imgStyle.style.height);
        //div的宽和高
        var div = document.getElementsByTagName("div")[0];
        var divStyle = document.styleSheets[0].rules[0];/html中第一个css链接中的第一个css选择器。
        var divWidth = parseInt(divStyle.style.width);
        var divHeight = parseInt(divStyle.style.height);
        var button = document.getElementsByTagName("button");

        //增加onclick事件
        for(var i in button){
            button[i].onclick = Move;
        }
        function Move(){
            if(this.value == "up"){
                if(imgTop == 0){
                    window.alert("已经到达顶部，不能再向上移动了！");
                }else{
                    imgTop = imgTop - 100;
                }           
            }else if(this.value == "down"){
                if((imgTop+imgHeight) == divHeight){
                    window.alert("已经到达底部，不能再向下移动了！");
                }else{
                    imgTop = imgTop + 100;
                }   
            }else if(this.value == "left"){
                if(imgLeft == 0){
                    window.alert("已经到达左边边界，不能再向左移动了！");
                }else{
                    imgLeft = imgLeft - 100;
                }           
            }else if(this.value == "right"){
                if((imgLeft+imgWidth) == divWidth){
                    window.alert("已经到达右边边界，不能再向右移动了！");
                }else{
                    imgLeft = imgLeft + 100;
                }               
            }

            imgStyle.style.top = imgTop + "px";
            imgStyle.style.left = imgLeft + "px";
        }
    }       
    </script>
</body>
</html>

** 初始效果预览： **

捕获.JPG

遇到的问题：

1.button[i].onclick = Move;此处不能用Move(),否则会调用Move()函数。
2.利用parseInt函数即可从"100px"中提取出数字100。

有四个按钮，onClick事件都增加的是Move()函数，在其中使用this关键字即可获得是哪个button调用的Move()，从而获得value属性。而不用分别为每个按钮增加一个单独的函数。
4.使用document.styleSheets可访问外部css。