javascript实现鼠标点击页面 移动DIV


Posted in Javascript onDecember 02, 2016
<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) 具体可以看代码中的注释

总结:写这个的时候想的太复杂,所以卡了好半天。思路一定要理清,再动手。

以上就是本文的全部内容,希望对大家有所帮助,谢谢对三水点靠木的支持!

Javascript 相关文章推荐
JS图片自动轮换效果实现思路附截图
Apr 30 Javascript
JavaScript弹出新窗口后向父窗口输出内容的方法
Apr 06 Javascript
JavaScript中浅讲ajax图文详解
Nov 11 Javascript
基于JavaScript实现带缩略图的轮播效果
Jan 12 Javascript
原生JS实现垂直手风琴效果
Feb 19 Javascript
微信小程序商品详情页规格属性选择示例代码
Oct 30 Javascript
jQuery替换节点元素的操作方法
Mar 18 jQuery
vue.js图片转Base64上传图片并预览的实现方法
Aug 02 Javascript
微信小程序全局变量改变监听的实现方法
Jul 15 Javascript
原生js实现商品筛选功能
Oct 28 Javascript
JavaScript位置参数实现原理及过程解析
Sep 14 Javascript
如何用JavaScipt测网速
May 09 Javascript
jquery对所有input type=text的控件赋值实现方法
Dec 02 #Javascript
bootstrap使用validate实现简单校验功能
Dec 02 #Javascript
在网页中插入百度地图的步骤详解
Dec 02 #Javascript
PHP获取当前页面完整URL的方法
Dec 02 #Javascript
jQuery插件fullPage.js实现全屏滚动效果
Dec 02 #Javascript
jquery 追加元素append、prepend、before、after用法与区别分析
Dec 02 #Javascript
jquery实现图片列表鼠标移入微动
Dec 01 #Javascript
You might like
php引用传值实例详解学习
2013/11/06 PHP
Yii使用find findAll查找出指定字段的实现方法
2014/09/05 PHP
最新制作ThinkPHP3.2.3完全开发手册
2015/11/23 PHP
Ubuntu彻底删除PHP7.0的方法
2018/07/27 PHP
jQuery Ajax之load()方法
2009/10/12 Javascript
url参数中有+、空格、=、%、&amp;、#等特殊符号的问题解决
2013/05/15 Javascript
jQuery焦点图切换特效插件封装实例
2013/08/18 Javascript
jquery实现侧边弹出的垂直导航
2014/12/09 Javascript
原生JS封装Ajax插件(同域、jsonp跨域)
2016/05/03 Javascript
在localStorage中存储对象数组并读取的方法
2016/09/24 Javascript
WEB 前端开发中防治重复提交的实现方法
2016/10/26 Javascript
ReactJs快速入门教程(精华版)
2016/11/28 Javascript
jQuery Validate 无法验证 chosen-select元素的解决方法
2017/05/17 jQuery
nodejs前端模板引擎swig入门详解
2018/05/15 NodeJs
vue.js图片转Base64上传图片并预览的实现方法
2018/08/02 Javascript
解决layer.msg 不居中 ifram中的问题
2019/09/05 Javascript
微信小程序实现一张或多张图片上传(云开发)
2019/09/25 Javascript
package.json中homepage属性的作用详解
2020/03/11 Javascript
Python素数检测的方法
2015/05/11 Python
Python 的内置字符串方法小结
2016/03/15 Python
Python探索之ModelForm代码详解
2017/10/26 Python
在python中以相同顺序shuffle两个list的方法
2018/12/13 Python
Python学习笔记基本数据结构之序列类型list tuple range用法分析
2019/06/08 Python
python开头的coding设置方法
2019/08/08 Python
Python判断远程服务器上Excel文件是否被人打开的方法
2020/07/13 Python
python mock测试的示例
2020/10/19 Python
Python基于Webhook实现github自动化部署
2020/11/28 Python
CSS3制作ajax loader icon实现思路及代码
2013/08/25 HTML / CSS
英国泰坦旅游网站:全球陪同游览,邮轮和铁路旅行
2016/11/29 全球购物
全球性的在线购物网站:Zapals
2017/03/22 全球购物
互联网创业计划书的书写步骤
2014/01/28 职场文书
政风行风评议整改方案
2014/09/15 职场文书
铅球加油稿100字
2014/09/26 职场文书
高三生物教学反思
2016/02/22 职场文书
创业分两种人:那么哪些适合创业?,哪些适合不适合创业呢?
2019/08/23 职场文书
详解Python常用的魔法方法
2021/06/03 Python