css代码

javascript 实现 原路返回,javascript返回

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返回 css代码
复制代码 代码如下: style type=”text/css” * { margin: 0px; padding: 0px;
font-family: “micsoft yahei”,”微软雅黑…

事件对象

复制代码 代码如下:

鼠标事件

<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>

event.clientX在可视区中,鼠标点击的x坐标

html代码

event.clientY在可视区中,鼠标点击的y坐标

复制代码 代码如下:

示例:

 <body>
 <input type=”button” value=”原路返回”/>
 <div></div>
 </body>

        document.onclick = function  () {

javascript代码

            alert(event.clientX + ‘,’ + event.clientY);

复制代码 代码如下:

        }

<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
    返回数组中不重复的元素
  • 用AJAX返回HTML片段中的JavaScript脚本
  • JavaScript
    弹出窗体点击按钮返回选择数据的实现
  • javascript返回顶部效果(自写代码)
  • javaScript如何处理从java后台返回的list
  • JavaScript常用的返回,自动跳转,刷新,关闭语句汇总

demo.gif

        #div {

            width: 100px;

            height: 100px;

            background-color :red;

            position: absolute;

        }

        // 鼠标移动时触发改事件

        document.onmousemove = function  (ev) {

            // 获取距离文档顶部的高度

            var oScrollTop = document.documentElement.scrollTop ||
document.body.scrollTop;

            // 获取距离文档左边的的宽度

            var oScrollLeft = document.documentElement.scrollLeft ||
document.body.scrollLeft;

            // 获取鼠标事件

            var oEvent = event || ev;

            // 获取到div

            var oDiv = document.getElementById(‘div’);

            // 设置div的位置

            oDiv.style.left = oEvent.clientX + oScrollLeft + ‘px’;

            oDiv.style.top = oEvent.clientY + oScrollTop + ‘px’;

        }

示例:一串跟着鼠标走的div

demo.gif

        #div {

            width: 10px;

            height: 10px;

            background-color :red;

            position: absolute;

        }

        // 鼠标移动时触发改事件

        window.onload = function  () {

            var oDivs = document.getElementsByTagName(‘div’);

            document.onmousemove = function  (ev) {

                var oEvent = ev || event;

                oDivs[0].style.left = oEvent.clientX+’px’;

                oDivs[0].style.top = oEvent.clientY+’px’;

                for (var i = oDivs.length-1; i > 0; i–) {

                    oDivs[i].style.left = oDivs[i-1].style.left;

                    oDivs[i].style.top = oDivs[i-1].style.top;

                };

            }

        }

键盘事件

keyCode获取用户按下键盘的哪个按键

如:键盘控制DIV移动

ctrlKey 返回boolean值,按下时为true

shiftKey 返回boolean值,按下时为true

altKey 返回boolean值,按下时为true

示例:用提示框将用户按的按键提示出来:

demo.gif

        // 按动键盘时触发事件

        document.onkeydown = function (ev) {

            var oEvent = ev || event;

            // 获取到按动的是哪个按键

            alert(oEvent.keyCode);

        }

示例:通过上下左右按键控制DIV的移动

demo.gif

        #div1 {

            width: 100px;

            height: 100px;

            left:10px;

            top:10px;

            background-color: gray;

            position: absolute;

        }

        document.onkeydown = function  (ev) {

            var oEvent = ev || event;

            var oDiv = document.getElementById(‘div1’);

            if (oEvent.keyCode == 37) {

                oDiv.style.left =  oDiv.offsetLeft – 10 +’px’;

            } else if (oEvent.keyCode==38) {

                oDiv.style.top = oDiv.offsetTop – 10 +’px’;

            } else if (oEvent.keyCode == 39) {

                oDiv.style.left = oDiv.offsetLeft + 10 +’px’;

            } else if (oEvent.keyCode == 40) {

                oDiv.style.top = oDiv.offsetTop + 10 +’px’;

            };

        }

示例:按住control+enter键,提交留言框中的文字到留言板中

demo.gif

        window.onload = function  () {

            var oText1 = document.getElementById(‘text1’);

            var oText2 = document.getElementById(‘text2’);

            var oBtn = document.getElementById(‘btn’);

            // 鼠标点击提交按钮。进行留言

            oBtn.onclick = function  () {

                //点击提交按钮后,把留言框中的文字提交在留言区

                oText1.value += oText2.value + ‘\n’;

                // 清空留言框

                oText2.value = ”;

            };

            //
按下control+enter按钮,进行留言,因为当前焦点在留言框中,所以事件要加载留言框中

            oText2.onkeydown = function  (ev) {

                var oEvent = ev || event;

                // 按下回车键和control键

                if (oEvent.keyCode == 13 && oEvent.ctrlKey) {

                    //点击提交按钮后,把留言框中的文字提交在留言区

                oText1.value += oText2.value + ‘\n’;

                // 清空留言框

                oText2.value = ”;

                };

            }

        }

   

   

