zoukankan      html  css  js  c++  java
  • 图片随着着鼠标移动(鼠标移动事件、获取横纵坐标)

    一、文档中的鼠标移动事件------onmousemove

       <script>
            document.onmousemove=function(){
                console.log(arguments.length);
                console.log(arguments[0]);
                //有一个参数e,是一个对象,是事件参数对象
            }
        </script>

    二、clientX和clientY获取横纵坐标----案例图片随着鼠标移动

        <img src="1.png" alt="" id="im" style="position: absolute;left: 0;top: 0;">
        <script>
            document.onmousemove=function(e){
                //谷歌和火狐中有这个对象e
                //IE8中没有这个是对象e,而是用window.event
                e=window.event||e;
                document.getElementById("im").style.left=e.clientX+"px";
                document.getElementById("im").style.top=e.clientY+"px";
            }
        </script>

    三、pageX和pageY获取横纵坐标-----案例图片随着鼠标移动

        <img src="1.png" alt="" id="im" style="position: absolute;left: 0;top: 0;">
        <script>
            document.onmousemove=function(e){
                //如果有滚动条的时候,拉动滚动条,会出现bug
                //解决办法是用pageX和pageY代替
                //但是这两个属性火狐和谷歌可以用,IE9中不支持
                e=window.event||e;
                document.getElementById("im").style.left=e.pageX+"px";
                document.getElementById("im").style.top=e.pageY+"px";
            }
        </script>

    四、兼容性写法(封装对象)

    <!-- 封装关于获取横纵坐标的兼容性代码,并且把代码放在一个对象中 -->
        <script>
        var evt={
            //window.event和事件参数e的兼容
            getEvent:function(evt){
                return window.event||evt;
            },
            //可视区域的横坐标的兼容代码
            getClientX:function(evt){
                return this.getEvent(evt).clientX;
            },
            //可视区域的纵坐标的兼容代码
            getClientY:function(evt){
                return this.getEvent(evt).clientY;
            },
            //页面向左卷曲出去的横坐标
            getScrollLeft:function(){
                return window.pageXOffset||document.body.scrollLeft||document.documentElement.scrollLeft||0;
            },
            //页面向上卷曲出去的横坐标
            getScrollTop:function(){
                return window.pageYOffset||document.body.scrollTop||document.documentElement.scrollTop||0;
            },
            //相对于页面(屏幕)的横坐标(pageX或者是clientX+scrollLeft)
            getPageX:function(evt){
                return this.getEvent(evt).pageX?this.getEvent(evt).pageX:this.getClientX(evt)+this.getScrollLeft();
            },
            //相对于页面(屏幕)的纵坐标(pageY或者是clientY+scrollTop)
            getPageY:function(evt){
                return this.getEvent(evt).pageY?this.getEvent(evt).pageY:this.getClientY(evt)+this.getScrollTop();
            }
        }
        </script>
  • 相关阅读:
    dialogue中需要添加编辑器
    表格增加整行和删除整行
    树形菜单配合element-ui模糊搜索和鼠标单击选择内容变色并且滚动
    格式金钱【摘抄与网络,记录】
    element-ui日期选择器
    普通上传
    axios另类封装
    Android permission 访问权限大全
    Android Timer 的 schedule()方法定时循环切换图片
    Android 设置图片倒影效果
  • 原文地址:https://www.cnblogs.com/EricZLin/p/9011836.html
Copyright © 2011-2022 走看看