无为清净楼资源网 Design By www.qnjia.com

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(){
                var oDiv=document.getElementsByTagName("div")[0];
                var oBtn=document.getElementsByTagName("input")[0];
                var time=null,arrTop=[],arrLeft=[];
                oDiv.onmousedown=function(ev){
                    var event=ev || window.event;
                    //获取鼠标在div内的坐标
                    var disX=event.clientX-oDiv.offsetLeft;
                    var disY=event.clientY-oDiv.offsetTop;
                    arrTop=[60];
                    arrLeft=[30];
                    document.onmousemove=function(ev){
                        var event=ev || window.event;
                        //获取拖拽后鼠标的位置
                        var l=event.clientX;
                        var t=event.clientY;
                        //把拖拽后的位置存进数组里面,用拖拽后鼠标的位置减去鼠标在物体上的位置,就是拖拽后物体的位置
                        arrLeft.push(l-disX);
                        arrTop.push(t-disY);
                        oDiv.style.left=l-disX +"px";
                        oDiv.style.top=t-disY +"px";
                    };
                    document.onmouseup=function(){
                        document.onmousemove=null;
                        document.onmouseup=null;
                    };
                    return false;
                }
                //原路返回的核心就是把移动时的坐标记录下来,然后进行数组重排,并设定定时器把数组内的搞宽赋值给物体。
                oBtn.onclick=function(){
                    arrTop.reverse();//重排
                    arrLeft.reverse();//重排
                    var i=0;
                    oBtn.time=setInterval(function(){
                        oDiv.style.top=arrTop[i]+"px";
                        oDiv.style.left=arrLeft[i]+"px";
                        i++;
                        if(i==arrTop.length){
                            clearInterval(oBtn.time);
                            arrTop=[];
                            arrLeft=[];
                        }
                    },20);
                }
            }
    </script>

标签:
javascript,原路返回

无为清净楼资源网 Design By www.qnjia.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
无为清净楼资源网 Design By www.qnjia.com

稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!

昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?