事件冒泡

子标签发生事件后,向父级发送该事件,一直追溯到document。如:点击一个嵌套在body中的button,则该button的onclick事件也会传递给body、document中,触发他们的onclick里触发的函数.

示例:

div {

width: 100px;

height: 100px;

background-color: red;

display: none;

}

   

window.onload = function () {

            var oBtn = document.getElementById(‘button’);

            var oDiv = document.getElementById(‘div’);

            // 点击buton后,button的事件会被触发

            oBtn.onclick = function() {

                oDiv.style.display = ‘block’;

                alert(“button被点击了”);

            }

            // 由于事件冒泡,作为父级的document的onclick事件也会被触发

            document.onclick = function() {

                oDiv.style.display = ‘none’;

                alert(“document被点击了”)

            }

        }

   

取消冒泡

由于事件冒泡会触发父级的相关方法,所以我们经常会“取消事件冒泡”。

取消事件冒泡的方法:event.cancelBubble=true

div {

width: 100px;

height: 100px;

background-color: red;

display: none;

}

   

window.onload = function () {

            var oBtn = document.getElementById(‘button’);

            var oDiv = document.getElementById(‘div’);

            // 点击buton后,button的事件会被触发

            oBtn.onclick = function(ev) {

                oDiv.style.display = ‘block’;

                alert(“button被点击了”);

                // 在这里取消事件冒泡,防止事件向父级传递

                //
兼容性考虑,有的浏览器的事件并不是’event’,所以把点击事件作为参数传递过来

                var oEvent = ev || event;

                oEvent.cancelBubble=true;

            }

            // 由于事件冒泡,作为父级的document的onclick事件也会被触发

            document.onclick = function() {

                oDiv.style.display = ‘none’;

                alert(“document被点击了”)

            }

        }

   

事件的默认行为

浏览器自带的行为就是默认行为

阻止默认行为

只要将默认的事件return false,就可以组织默认行为的执行。

示例:自定义右键菜单:默认的右键菜单是系统提供的选项,我们可以阻止默认的右菜单,来自定义新右键菜单样式

ul {

list-style-type: none;

display:none;

position:absolute;

}

* {

margin: 0;

padding: 0;

}

   

        // 鼠标右键触发的时间

        document.oncontextmenu = function  (ev) {

            var oUl = document.getElementById(‘ul1’);

            var oEvent = ev || event;

            oUl.style.display = ‘block’;

            oUl.style.left = oEvent.clientX + ‘px’;

            oUl.style.top = oEvent.clientY + ‘px’;

            return false;

        }

        // 鼠标左键触发的事件

        document.onclick  = function  (ev) {

            var oUl = document.getElementById(‘ul1’);

            oUl.style.display = ‘none’;

        }

   

   

       

首页

       

登录

       

注册

示例:输入框中只能输入数字和退格

   

window.onload = function  () {

var oText = document.getElementById(‘text’);

oText.onkeydown = function  (ev) {

var oEvent = ev || event;

if ( (oEvent.keyCode < 40 && oEvent.keyCode != 8) || oEvent.keyCode
> 57 ) {

return false;

};

            }

        }

拖拽

拖拽时,鼠标经历三个事件:

onmousedown 鼠标按下时,存储当前鼠标距离拖拽对象左上角的距离

onmousemove 鼠标移动时,根据鼠标移动的距离移动拖拽对象的位置

onmouseup 鼠标抬起时,停止拖拽

示例:鼠标拖拽一个div

demo.gif

#div1 {

width: 100px;

height: 100px;

background-color : red;

position: absolute;

}

   

window.onload = function  () {

            var oDiv = document.getElementById(‘div1’);

            // 当鼠标按下时计算鼠标距离div左上角的位置

            oDiv.onmousedown = function  (ev) {

                var oEvent = ev || event;

                var oX = oEvent.clientX – oDiv.offsetLeft;

                var oY = oEvent.clientY – oDiv.offsetTop;

                // 当鼠标开始移动,重新设置div的位置

                document.onmousemove = function  (ev) {

                    var oEvent = ev || event;

                    oDiv.style.left = oEvent.clientX – oX + ‘px’;

                    oDiv.style.top = oEvent.clientY – oY + ‘px’;

                };

                // 当鼠标抬起,结束移动,清除移动事件的函数

                document.onmouseup = function  () {

                    document.onmousemove = null;

                    document.onmouseup = null;

                };

            };

        };

   

   

   

   

   

   

   

   

   

   

   

       

   

   

   

   

   

       

   

   

   

   

   

       

   

   

   

   

   

       

   

   

   

   

   

   

   

   

   

   

Author

发表评论

电子邮件地址不会被公开。 必填项已用*标注