把第一个字(例如‘安’)放在一个动画元件中(设名称为“X”),并且在第一贞设置鼠标跟随跟随鼠标的文字。
剩余的字各做一个动画元件跟随鼠标的文字,设置两帧,动画元件内单独建立一个层用于编写Action,在第二帧添加Action
Action的编写思路是跟随鼠标的文字:
1.
判定元件与元件“X”的上下左右间距是否与设计数值相符,相符则结束脚本,等待下一次执行。
2.如果现在的间距数值与设计数值不相符,则调整间距数值,为了使移动的效果平滑自然,建议使用开方或者正弦函数来设定调整数值的量
这样的话就可以在鼠标移动时自行调整相互间距形成连续的动画跟随效果
JavaScript的文字跟随鼠标
<html>
<head><title>asd</title>
<style type=\"text/css\">
.spanstyle {
position: absolute;
visibility: visible;
top: -50px;
font-size: 13pt;
color: #2010D0;
font-weight: bold;
}
</style>
<script>
var x,y;
var step=25;
var flag=0;
var message=\"Welcome to net Home!\";
message=message.split(\"\")
var xpos=new Array();
for(i=0;i<=message.length-1;i++) {
xpos[i]=-50;
}
var ypos=new Array()
for(i=0;i<=message.length-1;i++) {
ypos[i]=-50;
}
function handlerMM(e) {
x=(document.layers)?e.pageX:document.body.scrollLeft+event.clientX;
y=(document.layers)?e.pageY:document.body.scrollTop+event.clientY;
flag=1;
}
function makesnake() {
if(flag==1&&document.all) {
for(i=message.length-1;i>=1;i--) {
xpos[i]=xpos[i-1]+step;
ypos[i]=ypos[i-1];
}
xpos[0]=x+step;
ypos[0]=y
for(i=0;i<message.length-1;i++) {
var thisspan=eval(\"span\"+(i)+\".style\");
thisspan.posLeft=xpos[i];
thisspan.posTop=ypos[i];
}
}
else if(flag==1&&document.layers) {
for(i=message.length-1;i>=1;i--) {
xpos[i]=xpos[i-1]+step;
ypos[i]=ypos[i-1];
}
xpos[0]=x+step;
ypos[0]=y;
for(i=0;i<message.length-1;i++) {
var thisspan=eval(\"document.span\"+i);
thisspan.left=xpos[i];
thisspan.top=ypos[i]};
}
var timer=setTimeout(\"makesnake()\",30)
}
for(i=0;i<=message.length-1;i++) {
document.write(\"<span id=\'span\"+i+\"\'class=\'spanstyle\'>\");
document.write(message[i]); document.write(\"</span>\");
}
if(document.layers) {
document.captureEvents(Event.MOUSEMOVE);
}
document.onmousemove=handlerMM;
</script>
<body onload=\"makesnake()\">
</body>
</html>
1111