这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本篇文章主要介绍 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) 具体可以看代码中的注释
总结:写这个的时候想的太复杂,所以卡了好半天。思路一定要理清,再动手。
来源: http://www.phperz.com/article/17/0516/329982.html