<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"on"+evtype,fun):oElement.addEventListener(evtype,fun,false); }, removeEventHandle:function(oElement,evtype,fun){ oElement.detachEvent"on"+evtype,fun):oElement.removeEventListener(evtype,fun,false); } } //根据开关,来让document的Click事件绑定不同的动画函数 var eventMove = function(event){ var ev = event || window.event; choMove==true"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 "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) 具体可以看代码中的注释
总结:写这个的时候想的太复杂,所以卡了好半天。思路一定要理清,再动手。
以上就是本文的全部内容,希望对大家有所帮助,谢谢对的支持!
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
更新日志
2024年11月15日
2024年11月15日
- 三国志8重制版武将图像怎么保存 三国志8重制版武将图像设置方法
- 何方.1990-我不是那种人【林杰唱片】【WAV+CUE】
- 张惠妹.1999-妹力新世纪2CD【丰华】【WAV+CUE】
- 邓丽欣.2006-FANTASY【金牌大风】【WAV+CUE】
- 饭制《黑神话》蜘蛛四妹手办
- 《燕云十六声》回应跑路:年内公测版本完成95%
- 网友发现国内版《双城之战》第二季有删减:亲亲环节没了!
- 邓丽君2024-《漫步人生路》头版限量编号MQA-UHQCD[WAV+CUE]
- SergeProkofievplaysProkofiev[Dutton][FLAC+CUE]
- 永恒英文金曲精选4《TheBestOfEverlastingFavouritesVol.4》[WAV+CUE]
- 群星《国风超有戏 第9期》[320K/MP3][13.63MB]
- 群星《国风超有戏 第9期》[FLAC/分轨][72.56MB]
- P1X3L《P1X3L》[320K/MP3][143MB]
- 群星.2022-良辰好景知几何电视剧原声带【SONY】【FLAC分轨】
- 庾澄庆.1991-管不住自己【福茂】【WAV+CUE】