小球随鼠标移动
来源:互联网 发布:linux device is busy 编辑:程序博客网 时间:2024/06/07 00:36
html:
<div id="box"></div>
css:
div{
width:150px;
height:150px;
background:green;
border-radius:50%;
position:absolute;
}
js:
window.onload = function(){
/*
分析:
有三个事件;
1.鼠标按下事件;
分析:鼠标按下的时候,点击的点与圆圈的边缘的距离是固定不变的,因为圆球随鼠标移动的时候,点不动,只是圆球移动 所以我们在鼠标按下的时候获取这段距离就可以得到left的距离了
1.获取鼠标的e.clientX和e.clientY的值;
2.offsetX = e.clientX-this.offsetLeft;
offsetY = e.clientY-this.offsetTop;
3.因为考虑到鼠标抬起的时候,按下的不会被关闭 var isDown = false;
2.鼠标移动事件;
1.鼠标移动的时候改变的有e.clientX和
2.我们要求的就是left的距离 = e.client- offsetX;
3.还要判断 不能超过左右上下两边;
右边的最大范围:整个屏幕的宽-小球的宽
下边的最大范围是:整个屏幕的高-小球的高;
4.鼠标移动的时候要判断是否处于点击事件;
3.鼠标抬起事件
关闭鼠标按下事件;
鼠标样式回原样
*/
//获取元素;
var ball = document.getElementById("box");
var offsetX;
var offsetY;
var isDown = false; //这步的作用是在鼠标移动那部用到的,要是没有这个鼠标再次放到小球上的时候就不知道是不是处于鼠标按下状态;
//鼠标按下事件;
ball.onmousedown = function(e){
var e = e || window.event;
offsetX = e.clientX-this.offsetLeft;
offsetY = e.clientY-this.offsetTop;
this.style.cursor = "move";
isDown = true;
}
// 鼠标移动事件;
window.onmousemove = function(e){
if(!isDown){
return;
}
var e = e || window.event;
var newLeft = e.clientX-offsetX;
var newTop = e.clientY-offsetY;
var maxLeft = document.documentElement.clientWidth-ball.offsetWidth;
var maxTop = document.documentElement.clientHeight-ball.offsetHeight;
if(newLeft>=maxLeft){
newLeft = maxLeft
}
if(newLeft<=0){
newLeft = 0;
}
if(newTop>=maxTop){
newTop = maxTop;
}
if(newTop<=0){
newTop = 0;
}
ball.style.left = newLeft + "px";
ball.style.top = newTop + "px";
}
window.onmouseup = function(){
ball.style.cursor = "default";
isDown = false;
}
}
<div id="box"></div>
css:
div{
width:150px;
height:150px;
background:green;
border-radius:50%;
position:absolute;
}
js:
window.onload = function(){
/*
分析:
有三个事件;
1.鼠标按下事件;
分析:鼠标按下的时候,点击的点与圆圈的边缘的距离是固定不变的,因为圆球随鼠标移动的时候,点不动,只是圆球移动 所以我们在鼠标按下的时候获取这段距离就可以得到left的距离了
1.获取鼠标的e.clientX和e.clientY的值;
2.offsetX = e.clientX-this.offsetLeft;
offsetY = e.clientY-this.offsetTop;
3.因为考虑到鼠标抬起的时候,按下的不会被关闭 var isDown = false;
2.鼠标移动事件;
1.鼠标移动的时候改变的有e.clientX和
2.我们要求的就是left的距离 = e.client- offsetX;
3.还要判断 不能超过左右上下两边;
右边的最大范围:整个屏幕的宽-小球的宽
下边的最大范围是:整个屏幕的高-小球的高;
4.鼠标移动的时候要判断是否处于点击事件;
3.鼠标抬起事件
关闭鼠标按下事件;
鼠标样式回原样
*/
//获取元素;
var ball = document.getElementById("box");
var offsetX;
var offsetY;
var isDown = false; //这步的作用是在鼠标移动那部用到的,要是没有这个鼠标再次放到小球上的时候就不知道是不是处于鼠标按下状态;
//鼠标按下事件;
ball.onmousedown = function(e){
var e = e || window.event;
offsetX = e.clientX-this.offsetLeft;
offsetY = e.clientY-this.offsetTop;
this.style.cursor = "move";
isDown = true;
}
// 鼠标移动事件;
window.onmousemove = function(e){
if(!isDown){
return;
}
var e = e || window.event;
var newLeft = e.clientX-offsetX;
var newTop = e.clientY-offsetY;
var maxLeft = document.documentElement.clientWidth-ball.offsetWidth;
var maxTop = document.documentElement.clientHeight-ball.offsetHeight;
if(newLeft>=maxLeft){
newLeft = maxLeft
}
if(newLeft<=0){
newLeft = 0;
}
if(newTop>=maxTop){
newTop = maxTop;
}
if(newTop<=0){
newTop = 0;
}
ball.style.left = newLeft + "px";
ball.style.top = newTop + "px";
}
window.onmouseup = function(){
ball.style.cursor = "default";
isDown = false;
}
}
阅读全文
0 0
- 小球随鼠标移动
- 小球随鼠标移动
- 鼠标控制小球移动
- 跟随鼠标移动的小球
- 小球跟随鼠标点击移动
- 小球跟随鼠标移动效果
- 小球跟随鼠标移动效果
- U3D 小球跟随鼠标在地上移动(二)
- JS原生实现多个小球跟着鼠标移动
- LayaAir 自旋转的小球跟随鼠标移动
- 移动小球
- 移动小球
- 移动小球
- 移动小球
- 移动小球
- 移动小球
- 键盘、鼠标控制小球
- 窗口随鼠标移动
- 公众号服务号自定义菜单获取code
- es构成
- SpringMVC
- 集合中的面试题
- Redis服务器如何发送回复内容给客户端
- 小球随鼠标移动
- 欢迎使用CSDN-markdown编辑器
- Redis设实
- CRm做到staff时出现页面调用不到post和department的情况,报出空指针异常
- PCL滤波I
- Maven 如何打包可运行jar包
- 【loli的胡策】NOIP训练8.15(找规律+暴力)
- SVM支持矢量机
- 关于thinkphp框架的防止非法进入+frame框架强制主页面退出