您的位置：百味书屋 > 范文大全 > 经典范文 > 一款鼠标跟随特效代码正文

一款鼠标跟随特效代码

2017-01-18 06:25:56 来源网站：百味书屋

篇一：网页制作特效——鼠标特效代码

网页制作特效——鼠标特效

说明：选择下列特效中的一种，选择其中蓝色的部分，粘贴在html的<body></body>之间，预览效果。

(一)时钟环绕鼠标

<!--

dCol="0000FF"

fCol="FF0000"

sCol="00FF00"

mCol="000000"

hCol="000000"

ClockHeight=40;

ClockWidth=40;

ClockFromMouseY=0;

ClockFromMouseX=100;

d=new Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六");

m=new Array("1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月");

date=new Date();

day=date.getDate();

year=date.getYear();

if (year < 2000) year=year+1900;

TodaysDate="年 "+m[date.getMonth()]+" "+day+"日 "+d[date.getDay()]+" "+year; D=TodaysDate.split('');

H='...';

H=H.split('');

M='....';

M=M.split('');

S='.....';

S=S.split('');

Face='1 2 3 4 5 6 7 8 9 10 11 12';

font='Arial';

size=1;

speed=0.6;

ns=(document.layers);

ie=(document.all);

Face=Face.split(' ');

n=Face.length;

a=size*10;

ymouse=0;

xmouse=0;

scrll=0;

props="<font face="+font+" size="+size+" color="+fCol+">";

props2="<font face="+font+" size="+size+" color="+dCol+">";

Split=360/n;

Dsplit=360/D.length;

HandHeight=ClockHeight/4.5

HandWidth=ClockWidth/4.5

HandY=-7;

HandX=-2.5;

scrll=0;

step=0.06;

currStep=0;

y=new Array();x=new Array();Y=new Array();X=new Array();

for (i=0; i < n; i++){y[i]=0;x[i]=0;Y[i]=0;X[i]=0}

Dy=new Array();Dx=new Array();DY=new Array();DX=new Array();

for (i=0; i < D.length; i++){Dy[i]=0;Dx[i]=0;DY[i]=0;DX[i]=0}

if (ns){

for (i=0; i < D.length; i++)

document.write('<layer name="nsDate'+i+'" top=0 left=0 height='+a+' width='+a+'><center>'+props2+D[i]+'</font></center></layer>');

for (i=0; i < n; i++)

document.write('<layer name="nsFace'+i+'" top=0 left=0 height='+a+' width='+a+'><center>'+props+Face[i]+'</font></center></layer>');

for (i=0; i < S.length; i++)

document.write('<layer name=nsSeconds'+i+' top=0 left=0 width=15 height=15><font face=Arial size=3 color='+sCol+'><center><b>'+S[i]+'</b></center></font></layer>');

for (i=0; i < M.length; i++)

document.write('<layer name=nsMinutes'+i+' top=0 left=0 width=15 height=15><font face=Arial size=3 color='+mCol+'><center><b>'+M[i]+'</b></center></font></layer>');

for (i=0; i < H.length; i++)

document.write('<layer name=nsHours'+i+' top=0 left=0 width=15 height=15><font face=Arial size=3 color='+hCol+'><center><b>'+H[i]+'</b></center></font></layer>');

}

