Adobe Edge Animate –获取鼠标位置及跟随鼠标功能实现

Adobe Edge Animate –获取鼠标位置及跟随鼠标功能实现

版权声明:

本文版权属于 北京联友天下科技发展有限公司。

转载的时候请注明版权和原文地址。

在网络上浏览有关Edge相关问题的时候，看到有人提问如何实现获得鼠标位置的功能，笔者经过一番尝试，终于做出来了，与各位分享之。

效果图：

 

 

一、获得当前鼠标位置值的实现

新建一个工程，在stage中添加actions，在这里由于每次鼠标移动都要检测，所以添加mousemove函数：

 

var tempX ;//用于存储鼠标x轴方向的坐标值

var tempY ;//用于存储鼠标y轴方向的坐标值

if(document.all)//如果浏览器是ie，执行以下代码获取坐标值

{

      tempX = event.clientX + document.body.scrollLeft;

      tempY = event.clientY + document.body.scrollTop;

}

else{

      tempX = e.pageX;

      tempY = e.pageY;

}

二、将获取坐标值显示出来

使用Text工具添加两个文本，将获取的坐标值显示在文本上即可

同样，在mousemove函数中添加代码：

 

sym.$("Text").html("X: "+tempX);

sym.$("Text2").html("Y: "+tempY);

三、增加鼠标跟随功能

在这里简单实现了鼠标点跟随功能，我们用椭圆工具，画出一个圆圈，在滤镜（filter）属性中，将虚化（blur）值调高，使之看似一个发亮的圆点即可

 

 

接着在mousemove函数中添加跟随的css代码：

 

sym.$("Ellipse").css('left',tempX);

sym.$("Ellipse").css('top',tempY);

这样，就实现了跟随鼠标的效果。

原文地址：http://www.cnblogs.com/adobeedge/p/Adobe_Edge_GetMousePos.html