鼠标跟随动画特效代码（html跟随鼠标特效）

本篇文章给大家谈谈鼠标跟随动画特效代码，以及html跟随鼠标特效对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、flash中看中一个鼠标跟随特效，想把那个特效改成跟随动画显示
• 2、Flash里的鼠标跟随效果是怎么做出来的
• 3、急求鼠标后跟随文字的几个网页特效代码
• 4、网页css设置鼠标移动有特效
• 5、如何制作鼠标跟随效果
• 6、鼠标跟随文字代码

flash中看中一个鼠标跟随特效，想把那个特效改成跟随动画显示

鼠标跟随的代码：

onClipEvent (enterFrame) { xTarget = _root._xmouse; yTarget = _root._ymouse; fraction=0.5; _x = _x + (xTarget-_x)*fraction; _y = _y + (yTarget-_y)*fraction; }

Flash里的鼠标跟随效果是怎么做出来的

跟随鼠标的字符：在鼠标后面跟着一串飘动的字符，想写什么就写什么，爽吧

效果演示

第一步:把如下代码加入head区域中

style type="text/css"

.spanstyle {

COLOR: #3366ff; FONT-FAMILY: 宋体; FONT-SIZE: 10pt; POSITION: absolute; TOP: -50px; VISIBILITY: visible

}

/style

script

var x,y

var step=18

var flag=0

// Your snappy message. Important: the space at the end of the sentence!!!

var message="记得把『网页制作大宝库』添加到收藏夹噢! "

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]=-200

}

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; imessage.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; imessage.length-1; i++) {

var thisspan = eval("document.span"+i)

thisspan.left=xpos[i]

thisspan.top=ypos[i]

}

}

var timer=setTimeout("makesnake()",30)

}

/script

第二步:把如下代码加入body区域中

body onload="makesnake()"

script

!-- Beginning of JavaScript -

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;

// - End of JavaScript - --

/script

急求鼠标后跟随文字的几个网页特效代码

你随便弄个网页

以下代码插入head标签之内，保存预览，就可以看到很漂亮的文字环绕鼠标：

SCRIPT

LANGUAGE="JavaScript"

if

(document.all)

