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 相关文章推荐
jquery关于图形报表的运用实现代码
Jan 06 Javascript
myeclipse安装jQuery插件的方法
Mar 29 Javascript
JavaScript禁止页面操作的示例代码
Dec 17 Javascript
使用CDN和AJAX加速WordPress中jQuery的加载
Dec 05 Javascript
基于jQuery和hwSlider实现内容左右滑动切换效果附源码下载(一)
Jun 22 Javascript
AngularJs Dependency Injection(DI,依赖注入)
Sep 02 Javascript
JavaScript 链式结构序列化详解
Sep 30 Javascript
使用jQuery的ajax方法向服务器发出get和post请求的方法
Jan 13 Javascript
jQuery层级选择器_动力节点节点Java学院整理
Jul 04 jQuery
详解webpack中的hash、chunkhash、contenthash区别
Jan 05 Javascript
开发一个Parcel-vue脚手架工具(详细步骤)
Sep 22 Javascript
js模拟F11页面全屏显示
Sep 17 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
jquery下json数组的操作实现代码
2010/08/09 Javascript
读jQuery之六 缓存数据功能介绍
2011/06/21 Javascript
JQuery获取文本框中字符长度的代码
2011/09/29 Javascript
查找页面中所有类为test的结点的方法
2014/03/28 Javascript
用js设置下拉框为只读的小技巧
2014/04/10 Javascript
angularjs学习笔记之完整的项目结构
2015/09/26 Javascript
jQuery动画显示和隐藏效果实例演示(附demo源码下载)
2015/12/31 Javascript
第一次接触神奇的Bootstrap表单
2016/07/27 Javascript
vue2.0 自定义组件的方法(vue组件的封装)
2018/06/05 Javascript
使用weixin-java-tools完成微信授权登录、微信支付的示例
2018/09/26 Javascript
Vue入门之数量加减运算操作示例
2018/12/11 Javascript
Vue实现拖放排序功能的实例代码
2019/07/08 Javascript
vue excel上传预览和table内容下载到excel文件中
2019/12/10 Javascript
javascript设计模式 ? 享元模式原理与用法实例分析
2020/04/15 Javascript
vue + node如何通过一个Txt文件批量生成MP3并压缩成Zip
2020/06/02 Javascript
vuecli3.x中轻松4步带你使用tinymce的步骤
2020/06/25 Javascript
JS如何调用WebAssembly编译出来的.wasm文件
2020/11/05 Javascript
[39:11]DOTA2上海特级锦标赛C组资格赛#2 LGD VS Newbee第二局
2016/02/28 DOTA
如何利用Anaconda配置简单的Python环境
2019/06/24 Python
python调试神器PySnooper的使用
2019/07/03 Python
python2.7实现复制大量文件及文件夹资料
2019/08/31 Python
基于SpringBoot构造器注入循环依赖及解决方式
2020/04/26 Python
详解python os.path.exists判断文件或文件夹是否存在
2020/11/16 Python
Woods官网:加拿大最古老、最受尊敬的户外品牌之一
2020/09/12 全球购物
枚举和一组预处理的#define有什么不同
2016/09/21 面试题
2013年高中生自我评价
2013/10/23 职场文书
采购经理岗位职责
2014/02/16 职场文书
《凡卡》教学反思
2014/04/09 职场文书
自查自纠工作情况报告
2014/10/29 职场文书
班主任经验交流材料
2014/12/16 职场文书
学校艾滋病宣传活动总结
2015/05/09 职场文书
小型婚礼主持词
2015/06/30 职场文书
创业分两种人:那么哪些适合创业?,哪些适合不适合创业呢?
2019/08/23 职场文书
2019年共青团工作条例最新版
2019/11/12 职场文书
Python中生成随机数据安全性、多功能性、用途和速度方面进行比较
2022/04/14 Python
vue ant design 封装弹窗表单的使用
2022/06/01 Vue.js