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

posted @ 2013-07-17 17:02 Adobe Edge 阅读(...) 评论(...) 编辑 收藏