简单HTML

最新推荐文章于 2021-07-01 11:01:58 发布

浮笙笙

最新推荐文章于 2021-07-01 11:01:58 发布

阅读量110

点赞数

本文链接：https://blog.csdn.net/jiangxinyu3/article/details/90742833

版权

实现一个方块点击超链接标签进行左右移动

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title></title>
    <style type="text/css">
        #d{
            width: 100px;
            height: 100px;
            position: absolute;left: 0px; top: 0px;
            background-color: yellowgreen;
            text-align: center;
        }
        .c{
         position: absolute;
   left: -1px;
   top: 100px;
    
        }
        .d{
         position: absolute;
   left: 80px;
   top: 100px;
        }
  </style>
    <script type="text/javascript">
        var a=0;
        function fun1(){
         //获取点击的按钮
         var btnC=document.getElementById("c");
         //获取需要移动的div
         var box=document.querySelector("#d");
         //向左移动位置减50px
         a=a-50;
         box.style.left=a+"px";
        }
       
         function fun2(){
          //获取点击的按钮k
         var btnC=document.getElementById("d");
         //获取需要移动的div
         var box=document.querySelector("#d");
         //向右移动位置加50px;
         a=a+50;
         box.style.left=a+"px";
        }
    </script>
</head>
<body>
    <div id="d"></div>
   <a href="javascript:void(0)" onclick="fun1()" class="c" >向左移动</a>
    <a href="javascript:void(0)" onclick="fun2()" class="d">向右移动</a>
    </div>
</body>
</html>

一：在这段代码中，我们先写一个需要移动的div，然后写一个连接标签用来当做进行左右移动的按钮，给标签一个类名，方便之后调用它。
二：在js部分中，我们需要让按钮有点击效果，因为要向左向右移动，所以写了两个点击的方法。
三：我们需要先获取到需要点击的按钮，所以先获取了按钮，然后获取需要移动的div块。
四：然后声明一个值，用来放左右需要调位置的px，向左就减，向右就加。
五：在css里面调整div块的样式和颜色，按钮的位置等等
以上五步，一个可以左右移动的方块就写好啦！

浮笙笙

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简单HTML

实现一个方块点击超链接标签进行左右移动<!DOCTYPE html><html><head> <meta charset="UTF-8"/> <title></title> <style type="text/css"> #d{ width: 1...
复制链接

扫一扫