【案例】鼠标按下,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实例,我想还是比较不错的 ...
随机推荐
- hdu多校第九场 1005 (hdu6684) Rikka with Game 博弈
题意: 给一个小写字母组成的字符串,每回合轮到某人时,此人可以选择让某位+1(如果是z则变回a),或者直接结束游戏. 先手希望游戏结束时字符串字典序尽量小,后手希望游戏结束时字符串字典序尽量大,求游戏 ...
- python入门 类的继承和聚合(五)
继承 class Rocket: def __init__(self, name, distance): self.name = name self.distance = distance def l ...
- 使用Docker在服务器上部署Ubuntu,本地传文件到docker
使用Docker在服务器上部署Ubuntu,本地传文件到docker 作者:王佳乐 目录 安装Docker 安装Docker 全部安装流程: 登录服务器 ssh username@ip 检查是否已经安 ...
- Codeforces 1174B Ehab Is an Odd Person
题目链接:http://codeforces.com/problemset/problem/1174/B 题意:给定长度 n 的数组,任意俩个相加为奇数的数可以交换数组中的位置,让这个数组尽量从小到大 ...
- .net 超链接传值,传过去始终是null
今天做了一个删除功能,通过点击列表中的删除超链接,通过get请求,跳转到一个处理程序执行删除操作 . 因为不熟悉各种报错 , <%="<td> <a class='d ...
- C++之程序流程_选择结构
C/C++支持最基本的三种程序运行结构:==顺序结构.选择结构.循环结构== * 顺序结构:程序按顺序执行,不发生跳转* 选择结构:依据条件是否满足,有选择的执行相应功能* 循环结构:依据条件是否满足 ...
- HDU 3966 /// 树链剖分+树状数组
题意: http://acm.hdu.edu.cn/showproblem.php?pid=3966 给一棵树,并给定各个点权的值,然后有3种操作: I x y z : 把x到y的路径上的所有点权值加 ...
- java面试官如何面试别人
java面试官如何面试别人(一) j ...
- .Net串口通讯中的若干问题(C#多串口硬件识别、热插拔、Close方法报错问题、IsOpen的可靠性问题)
一.需求场景 最近有时间静下心来研究SDK,串口通讯的.要求实现识别cp210x和cp2303驱动的两款硬件,并且2303的优先级高,即有2303识别之,没有再识别210x:要求实现热插拔,拔掉自动断 ...
- 如何使用Hive集成Solr?
(一)Hive+Solr简介 Hive作为Hadoop生态系统里面离线的数据仓库,可以非常方便的使用SQL的方式来离线分析海量的历史数据,并根据分析的结果,来干一些其他的事情,如报表统计查询等. So ...