首页 > 语言 > JavaScript > 正文

javascript 实现 原路返回

2024-05-06 14:47:09
字体:
来源:转载
供稿:网友

css代码

代码如下:
<style type="text/css">
        * {
            margin: 0px;
            padding: 0px;
            font-family: "micsoft yahei","微软雅黑";
            font-size: 15px;
        }
        div{
            width: 50px;
            height: 50px;
            background: #f00;
            border-radius:5px ;
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;
            cursor: pointer;
            position:  absolute;
            top: 60px;
            left: 30px;
        }
        input{
            position: absolute;
            top: 10px;
            left: 10px;
            padding: 3px;
            cursor: pointer;
        }
    </style>

html代码

代码如下:
 <body>
 <input type="button" value="原路返回"/>
 <div></div>
 </body>

javascript代码

代码如下:
<script type="text/javascript">
          //1、以鼠标在div上点击触发为开始
          //2、点击鼠标移动时触发鼠标移动事件 向数组内注入数据(移动的坐标)
          //3、以鼠标从div上移开为结束
          //4、点击“原路返回”按钮遍历数组(移动的坐标) 定时触发数组内的坐标移动div 达到”返回“的功能
            window.onload=function(){

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表

图片精选