关闭

计算鼠标移动的精确速度

时间: 2019-02-15阅读: 804标签: 鼠标

效果
要达到无论在什么机器上,算出来的速度是一样的。


思路
计算两次mousemove之间的位移和时间,就可以算出精确的速度。

不要将onMousemove的调用时间间隔看成是均等的,事实上也不是均等的,而是根据机器的运行状况实时调整的,所以两次调用之间的时间间隔不能看成是单位时间。


示例

var preX = 0;
    var preTime  = undefined;
    document.addEventListener("mousedown",onMouseDown);


    function onMouseDown(event){
        preTime = undefined;
        document.addEventListener("mousemove",getVolecity);
        document.addEventListener("mouseup",onMouseUp);
    }

    function onMouseUp(event){
        document.removeEventListener("mousemove",getVolecity);
    }


    /**
     * 计算速度
     * @param event
     */
    function getVolecity(event){
        var currTime = Date.now();
        if(typeof preTime != "undefined"){    //跳过第一次
            var dist = event.clientX - preX;
            var time = currTime - preTime;
            var volecity = dist/time;   
            console.log("volecity:"+volecity);
        }
        preX = event.clientX;
        preTime = currTime;
 }


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/2030

关闭

javascript如何判断鼠标是否在div区域内?

JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML

获取鼠标位置(区分event对象中的 clientX、offsetX、screenX、pageX )

作用:都是用来获取鼠标的位置;client直译就是客户端,客户端的窗口就是指游览器的显示页面内容的窗口大小(不包含工具栏、导航栏等等)。event.clientX、event.clientY就是用来获取鼠标距游览器显示窗口的长度

用纯 CSS 判断鼠标进入的方向

在之前某一个前端技术群里,有一个群友说他面试的时候遇到了一个问题,就是面试官让他用纯 CSS 来实现一个根据鼠标移动位置觉得物体移动方向的 DEMO。

JS中鼠标左右键以及中键的事件

有时候需要判断鼠标的事件,除了使用的click事件,只有鼠标左键有效,而右键无效。而对于onmousedown、onmouseup的时候鼠标的事件左键/右键有效。以下总结鼠标三个按键操作:

CSS 鼠标样式

设置鼠标指针放在一个元素边界范围内时所用的光标形状,需要对元素的css属性cursor进行设置。cursor属性可能的值:要实现鼠标移上去显示手形、需要在你的提交按钮上增加css cursor属性,并将它的值设置为pointer;

Pointer Event Api-整合鼠标事件、触摸和触控笔事件

Pointer Events API 是Hmtl5的事件规范之一,它主要目的是用来将鼠标(Mouse)、触摸(touch)和触控笔(pen)三种事件整合为统一的API。

鼠标指针怎么换样式?

我们在DIV CSS布局时候,我们会遇到对对象内鼠标指针光标进行控制,比如鼠标经过指针变为手指形状等样式,接下来我们介绍鼠标指针样式cursor控制。

css怎么设置鼠标手势?

css中可以使用cursor属性设置鼠标的手势,cursor属性规定要显示的光标的类型(形状)。该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状。

JavaScript DOM 鼠标拖拽

在前端页面交互中,鼠标拖拽是一个体验良好的功能,实现鼠标拖拽需要了解鼠标行为坐标系和涉及到的许多兼容性写法。本文介绍鼠标位置的获取和、拽功能的实现以及拖拽函数的封装

javascript 鼠标事件总结

mousedown事件与mouseup事件可以说click事件在时间上的细分,顺序是mousedown => mouseup => click。因此一个点击事件,通常会激发几个鼠标事件。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!