滑鼠事件----移動小方塊

阿新 • • 發佈：2019-02-01

<body>
    <div style="width: 100px;height: 100px;background-color: red;position:absolute;left: 0;top: 0;"></div>
    <script type="text/javascript">
        var div = document.getElementsByTagName("div")[0];
        var dix;
        var diy;
        document.onmousedown = function (e) {
            dix=e.pageX-parseInt(div.style.left);
            diy=e.pageY-parseInt(div.style.top);
            div.onmousemove = function (e) {
                var event = e || window.event;
                div.style.left = e.pageX -dix + "px";
                div.style.top = e.pageY -diy + "px";
            }
            document.onmouseup=function(){
                div.onmousemove=null;
            }
        }
    </script>
</body>

e.pageX、e.pageY是獲取滑鼠在網頁上的位置

滑鼠事件裡的onmousedown有一個屬性：

0表示滑鼠左鍵點選

1表示滾輪點選

2表示滑鼠左鍵點選

滑鼠事件----移動小方塊

JS實現滑鼠事件移動換圖

1.原始碼<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width

canvas製作滑鼠繪圖和方塊移動小案例

在這裡插入圖片描述 canvas製作滑鼠繪圖：原理：獲取開始點選的點和滑鼠移動後的點所用知識：event物件 canvas繪圖 window.onload=function (){ var myCanvas=document.querySele

QML學習之路02: 使用鍵盤方向鍵移動介面的小方塊

main.cpp #include <QGuiApplication> //#include <QQmlApplicationEngine> #include <QQ

JS onmouseover滑鼠事件：滑鼠移到小圖顯示大圖

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <

我的和unity3d的小故事1——惡魔射手之滑鼠控制移動之input.getaxis("Horizontal")與input.getaxis("Vertical")

跟著惡魔射手視訊學習的過程中遇到的第一個問題是怎麼也移動不了，那麼問題來了，打印出來是獲得的下面兩個值都是0。怎麼辦呢，改edit下面的projectsetting裡面的input屬性下面兩個值的type都改成mous

【Flex】——DataGrid的滑鼠焦點移動事件。滑鼠在DataGrid的列中移動時所觸發的event。

RT，該事件為，當滑鼠在DataGrid的列中移動時所觸發的event Code mxml <mx:DataGrid itemRollOver ="dg_itemRollOver(ev

MFC滑鼠事件-OnMouseMove移動OnMouseWheel縮放

（1）目的說明：重新實現MFC中的滑鼠事件函式，實現滑鼠左鍵拖動效果和滾輪拖動效果。（2）滑鼠事件說明：OnMouseMove響應滑鼠移動事件OnMouseWheel響應滑鼠中鍵的滾動（3）滑鼠事件引數說明afx_msgvoidOnMouseMove(UINTnFlags,

樣式根據滑鼠的移動而移動

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js 滑鼠移動</title> <style>

【opencv3的滑鼠事件操作】

選取影象中的ROI區域： #include<opencv2\opencv.hpp> #include <stdio.h> using namespace cv; Mat org, dst, img, tmp; void on_mous

【OpenGL】-009 GLUT中處理鍵盤滑鼠事件

【OpenGL】-009 GLUT中處理鍵盤滑鼠事件鍵盤和滑鼠是GUI程式獲取使用者輸入的重要方式，在windows程式中，通過WM_KEY_DOWN/WM_KEY_UP/WM_LBUTTONDOWN/WM_RBUTTONDOWN等訊息的響應，使用者可以方便的處理鍵盤滑鼠的輸入。在

常用的滑鼠事件

if (document.addEventListener) { //FireFox,Chrome,Opera… oBtn.addEventListener('click', onMo

java 對滑鼠事件監視

import java.awt.*; import java.awt.event.*; public class example1 { public static void main(String[] args){ Frame f=new

測試開發之前端——No7.HTML5中的滑鼠事件

滑鼠事件由滑鼠或相似的使用者動作觸發的事件。適用於所有 HTML 5 元素：屬性值描述 onclick script 當單擊滑鼠時執行指令碼 ondblclick script 當雙

cocos2d-x 鍵盤和滑鼠事件

出了選單可以響應使用者事件外，cocos2d中的層(Layer)也可以響應事件。層能夠自動響應視窗事件，這些事件主要是鍵盤和滑鼠事件，cocos2d中事件處理是通過Pyglet的事件處理完成的。 1.鍵盤事件　　層中的鍵盤事件主要有兩個on_key_press和on_key_release,當這些事件觸

jquery中關於滑鼠事件的操作

關於jquery中關於滑鼠事件的某些操作，示例如下： 1.滑鼠點選新增事件click(): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/x

前端（十五）—— JavaScript事件：繫結事件方式、事件的冒泡和預設事件、滑鼠事件、鍵盤事件、表單事件、文件事件、圖片事件、頁面事件

JS事件：繫結事件方式、事件的冒泡和預設事件、滑鼠事件、鍵盤事件、表單事件、文件事件、圖片事件、頁面事件一、事件的兩種繫結方式 ******* 1、on事件繫結方式 document.onclick = function() { console.log("文件點選"); } // on事件只

WPF，強制捕獲滑鼠事件，滑鼠移出控制元件外依然可以執行強制捕獲的滑鼠事件

原文: WPF，強制捕獲滑鼠事件，滑鼠移出控制元件外依然可以執行強制捕獲的滑鼠事件在WPF中，只有滑鼠位置在某個控制元件上的時候才會觸發該控制元件的滑鼠事件。例如，有兩個控制元件都註冊了MouseDown和MouseUp事件，在控制元件1上按下滑鼠，不要放開，移動到控制元件2上再放開。在這個過程中，控制元

SWT自動觸發滑鼠事件，模擬外掛

Point point = shell.getLocation(); Event ev = new Event(); //建立事件 ev.type = SWT.MouseMove

cesium(滑鼠事件)

本文示列 cesium 滑鼠新增事件、及刪除事件。建立viewer var viewer = new Cesium.Viewer('cesiumContainer'); 滑鼠事件 var handler = new Cesium.ScreenSpaceEventHandler(vie

滑鼠事件----移動小方塊

相關推薦