{

yourLogo

=

"我想有个家一个温暖的家";

//自己根据要求设置//

logoFont

=

"宋体";

logoColor

=

"#00ccff";

yourLogo

=

yourLogo.split('');

L

=

yourLogo.length;

TrigSplit

=

360

/

L;

Sz

=

new

Array()

logoWidth

=

100;

logoHeight

=

-30;

ypos

=

0;

xpos

=

0;

step

=

0.03;

currStep

=

0;

document.write('div

id="outer"

style="position:absolute;top:0px;left:0px"div

style="position:relative"');

for

(i

=

0;

i

L;

i++)

{

document.write('div

id="ie"

style="position:absolute;top:0px;left:0px;'

+'width:10px;height:10px;font-family:'+logoFont+';font-size:12px;'

+'color:'+logoColor+';text-align:left"'+yourLogo[i]+'/div');

}

document.write('/div/div');

function

Mouse()

{

ypos

=

event.y;

xpos

=

event.x

-

5;

}

document.onmousemove=Mouse;

function

animateLogo()

{

outer.style.pixelTop

=

document.body.scrollTop;

for

(i

=

0;

i

L;

i++)

{

ie[i].style.top

=

ypos

+

logoHeight

*

Math.sin(currStep

+

i

*

TrigSplit

*

Math.PI

/

180);

ie[i].style.left

=

xpos

+

logoWidth

*

Math.cos(currStep

+

i

*

TrigSplit

*

Math.PI

/

180);

Sz[i]

=

ie[i].style.pixelTop

-

ypos;

if

(Sz[i]

5)

Sz[i]

=

5;

ie[i].style.fontSize

=

Sz[i]

/

1.7;

}

currStep

-=

step;

setTimeout('animateLogo()',

20);

}

window.onload

=

animateLogo;

}

/script

网页css设置鼠标移动有特效

首先我们创建一个html文件，写出html文件的一些基础代码

然后我们在网页中新建一个div，并新建一个

无序列表并创建4个然后使用浏览器直接打开html文件，查看效果，可以看到我们创建的标签自带有一定的格式，

接下来我们使用下面的代码去除标签的格式，其中：list-style:none; 表示去除标签的格式width:160px; 表示设置标签的宽height:240px;表示设置标签的高background:#666666;表示设置标签的背景色float:left;表示设置标签浮动显示，并且为左浮动margin-right:20px;表示设置标签右外边距

刷新浏览器中html文件查看效果，

这里我们开始添加动画：

给

标签添加：

transition:transform 0.1s;

transform表示变换的属性，0.1上表示表换所需要的时间另外给标签添加鼠标滑动属性

li:hover{cursor:pointer;transform:translate(0,-10px);}

cursor:pointer;表示鼠标滑过显示为小手形状

transform:translate(0,-10px);translate表示移动，第一个参数为水平移动值，第二个参数为垂直移动值，

进入浏览器直接查看效果，如下图实现了鼠标滑过块，块上移的动画特效，如下图：

如何制作鼠标跟随效果

思路：以前各种教程中都用startDrag去产生鼠标跟随的效果，在这里我用别的方法去跟大家show一个鼠标跟随的效果。

其实鼠标跟随说白了不就是要求对象的位置和鼠标位置一样吗？可是如果我还想让它产生一些更炫效果，以避免跟随更单调，又该怎么办呢？我首先想到了影片剪辑的复制，因为一些效果我可以在影片剪辑中比较容易地制作出来。用我复制出来的影片剪辑做作为跟随鼠标的东东，也就是说复制出来的影片剪辑的位置和当前影片中鼠标的位置一样，这样不就可以实现鼠标跟随了吗？

步骤：

1、 先制作出跟随鼠标的那个东东的样子，转化成图形元件，（选中对象，F8）注意对象的中心点，以使后面跟随的效果更好看一些；如图

2、按 Ctrl+f8,创建一个影片剪辑，把第一步中的图形元件拖进来，制作出一个动态效果。做什么样子的效果随你的意，还可以添加一些颜色变化的效果。在该动态效果的最后一帧加上行为stop，你也可以不加，比较一下效果的不同。

3、 再创建一个影片剪辑，注意里面不要放置任何东西，（空影片剪辑，作为后面控制第二步中影片剪辑使用）；

4、 把第二步中创建的影片剪辑拖入舞台场景以外，也可以拖到场景中的，并为其取实例名,这里为fang。如图

5、 把第三步创建的空影片剪辑也拖入舞台场景中（它在场景中为一个小圆点存在），并选中它。

6、 在保持空影片剪辑选中的情况下，F9打开AS面板，输入如下代码：

如图

onClipEvent(load){ //当打开动画，空影片剪辑加载的时候

i=1; //设置影片剪辑的初始数量为1

}

onClipEvent(mouseMove){ //当鼠标移动的时候

if(i30){ //让影片剪辑最终复制出来的个数不多于30个

duplicateMovieClip(_root.fangl,"fang"+i,i);

//复制主场景中的影片剪辑，为其重命名并复制到一个新的阶层中；

_root["fang"+i]._x=_root._xmouse;

//主场景中新复制出来的影片剪辑的水平坐标位置等于当前场景中的鼠标的水平坐标位置。

_root["fang"+i]._y=_root._ymouse;

//主场景中新复制出来的影片剪辑的垂直坐标位置等于当前场景中的鼠标的垂直坐标位置。

setProperty("_root.fang"+i,_rotation,random(360));

//要复制出来的影片剪辑随机的产生旋转，以来原来的影片剪辑角度不同；

i++;//影片剪辑的个数进行自加，也就是复制一次为2，再来一次为3……

}else{

i=1;//当影片剪辑的自加个数等于并超过30时，个数回复为1，再循环复制。

}

}

7、 好了，到此为此，你可以按下ctrl+enter看看效果如何，是不是很炫？(当你鼠标在场景中拖动的时候，会出现一连串的矩形小方框向四周漾去，可会有颜色的变化呢)。你可以更改第二步中的运动过渡动画的改变状态，看看效果是不是产生了变化，对了，要想让效果更好，第二步是关键哦。效果截图如下：

当你鼠标在场景中拖动的时候，会出现一连串的矩形小方框向四周漾去

鼠标跟随文字代码

HTML

HEAD

TITLE鼠标特效篇--文本跟随鼠标/TITLE

/HEAD

BODY bgcolor="#fef4d2" onload=MouseText()

brbr

center

font color="red"h2鼠标特效篇--文本跟随鼠标/h2/font

hr width=300

brbr

!-- 案例代码1开始 --

script language=JavaScript

var x,y

var step=18

var index=0

!-- [Step1]: 这里可以更改跟随鼠标的文本信息 --

var message="鼠标特效篇--文本跟随鼠标！！"

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]=-200 }

function MouseText() {

if (index==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; imessage.length-1; i++) { var thisspan = eval("span"+(i)+".style"); thisspan.posLeft=xpos[i]; thisspan.posTop=ypos[i] }

}

else if (index==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; imessage.length-1; i++) { var thisspan = eval("document.span"+i); thisspan.left=xpos[i]; thisspan.top=ypos[i] }

}

!-- [Step2]: 在此能够设置文本的速度，数值大速度慢 --

var timer=setTimeout("MouseText()",30)

}

function MouseScroll(e){

x = (document.layers) ? e.pageX : document.body.scrollLeft+event.clientX

y = (document.layers) ? e.pageY : document.body.scrollTop+event.clientY

index=1

}

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 = MouseScroll;

/script

!-- 案例代码1结束 --

!-- 案例代码2开始 --

style type="text/css"

!-- [Step3]: 这里可以更改文本的颜色 --

.spanstyle { color: #ff0033; font-family: 宋体; font-size: 10pt; position: absolute; top: -50px; visibility: visible}

/style

!-- 案例代码2结束 --

/BODY

/HTML

关于鼠标跟随动画特效代码和html跟随鼠标特效的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。