精华内容
下载资源
问答
  • 如何让鼠标固定在一个位置
    千次阅读
    2020-12-20 19:53:46

    在第一人称射击游戏、RPG等游戏中,鼠标往往不显示,并且固定在一个位置(防止因鼠标划出游戏窗口而失去焦点),除非在暂停游戏或进入背包等状态才需要显示鼠标,下面看看我们怎么实现这个功能。

    使用以下代码,即可实现鼠标的隐藏与显示

    public void ShowMouse(bool isShow)
        {
            if(isShow)
            {
                Cursor.lockState = CursorLockMode.None;
            }
            else
            {
                Cursor.lockState = CursorLockMode.Locked;
            }
        }
    

    CursorLockMode

    光标锁定模式

    • None:默认的光标模式,可自由移动
    • Locked:锁定模式,光标位于游戏窗口中心,不可见
    • Confined:限制模式,光标限制在游戏窗口中,不会移动出窗口
    更多相关内容
  • } if (this.DownUp) { // 鼠标长按时改变图片位置 this.imgtop = this.imgtop + ev.movementY; this.imgleft = this.imgleft + ev.movementX; } }, // 开启监听鼠标滑轮 runWheel(isWheel) { //判断依据是 是否...
    <template>
      <div
        class="mapbox"
        id="mapbox"
        :style="'width:' + width + ';height:' + height"
      >
        <table
          class="imgbox"
          id="imgbox"
          @mousedown="holdDown"
          @mouseup="holdUp"
          :style="'top: ' + imgtop + 'px;left: ' + imgleft + 'px;'"
          border="0"
          cellpadding="0"
          cellspacing="0"
          style="margin: 0 auto"
        >
          <tr>
            <td>
              <img
                id="backgroundImg"
                draggable="false"
                :style="'height: ' + imgheight + '%;'"
                :src="listImg"
              />
            </td>
          </tr>
        </table>
      </div>
    </template>
    <script>
    export default {
      props: {
        //图片路径
        img: {
          type: String,
          default: "",
        },
        //盒子的宽
        width: {
          type: String,
          default: "456px",
        },
        //盒子的高
        height: {
          type: String,
          default: "500px",
        },
      },
      data() {
        return {
          imgtop: 0, //图片距离左边的距离
          imgleft: 0, //图片距离上边的距离
          imgheight: 100, //图片高度百分比
          DownUp: false, //用来判断鼠标是否长按
          listImg:require("../assets/1.jpg"),//图片数组
        };
      },
      mounted() {
        document.onmousemove = this.mouseMove;
        //等待图片加载
        setTimeout(() => {
          this.getbackgroundImgWidth();
        }, 500);
      },
      beforeDestroy() {
        document.onmousemove = null;
      },
      methods: {
        leftRi(){
    
        },
        rightRi(){},
        //鼠标按下
        holdDown() {
          this.DownUp = true;
        },
        //鼠标松开
        holdUp() {
          this.DownUp = false;
        },
        //ev:鼠标对象,id:盒子的id 判断鼠标是否在盒子内
        inBoxIsoutbox(id, ev = event || window.event) {
          let map = document.getElementById(id);
          if (
            this.mousePosition(ev).x > map.offsetLeft + map.offsetWidth ||
            this.mousePosition(ev).x < map.offsetLeft ||
            this.mousePosition(ev).y > map.offsetTop + map.offsetHeight ||
            this.mousePosition(ev).y < map.offsetTop
          ) {
            return false;
          } else {
            return true;
          }
        },
        //兼容后,返回X,Y
        mousePosition(ev) {
          if (ev.pageX || ev.pageY) {
            return { x: ev.pageX, y: ev.pageY };
          }
          return {
            x: ev.clientX + document.body.scrollLeft - document.body.clientLeft,
            y: ev.clientY + document.body.scrollTop - document.body.clientTop,
          };
        },
        // 鼠标移动触发该方法
        mouseMove(ev) {
          ev = ev || window.event;
          if (this.inBoxIsoutbox("mapbox", ev)) {
            // 鼠标在盒子内
            this.runWheel(true);
          } else {
            // 鼠标在盒子外
            this.runWheel(false);
            this.holdUp();
          }
          if (this.DownUp) {
            // 鼠标长按时改变图片位置
            this.imgtop = this.imgtop + ev.movementY;
            this.imgleft = this.imgleft + ev.movementX;
          }
        },
        // 开启监听鼠标滑轮
        runWheel(isWheel) {
          //判断依据是 是否在盒子内部
          //true 就是开启
          if (isWheel) {
            document.documentElement.style.overflow = "hidden";
            //兼容性写法,该函数也是网上别人写的,不过找不到出处了,蛮好的,所有我也没有必要修改了
            //判断鼠标滚轮滚动方向
            if (window.addEventListener) {
              //FF,火狐浏览器会识别该方法
              window.addEventListener("DOMMouseScroll", this.wheel, false);
            }
            window.onmousewheel = document.onmousewheel = this.wheel; //W3C
          } else {
            //false就是关闭
            document.documentElement.style.overflow = "";
            if (window.addEventListener) {
              //FF,火狐浏览器会识别该方法
              window.addEventListener("DOMMouseScroll", null, false);
            }
            window.onmousewheel = document.onmousewheel = null; //W3C
          }
        },
        //统一处理滚轮滚动事件,中间件
        wheel(event) {
          let delta = 0;
          if (!event) event = window.event;
          if (event.wheelDelta) {
            //IE、chrome浏览器使用的是wheelDelta,并且值为“正负120”
            delta = event.wheelDelta / 120;
            if (window.opera) delta = -delta; //因为IE、chrome等向下滚动是负值,FF是正值,为了处理一致性,在此取反处理
          } else if (event.detail) {
            //FF浏览器使用的是detail,其值为“正负3”
            delta = -event.detail / 3;
          }
          if (delta) this.handle(delta);
        },
        //上下滚动时的具体处理函数
        handle(delta) {
          if (delta < 0) {
            //向下滚动
            if (this.imgheight > 10) {
              this.imgheight = this.imgheight - 1;
            }
          } else {
            //向上滚动
            if (this.imgheight < 500) {
              this.imgheight = this.imgheight + 1;
            }
          }
        },
        //获取背景图片的宽度或高度,和实际距离相除得到 系数distanceCoefficient
        getbackgroundImgWidth() {
          if (this.actualDistanceWidth !== 0) {
            let backgroundImg = document.getElementById("backgroundImg");
            this.distanceCoefficient =
              backgroundImg.width / this.actualDistanceWidth;
          } else if (this.actualDistanceHeight !== 0) {
            let backgroundImg = document.getElementById("backgroundImg");
            this.distanceCoefficient =
              backgroundImg.height / this.actualDistanceWidth;
          }
        },
      },
    };
    </script>
    <style scoped>
    .mapbox {
      overflow: hidden;
      position: relative;
      text-align: center;
      border: 1px solid red;
      margin: auto;
    }
    .imgbox {
      position: absolute;
    }
    
    .imgbox img {
      cursor: pointer;
    }
    </style>
    
    
    
    展开全文
  • 上述功能是根据html+js+jquery共同完成的,兼容任何浏览器
  • 头部固定,随鼠标的滑动而位置保持不变【举例:一般电商网站,未登录时,头部登录栏随着鼠标向下滑动,一直位于头部】 css *{ margin:0px; padding:0px; } .main{ width:100%; height:600px; background-color:...

    效果图,为显示效果,以不同颜色区分
    头部固定,随鼠标的滑动而位置保持不变【举例:一般电商网站,未登录时,头部登录栏随着鼠标向下滑动,一直位于头部】
    css

    *{
    	margin:0px;
    	padding:0px;
    }
    .main{
    	width:100%;
    	height:600px;
    	background-color:red;
    	}
    .content{
    	width:1000px;
    	height:2300px;
    	background-color:#ccc;
    	margin: 0 auto;//Div居中
    	}
    .logo{
    	width:1000px;
    	height:150px;
    	position:fixed;//此处是将头部Div固定在浏览器的指定位置,位置不随页面的移动等而变化
    	background-color:aqua;
    	text-align:center;//Div中内容居中
    	}
    .o{
    	display:inline-block;//内部块,属于上级Div内容,由text-align:可实现居中。
    	width:200px;
    	height:100px;
    	background-color:green;
    	margin-top:10px;
    	padding-bottom:10px;
    	}
    

    html代码

    <div class="main">
    	<div class="content">
    		<div class="logo">
    			<div class="o">1</div>
    			<div class="o">2</div>
    			<div class="o">3</div>
    		</div>
    	</div>
    </div>
    

    拓展情景:参照一个例子
    若头部logo栏(见下图“2”)之上,还有一个“收藏栏Div(见下图“1”)”,以上面代码为基础,移动鼠标的话,“2”保持原位置固定不变,当鼠标向下拖动时,logo栏位置不变,但是“1”会随着鼠标下滑而被遮盖消失,从而使页面显示比较奇怪。
    解决思路:当鼠标移动的距离超过“1”的高度时,“2”能够显示在顶部,这时可以用JQuery来实现这一效果。首先获取鼠标移动的高度($(window).scrollTop();),然后判断当移动的高度大于等于“1”的高度时,增加“2”的一个CSS属性,即
    margin-top:-32px;当鼠标向上滑动时,小于“1”的高度,便将-32px修改为0px,就可以恢复原始位置。
    在这里插入图片描述
    js代码

    //头部随鼠标滚动而滚动
    $(document).ready(function (){
    $(window).scroll(function(){
    	//获取当前鼠标滑动的高度
    	var currentTop = $(window).scrollTop();
    	if(currentTop>=32){
    		//如果大于32,说明“1”即将消失,此时“2”需要向上补位,位于顶部。增加一个css属性:向上外边距,-32px(数值代表“1”的高度);
    		document.getElementById("com").style.cssText = "margin-top:-32px;";
    	}
    	if(currentTop<32){
    		//当鼠标向下滑动不足32或者向上往后滑动时,需要将“2"从顶部还原到原位置,以便“1”能够显示出来。
    		document.getElementById("com").style.cssText = "margin-top:0px;";
    	}
    });
    });
    
    展开全文
  • 设置一定时间,鼠标间隔相应时间连续点击当前位置。可以选择左键或右键。
  • 于是我去看了echarts的文档,看到tooltip的position属性,可以把位置设置大概分成两部分,部分是固定位置部分是跟随鼠标移动。 1.固定位置 (1)使用px设置绝对位置 // 绝对位置,相对于容器左侧 10px, ...

    问题:

    在散点图中设置了tooltip后,不设置position,使用默认的配置,toolt的显示位置是跟随鼠标移动的,但是会出现显示不全的情况,如下图。

     

     这产品肯定不能忍啦,必须改!!!于是我去看了echarts的文档,看到tooltip的position属性,可以把位置设置大概分成两部分,一部分是固定位置,一部分是跟随鼠标移动。

    1.固定位置

    (1)使用px设置绝对位置

      // 绝对位置,相对于容器左侧 10px, 上侧 10 px
      position: [10, 10]

    (2)使用百分比设置相对位置

      // 相对位置,放置在容器正中间
      position: ['50%', '50%']

    2.跟随鼠标移动

    使用function回调函数的方法,带5个参数,分别是:

    • point: 鼠标位置,如 [20, 40]。
    • params: 同 formatter 的参数相同。
    • dom: tooltip 的 dom 对象。
    • rect: 只有鼠标在图形上时有效,是一个用xywidthheight四个属性表达的图形包围盒。
    • size: 包括 dom 的尺寸和 echarts 容器的当前尺寸,例如:{contentSize: [width, height], viewSize: [width, height]}。 

    返回值可以是一个表示 tooltip 位置的数组,数组值可以是绝对的像素值,也可以是相 百分比。
    也可以是一个对象,如:{left: 10, top: 30},或者 {right: '20%', bottom: 40}。 

    以上部分来自Echarts配置文档,详见Ecahrts

    以下代码改编自sleepwalker_1992的一篇文章,针对这些代码进行简单的修改,防止数据点被tooltip覆盖。主要思路是:把显示不下分成两种情况,上边放不下,和左边放不下,在分别针对这两种情况,自己设定一个x或y坐标值,防止出屏问题。代码如下:

    position: function (point, params, dom, rect, size) {
        // 鼠标坐标和提示框位置的参考坐标系是:以外层div的左上角那一点为原点,x轴向右,y轴向下
        // 提示框位置
        var x = 0; // x坐标位置
        var y = 0; // y坐标位置
        
        // 当前鼠标位置
        var pointX = point[0];
        var pointY = point[1];
        
        // 外层div大小
        // var viewWidth = size.viewSize[0];
        // var viewHeight = size.viewSize[1];
        
        // 提示框大小
        var boxWidth = size.contentSize[0];
        var boxHeight = size.contentSize[1];
        
        // boxWidth > pointX 说明鼠标左边放不下提示框
        if (boxWidth > pointX) {
            x = 5;  // 自己定个x坐标值,以防出屏
            y -= 15; // 防止点被覆盖住,可根据情况自行调节 
        } else { // 左边放的下
            x = pointX - boxWidth - 15;
        }
        
        // boxHeight > pointY 说明鼠标上边放不下提示框
        if (boxHeight + 20 > pointY) {
            y = pointY + 15;
        } else if (boxHeight > pointY) {
            y = 5;
        } else { // 上边放得下
            y += pointY - boxHeight;
        }
        return [x, y];
    }

     效果图如下:

     

    展开全文
  • unity通过代码回到一个固定位置的实现方法 实现方法: public Transform obj; //要回到固定的位置 public GameObject tiga; //选择的物体为tiga物体,回到obj位置 void Start() { } // Update is called once ...
  • LEFTUP为鼠标左键松开, MOUSEEVENTF_RIGHTDOWN为鼠标右键按住, MOUSEEVENTF_RIGHTUP为鼠标右键松开, 点击操作当然要把按住和松开一起执行,并且为了保证是成功点击了,最好中间添加一个短时间的休眠。...
  • 需要实现带有三屏幕,三屏幕分别显示窗体,但鼠标只能主窗体中运动,不能移动到其他的两附屏中。   二.实现: 具体实现使用的是user32.dll下的GetWindowRect(int hwnd, ref RECT lpRect)函数。 ...
  • //鼠标移动到某一个位置时,触发的事件。 //绑定事件 $(window).bind('scroll', function () { //算出鼠标移动到顶部的高度。 var scrollt = document.documentElement.scrollTop + document.body.scroll...
  • WPF 程序中,我们有 Mouse.GetPosition(IInputElement relativeTo) 方法可以拿到鼠标当前相对于某个 WPF 控件的位置,也可以通过 MouseMove 事件中通过 e.GetPosition(IInputElement relativeTo) 方法拿到同样...
  • 无论屏幕如何滚动,“返回顶部”按钮始终浮动在固定位置,随时可用。一旦点击它,他就像一个小小的火箭,摇晃起来,页面将返回页面顶部!那么如何用axure达到这种效果呢?以下是小楼老师的教程,快点学习吧!axure...
  • 篇文章中详细介绍了a标签锚点的使用,实现链接跳转到指定位置功能,重点解决了当网页header固定fixed的情况,跳转位置有所偏移的问题,需要的同学可以查看... 本篇介绍如下左侧导航栏固定,且每链接是a锚点。...
  • AHK 键盘控制鼠标点击屏幕不同位置

    千次阅读 2022-03-07 14:04:50
    按键显示当前鼠标在屏幕上的位置 代码功能: 按 F6 和 F7 分别对应点击两单独的屏幕坐标 按 Ctrl + F6 和 Ctrl + F7分别对应重新设置两单独的屏幕坐标位置 按Ctrl + / 来弹窗显示当前光标屏幕上的坐标 x :=...
  • python 模拟鼠标点击桌面指定位置

    千次阅读 2021-05-12 15:22:32
    # 键盘鼠标事件 m=PyMouse() k=PyKeyboard() #m.click(1157,470) #k.type_string('123456') #k.tap_key(k.enter_key) #k.type_string('ABCHD') #k.tap_key(k.enter_key) # y 为左上角往下 x为左上角往右 # m.click...
  • 【echarts tooltip 固定位置

    千次阅读 2022-03-23 18:43:09
    今天遇到一个需求,就是echarts 柱状图tooltip 要显示的数据较多,当鼠标移动的时候,上面的信息可能会被看不到,所以给出固定位置+字体变小的解决方案。如果有好解决方案,欢迎大家指点。 改之前 改之后 一直固定...
  • unity3D技术之屏幕内跟随鼠标移动

    千次阅读 2020-12-24 19:46:07
    赋值给鼠标的Z;1usingUnityEngine;2usingSystem.Collections;34publicclassFollow:MonoBehaviour{5Vector3world;//物体要移动到的位置(世界坐标系)6floatmoveSpeed=0;//物体移动速度78voidUpdate(){9Vector3...
  • 许多用户的桌面上会摆放着许多程序图标,并且...win10电脑桌面图标固定位置方法:1、开始菜单单击鼠标右键,点击“运行”;2、运行框中输入:regedit 按下回车键打开注册表编辑器;3、依次定位到:HKEY_CLASSES_...
  • 实时获取鼠标位置

    万次阅读 2022-04-24 13:35:12
    可以实时获取鼠标在显示器的x坐标,y坐标
  • C# 设置鼠标位置

    千次阅读 2019-04-19 16:43:39
     /// 移动鼠标到指定的坐标点  ///  public void MoveMouseToPoint(Point p)  {  SetCursorPos(p.X, p.Y);  }  ///  /// 设置鼠标的移动范围  ///  public void SetMouseRectangle(Rectangle ...
  • Axure固定图片浏览器上的位置

    千次阅读 2021-04-29 09:33:52
    2选择背景动态面板—属性,将其固定于浏览器想要的位置(本例固定于右侧,具体固定位置可按需求更改) 3新建动态面板,命名为个人中心 4编辑个人中心动态面板状态,初始、移入 5编辑初始状态,新建黑色...
  • 机器信息: macOS版本10.14.1 2017款13寸的MBA ...具体问题就是,全屏界面下写代码的时候,鼠标点击的是第三行的某个位置,光标会定位到第行对应的位置 非全屏下没有问题 :) 有没有大佬能够帮忙解决一下
  • Fixed header and footer for IE BODY { MARGIN: 0px } HTML { PADDING-BOTTOM: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; HEIGHT: 100%; PADDING-TOP: 0px } BODY { PADDING-BOTTOM: 0px;...
  • python 模拟鼠标点击屏幕固定区域

    万次阅读 2019-08-04 18:14:42
    from ctypes import * import pyautogui import time ...实现每隔10秒点击一个固定区域 ,其中(600,670)为点击位置 以电脑左上角为坐标原点 不清楚的可以截取整个屏幕,然后放入画图工具里大致寻找下。
  • 这是要显示的内容   //当鼠标移动到这时候 移动到这 $('.explain1').hover(function(){    var eTop=$(this).offset().top;  var eRight=$(this).offset().left;  
  • Unity实现鼠标点击指定位置导航角色

    千次阅读 2022-03-01 22:12:31
    使用组件:一个场地、导航代理、摄像机 实现:进入游戏,鼠标左键点击场景的任意位置,导航代理将自动前往指向位置 步骤 首先我们需要一个场景,新建一平面作为场景地面(如果需要额外的障碍物则自己设置,这里不...
  • #双击左键,显示鼠标位置 if event == cv2.EVENT_LBUTTONDBLCLK: strtext = "(%s,%s)"%(x,y) cv2.circle(img,(x,y),2,(0,0,255),-1) cv2.putText(img, strtext, (x+2, y+15) ,cv2.FONT_HERSHEY_SIMPLEX,1,(0,0,200),...
  • echarts鼠标悬浮显示数据位置设置

    千次阅读 2021-07-28 11:05:49
    :出现的问题 二:想要的效果 三:实现步骤 1、echarts图表配置项里添加代码 tooltip: { trigger: 'axis', position: function (point, params, dom, rect, size) { // size为当前窗口大小 if ((size.view...
  • opencv 入门笔记八 鼠标截取视频帧上的指定位置RoI
  • c语言,10行代码写一个简单鼠标连点器

    万次阅读 多人点赞 2019-08-23 11:54:47
    简单点说,平时写的程序编译执行之后会弹出一个窗口,输入输出什么都是显示窗口上面的,窗口外面操作没有反应,而用了这个函数,即使把窗口最小化也是能接收键盘按键的。 看看用法 if(GetAsyncKeyState(VK_SPACE...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 78,994
精华内容 31,597
热门标签
关键字:

如何让鼠标固定在一个位置