if (ie){

document.write('<div id="Od" style="position:absolute;top:0px;left:0px"><div style="position:relative">');

for (i=0; i < D.length; i++)

document.write('<div id="ieDate" style="position:absolute;top:0px;left:0;height:'+a+';width:'+a+';text-align:center">'+props2+D[i]+'</font></div>');

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

document.write('<div id="Of" style="position:absolute;top:0px;left:0px"><div

style="position:relative">');

for (i=0; i < n; i++)

document.write('<div id="ieFace" style="position:absolute;top:0px;left:0;height:'+a+';width:'+a+';text-align:center">'+props+Face[i]+'</font></div>');

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

document.write('<div id="Oh" style="position:absolute;top:0px;left:0px"><div style="position:relative">');

for (i=0; i < H.length; i++)

document.write('<div id="ieHours" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:'+hCol+';text-align:center;font-weight:bold">'+H[i]+'</div>');

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

document.write('<div id="Om" style="position:absolute;top:0px;left:0px"><div style="position:relative">');

for (i=0; i < M.length; i++)

document.write('<div id="ieMinutes" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:'+mCol+';text-align:center;font-weight:bold">'+M[i]+'</div>');

document.write('</div></div>')

document.write('<div id="Os" style="position:absolute;top:0px;left:0px"><div style="position:relative">');

for (i=0; i < S.length; i++)

document.write('<div id="ieSeconds" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:'+sCol+';text-align:center;font-weight:bold">'+S[i]+'</div>');

document.write('</div></div>')

}

(ns)?window.captureEvents(Event.MOUSEMOVE):0;

function Mouse(evnt){

ymouse = (ns)?evnt.pageY+ClockFromMouseY-(window.pageYOffset):event.y+ClockFromMouseY; xmouse = (ns)?evnt.pageX+ClockFromMouseX:event.x+ClockFromMouseX;

}

(ns)?window.onMouseMove=Mouse:document.onmousemove=Mouse;

function ClockAndAssign(){

time = new Date ();

secs = time.getSeconds();

sec = -1.57 + Math.PI * secs/30;

mins = time.getMinutes();

min = -1.57 + Math.PI * mins/30;

hr = time.getHours();

hrs = -1.575 + Math.PI * hr/6+Math.PI*parseInt(time.getMinutes())/360;

if (ie){

Od.style.top=window.document.body.scrollTop;

Of.style.top=window.document.body.scrollTop;

Oh.style.top=window.document.body.scrollTop;

Om.style.top=window.document.body.scrollTop;

Os.style.top=window.document.body.scrollTop;

}

for (i=0; i < n; i++){

var F=(ns)?document.layers['nsFace'+i]:ieFace[i].style;

F.top=y[i] + ClockHeight*Math.sin(-1.0471 + i*Split*Math.PI/180)+scrll;

F.left=x[i] + ClockWidth*Math.cos(-1.0471 + i*Split*Math.PI/180);

}

for (i=0; i < H.length; i++){

var HL=(ns)?document.layers['nsHours'+i]:ieHours[i].style;

HL.top=y[i]+HandY+(i*HandHeight)*Math.sin(hrs)+scrll;

HL.left=x[i]+HandX+(i*HandWidth)*Math.cos(hrs);

}

for (i=0; i < M.length; i++){

var ML=(ns)?document.layers['nsMinutes'+i]:ieMinutes[i].style;

ML.top=y[i]+HandY+(i*HandHeight)*Math.sin(min)+scrll;

ML.left=x[i]+HandX+(i*HandWidth)*Math.cos(min);

}

for (i=0; i < S.length; i++){

var SL=(ns)?document.layers['nsSeconds'+i]:ieSeconds[i].style;

SL.top=y[i]+HandY+(i*HandHeight)*Math.sin(sec)+scrll;

SL.left=x[i]+HandX+(i*HandWidth)*Math.cos(sec);

}

for (i=0; i < D.length; i++){

var DL=(ns)?document.layers['nsDate'+i]:ieDate[i].style;

DL.top=Dy[i] + ClockHeight*1.5*Math.sin(currStep+i*Dsplit*Math.PI/180)+scrll; DL.left=Dx[i] + ClockWidth*1.5*Math.cos(currStep+i*Dsplit*Math.PI/180); }

currStep-=step;

}

function Delay(){

scrll=(ns)?window.pageYOffset:0;

Dy[0]=Math.round(DY[0]+=((ymouse)-DY[0])*speed);

Dx[0]=Math.round(DX[0]+=((xmouse)-DX[0])*speed);

for (i=1; i < D.length; i++){

Dy[i]=Math.round(DY[i]+=(Dy[i-1]-DY[i])*speed);

Dx[i]=Math.round(DX[i]+=(Dx[i-1]-DX[i])*speed);

}

y[0]=Math.round(Y[0]+=((ymouse)-Y[0])*speed);

x[0]=Math.round(X[0]+=((xmouse)-X[0])*speed);

for (i=1; i < n; i++){

y[i]=Math.round(Y[i]+=(y[i-1]-Y[i])*speed);

x[i]=Math.round(X[i]+=(x[i-1]-X[i])*speed);

}

ClockAndAssign();

setTimeout('Delay()',40);

}

if (ns||ie)window.onload=Delay;

//-->

</SCRIPT>

(二)很酷的跟随鼠标的三色彩带

<!--

var a_Colour='fff000';

var b_Colour='00ff00';

var c_Colour='ff00ff';

var Size=120;

var YDummy=new Array(),XDummy=new Array(),xpos=0,ypos=0,ThisStep=0;step=0.6; if (document.layers){

window.captureEvents(Event.MOUSEMOVE);

function nsMouse(evnt){

xpos = window.pageYOffset+evnt.pageX+6;

ypos = window.pageYOffset+evnt.pageY+16;

}

window.onMouseMove = nsMouse;

}

else if (document.all)

{

function ieMouse(){

xpos = document.body.scrollLeft+event.x+6;

ypos = document.body.scrollTop+event.y+16;

}

document.onmousemove = ieMouse;

}

function swirl(){

for (i = 0; i < 3; i++)

篇二：简单的网页鼠标跟随代码

放入<body>标签中就OK

html {

overflow: hidden;

}

body {

position: absolute;

height: 100%;

width: 100%;

margin:0;

padding:0;

}

#screen {

background:#000;

position: absolute;

width: 100%;

height: 100%;

}

#screen span {

background: #fff;

font-size: 0;

overflow: hidden;

width: 2px;

height: 2px;

}

