javascript实现鼠标点击页面 移动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) 具体可以看代码中的注释

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

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

您可能有感兴趣的文章
JS获取鼠标点击时的位置

jQuery实现鼠标点击处心形漂浮的炫酷效果示例

一个有意思的鼠标点击文字特效jquery代码

使用jQuery实现鼠标点击左右按钮滑动切换

Three.js获取鼠标点击的三维坐标示例代码