【前端笔记之JavaScript（十一）event&BOM&鼠标/盒子位置&拖拽/滚轮】的更多相关文章

前端笔记之JavaScript（十一）event&BOM&鼠标/盒子位置&拖拽/滚轮

一.事件对象event 1.1 preventdefault()和returnValue阻止默认事件 通知浏览器不要执行与事件关联的默认动作. preventdefault()  支持Chrome等高级浏览器 returnValue     支持IE6.7.8 var box = document.getElementById('box'); var i = 0; //鼠标在box盒子滚动时触发 box.onmousewheel = function(event){ var event = ev…

(Demo分享)利用JavaScript（JS）实现一个九宫格拖拽功能

利用JavaScript(JS)实现一个九宫格拖拽功能   Demo实现了对任意方格进行拖拽,可以交换位置,其中Demo-1利用了勾股定理判断距离! Demo-1整体思路: 1.首先div实现自由移动,一定需要脱离标准文档流,所以我们给它使用绝对定位. 2.利用视觉欺骗,点击鼠标悬浮的其实是利用JS生成的一个Div,交换信息的两个Div并没有位置交换,只是把双方属性进行了交换. 3.利用了勾股定理去判断距离. ##效果图如下: 网页源代码: <!DOCTYPE html> <html&g…

超强的纯 CSS 鼠标点击拖拽效果

背景 鼠标拖拽元素移动,算是一个稍微有点点复杂的交互. 而在本文,我们就将打破常规,向大家介绍一种超强的仅仅使用纯 CSS 就能够实现的鼠标点击拖拽效果. 在之前的这篇文章中 -- 不可思议的纯 CSS 实现鼠标跟随,我们介绍了非常多有意思的纯 CSS 的鼠标跟随效果,像是这样: 但是,可以看到,上面的效果中,元素的移动不是很丝滑.如果你了解上述的实现方式,就会知道它存在比较大的局限性. 本文,我们还是仅仅通过 CSS,来实现一种丝滑的鼠标点击拖动元素移动的效果. 鼠标点击拖拽跟随效果 OK,什…

CSharpGL(21)用鼠标拾取、拖拽VBO图元内的点、线或本身

CSharpGL(21)用鼠标拾取.拖拽VBO图元内的点.线或本身 效果图 以最常见的三角形网格(用GL_TRIANGLES方式进行渲染)为例. 在拾取模式为GeometryType.Point时,你可以拾取单个的顶点. 在拾取模式为GeometryType.Line时,你可以拾取任意一个三角形里的任意一条线.即同时拾取此线段的两个顶点. 在拾取模式为GeometryType.Triangle时,你可以拾取任意一个三角形.即同时拾取此三角形的三个顶点. 实际上,CSharpGL实现了在所有渲染模…

前端笔记之JavaScript（十）深入JavaScript节点&DOM&事件

一.DOM JavaScript语言核心.变量的定义.变量的类型.运算符.表达式.函数.if语句.for循环.算法等等.这些东西都属于语言核心,下次继续学习语言核心就是面向对象了.JavaScript能做非常多的事情:DOM开发.Ajax开发.Canvas开发.NodeJS开发.前端框架(React.Vue.Angular等等).HTML5开发.这些都需要语言核心的知识. DOM开发说白了就是浏览器中的页面效果开发,在2011年之前,DOM开发占据了前端开发工程师的90%的工作:年之后,前端要负…

前端笔记之jQuery（下）事件&节点操作&净位置&拖拽&页面卷动值&遍历JSON

一.监听事件大全 1.1 JavaScript事件 onblur 元素失去焦点 onchange 用户改变域的内容 onclick 鼠标点击某个对象 ondblclick 鼠标双击某个对象 onfocus 元素获得焦点 onkeydown 某个键盘的键被按下 onkeypress 某个键盘的键被按下或按住 onkeyup 某个键盘的键被松开 onload 某个页面或图像被完成加载 onmousedown 某个鼠标按键被按下 onmousemove 鼠标被移动 onmouseout 鼠标从某元素移…

HTML5深入学习之鼠标跟随，拖拽事件

知识点(鼠标跟随): mousedown: 当用户用鼠标点击在某一元素上就会触发该事件 mouseover:  当鼠标指针在某一元素上移动就会触发改事件 下面这个例子的效果就是鼠标点击元素后,元素跟着鼠标移动 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8" /> <title>独秀不爱秀</title> <s…

Javascript 事件对象进阶（二）拖拽的应用 - 登录框的拖拽

<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style type="text/css"> *{ margin:0; padding:0;} body{ height:2000px;} #login{ float:right; cursor:pointer;} .ui-dialog…

Javascript 事件对象进阶（一）拖拽的原理

拖拽原理 鼠标和Div的相对距离不变 三大事件 把拖拽加到document上 拖拽简单点来说就是不停的更改物体到页面左边&顶部的距离! 那么如何计算出物体到页面左端的距离呢? 当鼠标按下的时候(onmousedown),我们获取 鼠标距离左边&顶部 的值:clientX.clientY 物体距离左边&顶部的值:offsetLeft.offsetTop 这样我们就知道了,鼠标距离物体左边&顶部的距离,即:clientX - offsetLeft:clientY- offset…

JAVA鼠标屏幕绘制拖拽删除矩形

import java.awt.Cursor; import java.awt.Graphics; import java.awt.Graphics2D; import java.awt.Point; import java.awt.event.MouseAdapter; import java.awt.event.MouseEvent; import java.awt.event.MouseMotionListener; import java.awt.geom.Point2D; import…