</style>

var Follow = function () {

var $ = function (i) {return document.getElementById(i)},

addEvent = function (o, e, f) {o.addEventListener ? o.addEventListener(e, f, false) : o.attachEvent('on'+e, function(){f.call(o)})},

OBJ = [], sp, rs, N = 0, m;

var init = function (id, config) {

this.config = config || {};

this.obj = $(id);

sp = this.config.speed || 4;

rs = this.config.animR || 1;

m = {x: $(id).offsetWidth * .5, y: $(id).offsetHeight * .5};

this.setXY();

this.start();

}

init.prototype = {

setXY : function () {

var _this = this;

addEvent(this.obj, 'mousemove', function (e) {

e = e || window.event;

m.x = e.clientX;

m.y = e.clientY;

})

start : function () {

var k = 180 / Math.PI, OO, o, _this = this, fn = this.config.fn;

OBJ[N++] = OO = new CObj(null, 0, 0);

for(var i=0;i<360;i+=20){

var O = OO;

for(var j=10; j<35; j+=1){

var x = fn(i, j).x,

y = fn(i, j).y;

OBJ[N++] = o = new CObj(O , x, y);

O = o;

}

setInterval(function() {

for (var i = 0; i < N; i++) OBJ[i].run();

}, 16);

}

var CObj = function (p, cx, cy) {

var obj = document.createElement("span");

this.css = obj.style;

this.css.position = "absolute";

this.css.left = "-1000px";

this.css.zIndex = 1000 - N;

document.getElementById("screen").appendChild(obj);

this.ddx = 0;

this.ddy = 0;

this.PX = 0;

this.PY = 0;

this.x = 0;

this.y = 0;

this.x0 = 0;

this.y0 = 0;

this.cx = cx;

this.cy = cy;

this.parent = p;

}

CObj.prototype.run = function () {

if (!this.parent) {

this.x0 = m.x;

this.y0 = m.y;

} else {

this.x0 = this.parent.x;

this.y0 = this.parent.y;

}

this.x = this.PX += (this.ddx += ((this.x0 - this.PX - this.ddx) + this.cx) / rs) / sp; this.y = this.PY += (this.ddy += ((this.y0 - this.PY - this.ddy) + this.cy) / rs) / sp; this.css.left = Math.round(this.x) + 'px';

this.css.top = Math.round(this.y) + 'px';

}

return init;

}();

</script></head>

new Follow('screen', {speed: 4,

animR : 2,

fn : function (i, j) {

return {

x : j/4*Math.cos(i),

y : j/4*Math.sin(i)

}

}})

</script>

篇三：Flash常见的鼠标跟随效果

[Flash常见的鼠标跟随效果

flash中的鼠标可以更有个性些，做起来也不算复杂，比如把鼠标指针换成你喜欢的样子，或让鼠标指针有一个灵动飘逸的跟随，如下图中的效果，怎么样？动手试试：

一、例１：让鼠标指针变变样：

把鼠标变成上面第一个图的样子，当然你爱咋样子的都行，比如一个字，一种形状，一张图片都行。

过程：

1)插入一个元件，类型为影片剪辑，自己动手画个形状吧，像上面图一那样的也行，这不要紧，要紧的是在元件编辑视图下，要将这个图形的左上角对准中心的十字，否则鼠标定位时会有误差，如图：

[小技巧：直接在舞台上绘图，完成后全选并右击，选择“转换为元件——影片剪辑——确定”，这样做影片剪辑，会自动对齐。]

2)把影片剪辑放到舞台上，实例名为：mouse_mc

3)在帧上加代码，非常简单：

mouse_mc.startDrag(false);

stage.addEventListener(Event.ENTER_FRAME,myMouse);

function myMouse(evt:Event) {

mouse_mc.x = mouseX;

mouse_mc.y = mouseY;

}

Mouse.hide();

其中Mouse.hide(); 的作用是隐藏默认的鼠标指针，如果要恢复显示：Mouse.show();

二、例２：鼠标指针后面跟随飘逸的枫叶：

过程：

1）把这几张图下载到你的电脑上，并导入到flash库中去。

2）把这些图拖到舞台上去，按图从小到大的顺序依次分别右击他们，并选“转换成元件——影片剪辑——确定”：

按“从小到大”的顺序操作，是为了叠放次序，后来居上：虽然在同一时间轴图层上，但后转换成影片剪辑的会居上方。

3）同样从小到大，依次取实例名为：

level0、 level1、 level2、 level3、 level4、level5

4）在帧上加一些简单的代码即可：

level0.startDrag(false);

stage.addEventListener(Event.ENTER_FRAME,myMouse);

function myMouse(evt:Event) {

level0.x = stage.mouseX + 20;

level0.y = stage.mouseY + 10;

var speed:uint = 3;

for (var i:uint = 1; i<=5; i++) {

this["level"+i].x += (this["level" + (i-1)].x - this["level" + i].x )/speed;

this["level"+i].y += (this["level" + (i-1)].y - this["level" + i].y )/speed;

}

三、例3：鼠标跟随飘动的文字

这个其实和例2是一样的，把图片换成一个个文字，其他的过程一样，数量有些不同，改改相关的代码即可。但这个例子，想和大家一起用代码方式做，代码如下，不理解也没关系，复制到第一帧上，可以改一改跟随文字，比如把“打倒日本帝国主义”改成“钓鱼岛是中国的固有领土”，呵呵：

//*************************从这里复制开始

**************************************

var _text:String = "打倒日本帝国主义";

var i:uint = 0;

var arrTextSprite:Array = new Array();

for (i; i<_text.length; i++) {

arrTextSprite[i] = addTextField(_text.charAt(i));

stage.addChild(arrTextSprite[i]);

}

arrTextSprite[0].startDrag(false);

stage.addEventListener(Event.ENTER_FRAME,myMouse);

function myMouse(evt:Event) {

arrTextSprite[0].x = stage.mouseX + 20;

arrTextSprite[0].y = stage.mouseY + 10;

var speed:uint = 3;

for (i = 1; i<arrTextSprite.length; i++) {

arrTextSprite[i].x += (arrTextSprite[i-1].x - arrTextSprite[i].x + 15)/speed; arrTextSprite[i].y += (arrTextSprite[i-1].y - arrTextSprite[i].y)/speed; }

}

function addTextField(str:String):Sprite {

////定义字体风格

var myTextFormat:TextFormat = new TextFormat();

myTextFormat.size = 15;

myTextFormat.align = TextFieldAutoSize.CENTER;

////添加文本框并应用风格

var myTextField:TextField = new TextField();

myTextField.width = 20;

myTextField.height = 20;

myTextField.selectable = false;

myTextField.multiline = false;

myTextField.defaultTextFormat = myTextFormat;

myTextField.text = str;

////将文本框加入到Ｓprite，就像是在舞台上将一个文本框转换成影片剪辑

var mySprite:Sprite = new Sprite();

mySprite.addChild(myTextField);

return mySprite;

}

//*********************复制到这一行结束

*******************************************

四、例4：群星飞瀑鼠标跟随效果

过程：

（一）新建一个flash文档，背景为黑色，帧频为20。

（二）绘制星星：

1）插入一个元件，类型为“图形”，确定后进入到元件编辑状态下，适当放大视图，然后进行绘图。

2）画一个无线框圆，白色，透明度33%，再调成纵向窄条；画一个无边线六边形，白色，透明66%，拽一拽上下两个顶点，让它们不那么冒尖，然后再调成窄条；再制一个窄条，透明度调成100%，即不透明。将三个窄条组合，调整长短、宽窄，然后叠起来；最后再复制一下，叠成十字形状，如下图：

3）画三个圆，无边线，白色，透明分别为33%、66%、100%，再将它们组合、重叠起来，调整好大小位置，如图：

4）将十字和圆圈叠起来，调好适当大小位置，并组合；将组合图中心点对齐到“十”字上，大小设为16*16像素，一个小星星，如图：

（三）制作星星播放动画：

1）插入一个元件，类型为“影片剪辑”，进入到元件编辑视图下，在第一帧上，将刚才做好星星拖入，中心点对齐到中间“十”字上。

2）在第10帧上插入一个关键帧，将星星Y轴下调130像素，旋转90度，并与第一帧之间创建补动画。

3）在时间轴上，再添加四个图层，分别为“图层2到图层5”，再将“图层1”已经做

好的帧分别复制粘贴到这四个图层上，如下图左：

4）由下往上，将各图层第一帧上的星星透明度分别调整为20%、40%、60%、80%、100%，最后一帧上的星星透明度都调为0%全透明。

5）再如上图右边那样，将各图层的第一层和最后一帧的位置拖动到适当的位置上

6）图层1的最后一帧（第30帧）添加代码stop()，即播放到最后停止。

（四）添加类：

在库中找到刚才做好的动画影片剪辑元件， “右击——链接”，如图勾选两个选项，“类”后面输入：mouse_mc，基类保留默认。

（五）在主场景第一帧中加入代码：

stage.addEventListener(MouseEvent.MOUSE_MOVE,onMove);

var nCount:uint = 0;

function onMove(evt:Event){

if(nCount %3 == 0){

var _mc:mouse_mc = new mouse_mc();

_mc.x = stage.mouseX;

_mc.y = stage.mouseY;

addChild(_mc);

}

nCount++;

《一款鼠标跟随特效代码》出自：百味书屋
链接地址：http://www.850500.com/news/72483.html
转载请保留,谢谢!

查看更多相关内容>>一款鼠标跟随特效代码

相关文章

一款鼠标跟随特效代码
网页制作特效——鼠标特效代码网页制作特效——鼠标特效说明：选择下列特效中的一种，选择其中蓝色的部分，粘贴在html的之间，预览效果。(一)时钟环绕鼠标<scriptlanguage=JavaSc...

上一篇：王铮亮Together歌词

下一篇：漂亮的蝴蝶结图片

推荐范文