【案例】鼠标按下，DIV跟随移动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鼠标按下，DIV跟随移动</title>
<style>
*{
margin: 0;
padding: 0;
}
#ball{
width: 200px;
height: 200px;
background: pink;
border-radius: 50%;
cursor: move;
position: absolute;
}
</style>
</head>
<body>
<div id="ball"></div>
</body>
<script>
//获取元素
var ball = document.getElementById('ball');
console.log(ball);
//声明全局变量
var leftCha,topCha;
//定义鼠标是否按下的标识
var isDown = false;
ball.onmousedown = function(e){
var e = e || window.event;
leftCha = e.clientX - ball.offsetLeft;
topCha = e.clientY - ball.offsetTop;
isDown = true;
}
window.onmousemove = function(e){
var e = e || window.event;
if(!isDown){
return; //终止程序执行
}
ball.style.left = e.clientX - leftCha + 'px';
ball.style.top = e.clientY - topCha + 'px';
}
ball.onmouseup = function(e){
isDown = false;
}
</script>
</html>
【案例】鼠标按下，DIV跟随移动的更多相关文章
- JQ方法实用案例///鼠标移动到div和修改ipt中弹窗、CSS鼠标变小手、JQ获取元素属性、JQ选择器
今天学习了jQ,jQ对js的帮助很大,菜鸟教程上也有属性.可以查看 js 和 jquery主要的区别 在 dom 想用jquery 必须先引入(顺序问题) 先css 再js: ...
- javascript--鼠标拖拽窗口案例（鼠标按下，在鼠标移动过程中，盒子跟着一起移动，鼠标松开，盒子停止移动）
界面如图所示: 要求:在“信息注册”栏,按下鼠标,然后鼠标在页面移动,在鼠标移动过程中,该窗口跟着鼠标移动,当鼠标松开的时候,窗口停止移动.点击“关闭”,该窗口隐藏. 实现思路: 1.页面结构分析:一 ...
- 经典的 div + css 鼠标 hover 下拉菜单
经典的 div + css 鼠标 hover 下拉菜单 效果图: 源码: <html> <head> <meta charset="utf-8"> ...
- div跟随鼠标移动
1.目标是实现div跟随鼠标而移动,分三种情况进行实现 a)首先获取div,进行绑定鼠标移动事件,给div开启定位功能 第一种实现方式,假如body的大小跟页面大小一样,则可以用这个方法. 1)获取鼠 ...
- jQuery---钢琴案例 （按下1-9数字键，能触发对应的mouseenter事件）
钢琴案例 (按下1-9数字键,能触发对应的mouseenter事件) 1. 结合之前的学习,主要内容,就是on注册keyup事件,函数里传入e, 用e.keyCode,来获取1-9的数字的范围. 如果 ...
- 案例：简易的Div拖拽
案例:简易的Div拖拽 鼠标移入Div区域后,按下鼠标左键,可以拖动Div移动;松开鼠标左键,Div拖动停止.同时要求Div不能拖出屏幕显示区域外. 拖拽原理:距离不变.三个事件(onmousedow ...
- 原生态js，鼠标按下后，经过了那些单元格
本来是要判断那些单元格被选中,结果发现行不通,只能判断鼠标按下后,经过了那些单元格 之所以发出来,是觉得案例还有很多有意思的地方 onmouseover 的持续触发,导致了很多重复元素 由于将事件绑 ...
- 简单的鼠标可拖动div 兼容IE/FF
来源:http://www.cnblogs.com/imwtr/p/4355416.html 作者: 主要思路: 一个div,注册监听onmousedown事件,然后处理获取的对象及其相关值(对象高度 ...
- 只要把鼠标移上Div方框，方框就自动顺时针旋转
这是一个CSS3特效,IE下看不到效果.一个Div方框,在CSS3代码的作用下,只要把鼠标移上Div方框,方框就自动顺时针旋转.代码量不大,甚至有些简单,作为一个基础的CSS3实例,我想还是比较不错的 ...
随机推荐
- HDU5923-Prediction-有继承味道的并查集
目录 目录 思路: (有任何问题欢迎留言或私聊 && 欢迎交流讨论哦 目录 题意:传送门 原题目描述在最下面. 有一个n个节点m条边的无向图和一个m个节点的有根树(根为1).树上每 ...
- CSS3：CSS3 简介
ylbtech-CSS3:CSS3 简介 1.返回顶部 1. CSS3 简介 对CSS3已完全向后兼容,所以你就不必改变现有的设计.浏览器将永远支持CSS2. CSS3 模块 CSS3被拆分为&quo ...
- 基于Netty的RPC架构学习笔记（一）：NIO
文章目录 传统的socket分析 举个
- HSF简单实现记录（基于 Pandora Boot 开发）
文章目录 声明 注意 安装轻量配置中心 启动轻量配置中心 配置 hosts 结果验证 开发工具准备 在 Maven 中配置 EDAS 的私服地址 验证配置是否成功 开发 demo下载 服务注册与发现 ...
- hexo next主题深度优化(六)，使用hexo-neat插件压缩页面，大幅度提升页面性能和响应速度。
文章目录 隆重感谢: 背景 开始 试水 成功的案例 安装插件,执行命令. hexo _config.yml文件添加 坑 跳过压缩文件的正确配置方式 压缩html时不要跳过.md文件 压缩html时不要 ...
- MySQL数据库中，使用 group by 时，不重复字段如何拼接显示
就不写文字描述了,直接用图和sql来表述吧. 这是测试数据,表名为 person 现在,我想按照性别进行分组,也就是字段 sex ,同时能将分组后的姓名全部显示出来. sql 语句如下: SELECT ...
- licecap图片区域问题
之前一直好用的licecap最近突然没法用了,结果发现是屏幕分辨率的文本大小的问题,因为选了特大的.发现制作成的gif图片的区域有问题.后来改回中等的,就可以了.
- 金三银四铜五铁六，Offer收到手软！
作者:鲁班大师 来源:cnblogs.com/zhuoqingsen/p/interview.html 文中的鲁班简称LB 据说,金三银四,截止今天为止面试黄金时间已经过去十之八九,而LB恰逢是这批面 ...
- 20-Ubuntu-文件和目录命令-查看目录树型结构-tree
tree 以树状图列出当前目录下的文件目录结构 选项 含义 -d 只显示当前目录的子目录树型结构 显示当前目录的子目录和文件树型结构 例: 1.查看文档目录下的子目录和文件树型结构 2.查看文档目 ...
- pytorch clamp 与clamp_区别
pytorch clamp 与clamp_ ,有下划线的表示修改并付给自身,无下划线的表示需要返回处理后的值,比如: h = k.clamp(min=0) #将结果存入h,k保留原值 k.clamp_ ...