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

最新推荐文章于 2023-10-19 20:54:07 发布

like-Betty

最新推荐文章于 2023-10-19 20:54:07 发布

阅读量1.9k

点赞数

分类专栏： js简单实现文章标签： js

本文链接：https://blog.csdn.net/u012309349/article/details/49248149

版权

js简单实现专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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

like-Betty

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
在一个方框内上下左右移动图片

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> div{ width: 500px; height: 500px; border: 1px soli
复制链接

扫一扫

专栏目录