javascript实现鼠标点击页面 移动DIV
作者:船长op 发布时间:2024-03-13 07:52:58
标签:js,移动div
<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
0
投稿
猜你喜欢
- 每个存储过程都有默认的返回值,默认值为0。下面我们分别看看在management studio中如何查看输出参数,返回值以及结果集,然后我们
- 一、前言首先说,Python中一切皆对象,老生常谈。还有,Python提供了许多特殊方法、元类等等这样的“元编程”机制。像给对象动态添加属性
- 大家好,今天我们要看看如何用 Python制作音乐播放器。此音乐播放器播放您的歌曲,您可以在播放歌曲时暂停、恢复、设置音量,然后您可以停止音
- 用re或者string.find.以下是re代码import re#文本所在TXT文件file = '123.txt'#关键
- 基本的网站页面设计元素布局比例统计,给大家做个参考,看看您的网站是否和下面的统计一致:标志图案:位置统计结果左上角84%右上角6%上方居中6
- 最近很少写CSS了,以后也可能写的会很少了,所以还是想把自已的一些经验能和大家分享一下,希望能给大家一些帮助!这篇文章主要写的提高网页在客户
- 先看看CSS框架的利与弊前段时间一直在讨论CSS框架。很多朋友看了那三篇文章后提了不少自己意见。特别是一位北京的朋友A君,他有一个小的团体,
- 前言本文的文字及图片来源于网络,仅供学习、交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理。闲来无事听听歌,听
- ASP实现即时显示当前页面浏览人数online.asp文件 <!--#include file="dbconn.a
- SELECT语句的完整语法为:(7) SELECT (8) DISTINCT <select_list>(1) FROM <
- 本文实例为大家分享了Python获取指定网页源码的具体代码,供大家参考,具体内容如下1、任务简介前段时间一直在学习Python基础知识,故未
- JetBrains针对学生推出了免费使用资格,但是很多同学却不知道或者说不知道怎样获得免费资格,只能千辛万苦的去寻找破解密钥,但现在JetB
- 在日常工作编程中存在着各种随机事件,同样在编程中生成随机数字的时候也是一样,随机有多随机呢?在涉及信息安全的情况下,它是最重要的问题之一。每
- <?php $monthoneday=date("Ym")."01"; $oneweekday
- 前言正则表达式是对字符串提取的一套规则,我们把这个规则用正则里面的特定语法表达出来,去匹配满足这个规则的字符串。正则表达式具有通用型,不仅p
- 这里会讨论令Oracle停机时间最小化的步骤。各种形式的停机--计划的或者是非计划的--总是不断地发生,一个DBA应该有正确的备份策略,这样
- 这是最近碰到一个问题,先描述下问题:首先我有一个训练好的模型(例如vgg16),我要对这个模型进行一些改变,例如添加一层全连接层,用于种种原
- Dreamweaver(以下简称DW)提供了一种称为“Behavior”(行为)的机制,帮助你构建页面
- 可能大家在日常工作中会遇到这么个问题,现在基本的linux系统都是自带老版本的python2.7.x版本,我又不想用老版本,但直接升级可能会
- 开发环境集成开发工具:jupyter notebook 6.5.2集成开发环境:Python 3.10.6第三方库:to