首页 > 代码库 > 每日分享

每日分享

2024-10-14 04:58:02   217人阅读

一、鼠标的绝对位置和相对位置

注：需要引入JQ

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="jquery-3.0.0.js"></script>
    <script type="text/javascript">

            function click1 (event){
                var data1 = mouseCoords(event);
                var x1 = data1.x;
                var y1 = data1.y;
                alert("绝对坐标："+x1+","+y1);
                var data2 = getXAndY(event);
                var x2 = data2.x;
                var y2 = data2.y;
                alert("相对坐标："+x2+","+y2);
            }

            //获取鼠标点击区域中的相对位置坐标
            function getXAndY(event){
                //鼠标点击的绝对位置
                Ev= event || window.event;
                var mousePos = mouseCoords(event);
                var x = mousePos.x;
                var y = mousePos.y;
                //alert("鼠标点击的绝对位置坐标："+x+","+y);

                //获取div在body中的绝对位置
                var x1 = $("#test").offset().left;
                var y1 = $("#test").offset().top;
                //alert("div在body中的绝对位置坐标："+x1+","+y1);

                //鼠标点击位置相对于div的坐标
                var x2 = x - x1;
                var y2 = y - y1;
                return {x:x2,y:y2};
            }

            //获取鼠标点击区域在Html绝对位置坐标
            function mouseCoords(event){
                if(event.pageX || event.pageY){
                    return {x:event.pageX, y:event.pageY};
                }
                return{
                    x:event.clientX + document.body.scrollLeft - document.body.clientLeft,
                    y:event.clientY + document.body.scrollTop - document.body.clientTop
                };
            }   
    </script>
</head>
<body>
    <div id="test" style="width:200px; height:200px; border:1px solid #d3d3d3;" onclick="click1(event)"></div>
</body>
</html>

二、鼠标的横、纵坐标

var x , y;
 
//当需求为获得的坐标值相对于body时，用：
function positionBody(event){
    event = event||window.event;
    //获得相对于body定位的横标值；
    x=event.clientX
    //获得相对于body定位的纵标值；
    y=event.clientY
}

//当需求为获得的坐标值相对于某一对象时，用：
function positionObj(event,id){
    //获得对象相对于页面的横坐标值；id为对象的id
    var thisX = document.getElementById(id).offsetLeft;
    //获得对象相对于页面的横坐标值；
    var thisY = document.getElementById(id).offsetTop;
    //获得页面滚动的距离；
    //注：document.documentElement.scrollTop为支持非谷歌内核；document.body.scrollTop为谷歌内核
    var thisScrollTop = document.documentElement.scrollTop + document.body.scrollTop;
    event = event||window.event;
    //获得相对于对象定位的横标值 = 鼠标当前相对页面的横坐标值 - 对象横坐标值；
    x = event.clientX - thisX;
    //获得相对于对象定位的纵标值 = 鼠标当前相对页面的纵坐标值 - 对象纵坐标值 + 滚动条滚动的高度；
    y = event.clientY - thisY + thisScrollTop;
}

三、什么是事件

  • 什么叫做事件？

       事件，俗话说就是对一定事物产生一定的影响。

       例如：我们打开一个网页，网页被打开的那一刻，首先触发的事件就是load事件，只有触发了这个事件，才会执行这部分代码。

  • 事件的种类

1、一般事件

技术分享

2、页面相关事件

技术分享

3、表单相关事件

技术分享

4、滚动字幕事件

技术分享

5、编辑事件

技术分享

6、数据绑定事件

技术分享

7、外部事件

　　技术分享

四、onmouseover 、onmouseout 与onmouseenter 、onmouseleave的区别

onmouseover、nmouseout：鼠标移动到自身时候会触发事件，同时移动到其子元素身上也会触发事件

onmouseenter、onmouseleave：鼠标移动到自身是会触发事件，但是移动到其子元素身上不会触发事件

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="Generator" content="EditPlus?">
        <meta name="Author" content="">
        <meta name="Keywords" content="">
        <meta name="Description" content="">
        <title></title>
        <style type=‘text/css‘>
            *{ margin:0; padding:0;}
            #box3{
                height:100px;
                background:red;
            }
            #box2{
                padding:50px;
                background:blue;
            }
            #box1{
                padding:50px;
                background:green;
            }
        </style>
    </head>

    <body>
        <div id="box1">1
            <div id="box2">2
                <div id="box3">3</div>
            </div>
        </div>

        <script type="text/javascript">
            /*
                onm ouseover
                onm ouseout

                onm ouseenter
                onm ouseleave
            */

            var oBox1 = document.getElementById(‘box1‘);
            ///*
            /*
            oBox1.onmouseover = function(){  //可以直接通过ID这样调用，但不提倡
                console.log( ‘over‘ );
            };
            */
            oBox1.onmouseout = function(){  //可以直接通过ID这样调用，但不提倡
                console.log( ‘out‘ );
            };
            //*/

            /*
            oBox1.onmouseenter = function(){  //可以直接通过ID这样调用，但不提倡
                console.log( ‘enter‘ );
            };
            oBox1.onmouseleave = function(){
                console.log( ‘leave‘ );
            };
            */
        </script>
    </body>
</html>

五、判断鼠标的移动方向

<script>
var lastX = null,
    lastY = null;
window.onmousemove = function(event){
    var curX = event.clientX,
        curY = event.clientY,
        direction = ‘‘;
    // console.info(event);
    // console.info(event.clientX);
    // console.info(event.clientY);
    // 初始化坐标
    if(lastX == null || lastY == null){
        lastX = curX;
        lastY = curY;
        return ;
    }
    if(curX > lastX){
        direction += ‘X右,‘;
    }else if(curX < lastX){
        direction += ‘X左,‘;
    }else{
        direction += ‘X居中,‘;
    }
    if(curY > lastY){
        direction += ‘Y上‘;
    }else if(curY < lastY){
        direction += ‘Y下‘;
    }else{
        direction += ‘Y居中‘;
    }
    lastX = curX;
    lastY = curY;
    console.info(direction);
    document.body.innerText = direction;
}
</script>

 

每日分享


联系
我们