javascript实现鼠标点击页面 移动DIV
作者:船长op 时间:2024-03-13 07:52:58
<script type="text/javascript">
//那种方式移动
var choMove = false;
//是否绑定过click
var isClick = true;
//引用DIV
var oDiv = null;
//引用Input
var oInput = null;
//封装事件绑定的通用对象
var evnetUtil = {
addEventHandle:function(oElement,evtype,fun){
oElement.attachEvent?oElement.attachEvent("on"+evtype,fun):oElement.addEventListener(evtype,fun,false);
},
removeEventHandle:function(oElement,evtype,fun){
oElement.detachEvent?oElement.detachEvent("on"+evtype,fun):oElement.removeEventListener(evtype,fun,false);
}
}
//根据开关,来让document的Click事件绑定不同的动画函数
var eventMove = function(event){
var ev = event || window.event;
choMove==true?clickMove(ev):slideMove(ev);
}
//根据鼠标点击位置移动动画一
var clickMove = function(cev){
var mouseX = cev.clientX; //鼠标点击的横坐标
var mouseY = cev.clientY; //鼠标点击的纵坐标
//取消document的click事件绑定的函数,以避免在动画中,击点页面会又一次触发这个动画
evnetUtil.removeEventHandle(document,'click',eventMove);
var setCliMove = setInterval(function(){
var oDivLeft = oDiv.offsetLeft; //DIV在页面中的Left值;
var oDivTop = oDiv.offsetTop; //DIV在页面中的Top值;
/*横坐标移动的速,即每30毫秒,移动speedX距离
*mouseX-oDivLeft当前DIV与目标点之间的距离,
*除以5,就是将这个距离分成5份
*分母5不变,距离越小,所以移动速度就越慢
*/
var speedX = (mouseX-oDivLeft)/5;
//纵坐标移动的速度,即每30毫秒,移动speedX距离,这个speedY是变化的,距离鼠标点击的位置越近,这个值越小
var speedY = (mouseY-oDivTop)/5;
/*这里必需使用向上或向下取舍的函数(Math.ceil和Math.floor)
*因为speedX和speedY是一个变化的值,即将DIV和鼠标点击的点X坐标之间的距离,平均分成5分,
*mouseX == oDiv.offsetLeft就永远不可能相等,就不会执行if里面的语句了,所以这将一直循环下去
*/
oDivLeft = mouseX-oDivLeft>0?Math.ceil(oDivLeft+speedX):Math.floor(oDivLeft+speedX);
oDivTop = mouseY-oDivTop>0?Math.ceil(oDivTop+speedY):Math.floor(oDivTop+speedY);
console.log(oDivLeft);
//用当位置的TOP或left值,去加上每一次,即每30毫秒移动的距离,就得到新的坐标
oDiv.style.left = oDivLeft + "px";
oDiv.style.top = oDivTop + "px";
//如果到达鼠标点击的位置
if(mouseX == oDiv.offsetLeft && mouseY == oDiv.offsetTop){
//清除这个运动动画
clearInterval(setCliMove);
//恢复document的click绑定的事件
evnetUtil.addEventHandle(document,'click',eventMove);
}
},30);
}
//根据标鼠标轨迹移动动画二
var slideMove = function(cev){
alert("正在制做当中……");
}
//绑定事件,改变input状态(事件对象,input对象,标识点击的那个Input)
var binds = function(cev,oElem,index){
//防止多次点击同一个Input
if(oElem.className == ""){
oElem.value=oElem.value+"(已激活)"
oElem.className = "cur";
}
//点击不同的input显示不同文字和启用不同动画开关
if(index==0){
oInput[1].value = "根据标鼠标轨迹移动";
oInput[1].className = "";
choMove = true;
}else{
oInput[0].value = "根据鼠标点击位置移动";
oInput[0].className = "";
choMove = false;
}
//只绑document定一次,再次点击无需绑定,只需要启用不同的动画模式
if(isClick){
evnetUtil.addEventHandle(document,'click',eventMove);
isClick = false;
}
//防止冒泡
cev.stopPropagation ?cev.stopPropagation() : (cev.cancelBubble=true);
}
window.onload = function(){
oInput = document.getElementsByTagName("input");
oDiv = document.getElementsByTagName("div")[0];
oInput[0].onclick = function(event){
var This = this;
var ev = event || window.event;
binds(ev,This,0);
}
oInput[1].onclick = function(event){
var This = this;
var ev = event || window.event;
binds(ev,This,1);
}
}
</script>
一、原理分析:
1.怎么移动?
要移动DIV到指到的坐标点(X,Y),其实质,就是同时改变DIV的DIV.style.top 和 DIV.style.left 这两个值;
2.如何看到移动?
因为要有移动效果,而不是突然间就将某个DIV的TOP和LEFT值变化为另一个值,所以就要用到:
setInterval这个阻塞函数,让函数的执行,延迟,这样就能看到移动效果。(只要是有的运动和移动都要用到这个函数);
二、现实思路
1.速度
有运动,肯定就离不开速度这个概念,在这个例子中,速度是变化的,即DIV和鼠标点击的坐标,之间的距离越大,这个速度应该越快。反之速度越慢。以保证在同一个时间内,完成不同距离的运动。
所以 速度=距离/固定值;
这样,当距离越大,速度越快。反之越小
2.如何判断DIV移动到了鼠标点击的点?
即:DIV的LEFT值和TOP值,与鼠标点击时的X和Y值都相等。
在这个例子中。要使用函数(Math.ceil和Math.floor) 具体可以看代码中的注释
总结:写这个的时候想的太复杂,所以卡了好半天。思路一定要理清,再动手。
来源:http://www.cnblogs.com/lufy/archive/2012/07/18/2597331.html
标签:js,移动div


猜你喜欢
关于go-zero服务自动收集问题分析
2024-04-26 17:29:51

win10下opencv-python特定版本手动安装与pip自动安装教程
2022-09-29 14:03:02

带农历的JavaScript日期时间js代码
2010-08-01 10:29:00
PHP 用数组降低程序的时间复杂度
2023-10-08 11:38:03

Tensorflow2.10实现图像分割任务示例详解
2021-08-31 13:14:47

python中的GUI实现计算器
2022-04-18 02:29:05

Django Python 获取请求头信息Content-Range的方法
2022-09-09 07:04:53
Python BeautifulSoup基本用法详解(通过标签及class定位元素)
2022-11-06 10:50:49

关于Tensorflow中的tf.train.batch函数的使用
2023-11-04 19:49:54
详解go语言json的使用技巧
2023-09-12 10:27:48
python爬虫爬取网页数据并解析数据
2022-03-03 06:25:02

Pytorch:Conv2d卷积前后尺寸详解
2021-01-18 23:36:54

python实现UDP协议下的文件传输
2023-10-10 10:26:20

一段有趣的js代码的研究
2008-04-29 21:47:00
ubuntu下设置mysql自动备份的例子
2024-01-21 18:09:08
Python 使用folium绘制leaflet地图的实现方法
2023-06-11 05:58:36

LyScript实现计算片段Hash并写出Excel的示例代码
2021-11-20 18:41:45

vue watch监控对象的简单方法示例
2024-05-05 09:11:00
面试官常问之说说js中var、let、const的区别
2024-05-09 15:06:58
按钮的反馈
2009-01-01 20:06:00
