《一款鼠标跟随特效代码.docx》由会员分享，可在线阅读，更多相关《一款鼠标跟随特效代码.docx（42页珍藏版）》请在三一文库上搜索。
1、一款鼠标跟随特效代码篇一：网页制作特效鼠标特效代码 网页制作特效鼠标特效 说明：选择下列特效中的一种，选择其中蓝色的部分，粘贴在html的body/body之间，预览效果。 (一)时钟环绕鼠标 !-将以下代码加入HTML的Body/Body之间- SCRIPT language=JavaScript !- dCol=0000FF fCol=FF0000 sCol=00FF00 mCol=000000 hCol=000000 ClockHeight=40; ClockWidth=40; ClockFromMouseY=0; ClockFromMouseX=100; d=new Array(星期日
2、,星期一,星期二,星期三,星期四,星期五,星期六); 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 2021) year=year+1900; TodaysDate=年 +mdate.getMonth()+ +day+日 +ddate.getDay()+ +year; D=TodaysDate.split(); H=.; H=H.split(); M=.; M=M.split(); S=.; S=S.s
3、plit(); 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; D
4、split=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+)yi=0;xi=0;Yi=0;Xi=0 Dy=new Array();Dx=new Array();DY=new Array();DX=new Array(); for (i=0; i D.leng
5、th; i+)Dyi=0;Dxi=0;DYi=0;DXi=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+Di+/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+Facei+/font/center/layer);
6、for (i=0; i S.length; i+) document.write(layer name=nsSeconds+i+ top=0 left=0 width=15 height=15font face=Arial size=3 color=+sCol+centerb+Si+/b/center/font/layer); for (i=0; i M.length; i+) document.write(layer name=nsMinutes+i+ top=0 left=0 width=15 height=15font face=Arial size=3 color=+mCol+cent
7、erb+Mi+/b/center/font/layer); for (i=0; i H.length; i+) document.write(layer name=nsHours+i+ top=0 left=0 width=15 height=15font face=Arial size=3 color=+hCol+centerb+Hi+/b/center/font/layer); if (ie) document.write(div id=Od style=position:absolute;top:0px;left:0pxdiv style=position:relative); for
8、(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+Di+/font/div); document.write(/div/div); document.write(div id=Of style=position:absolute;top:0px;left:0pxdivstyle=position:relative); for (i=0; i n; i+) document.w
9、rite(div id=ieFace style=position:absolute;top:0px;left:0;height:+a+;width:+a+;text-align:center+props+Facei+/font/div); document.write(/div/div); document.write(div id=Oh style=position:absolute;top:0px;left:0pxdiv style=position:relative); for (i=0; i H.length; i+) document.write(div id=ieHours st
10、yle=position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:+hCol+;text-align:center;font-weight:bold+Hi+/div); document.write(/div/div); document.write(div id=Om style=position:absolute;top:0px;left:0pxdiv style=position:relative); for (i=0; i M.length; i+) document.write(di
11、v id=ieMinutes style=position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:+mCol+;text-align:center;font-weight:bold+Mi+/div); document.write(/div/div) document.write(div id=Os style=position:absolute;top:0px;left:0pxdiv style=position:relative); for (i=0; i S.length; i+) d
12、ocument.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+Si+/div); document.write(/div/div) (ns)?window.captureEvents(Event.MOUSEMOVE):0; function Mouse(evnt) ymouse = (ns)?evnt.pageY+ClockFromMouse
13、Y-(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(
14、); 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.b
15、ody.scrollTop; Os.style.top=window.document.body.scrollTop; for (i=0; i n; i+) var F=(ns)?document.layersnsFace+i:ieFacei.style; F.top=yi + ClockHeight*Math.sin(-1.0471 + i*Split*Math.PI/180)+scrll; F.left=xi + ClockWidth*Math.cos(-1.0471 + i*Split*Math.PI/180); for (i=0; i H.length; i+) var HL=(ns)
16、?document.layersnsHours+i:ieHoursi.style; HL.top=yi+HandY+(i*HandHeight)*Math.sin(hrs)+scrll; HL.left=xi+HandX+(i*HandWidth)*Math.cos(hrs); for (i=0; i M.length; i+) var ML=(ns)?document.layersnsMinutes+i:ieMinutesi.style; ML.top=yi+HandY+(i*HandHeight)*Math.sin(min)+scrll; ML.left=xi+HandX+(i*HandW
17、idth)*Math.cos(min); for (i=0; i S.length; i+) var SL=(ns)?document.layersnsSeconds+i:ieSecondsi.style; SL.top=yi+HandY+(i*HandHeight)*Math.sin(sec)+scrll; SL.left=xi+HandX+(i*HandWidth)*Math.cos(sec); for (i=0; i D.length; i+) var DL=(ns)?document.layersnsDate+i:ieDatei.style; DL.top=Dyi + ClockHei
18、ght*1.5*Math.sin(currStep+i*Dsplit*Math.PI/180)+scrll; DL.left=Dxi + ClockWidth*1.5*Math.cos(currStep+i*Dsplit*Math.PI/180); currStep-=step; function Delay() scrll=(ns)?window.pageYOffset:0; Dy0=Math.round(DY0+=(ymouse)-DY0)*speed); Dx0=Math.round(DX0+=(xmouse)-DX0)*speed); for (i=1; i D.length; i+)
19、 Dyi=Math.round(DYi+=(Dyi-1-DYi)*speed); Dxi=Math.round(DXi+=(Dxi-1-DXi)*speed); y0=Math.round(Y0+=(ymouse)-Y0)*speed); x0=Math.round(X0+=(xmouse)-X0)*speed); for (i=1; i n; i+) yi=Math.round(Yi+=(yi-1-Yi)*speed);xi=Math.round(Xi+=(xi-1-Xi)*speed); ClockAndAssign(); setTimeout(Delay(),40); if (ns|ie
20、)window.onload=Delay; /- /SCRIPT (二)很酷的跟随鼠标的三色彩带 !-将以下代码加入HTML的Body/Body之间- script language=JavaScript !- 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.captureEvent
21、s(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.onmousemo
22、ve = ieMouse; function swirl() for (i = 0; i 3; i+)篇二：简单的网页鼠标跟随代码 放入body标签中就OK meta name=Author content=hongru.chen / style type=text/css html overflow: hidden; body position: absolute; height: 100%; width: 100%; margin:0; padding:0; #screen background:#000; position: absolute; width: 100%; height:
23、100%; #screen span background: #fff; font-size: 0; overflow: hidden; width: 2px; height: 2px; /style script type=text/javascript var Follow = function () var $ = function (i) return document.getElementById(i), addEvent = function (o, e, f) o.addEventListener ? o.addEventListener(e, f, false) : o.att
24、achEvent(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 = set
25、XY : 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; OBJN+ = OO = new CObj(null, 0, 0); for(var i=0;i360;i+=20) var O = OO; for(va
26、r j=10; j35; j+=1) var x = fn(i, j).x, y = fn(i, j).y; OBJN+ = o = new CObj(O , x, y); O = o; setInterval(function() for (var i = 0; i N; i+) OBJi.run(); , 16); var CObj = function (p, cx, cy) var obj = document.createElement(span); this.css = obj.style; this.css.position = absolute; this.css.left =
27、 -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
28、; 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
29、= Math.round(this.y) + px; return init; (); /script/head div id=screen/div script type=text/javascript 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中的鼠标可以更有个性些，做起来也不算复杂，比如把鼠标指针换成你喜欢的样子，或让鼠标指
30、针有一个灵动飘逸的跟随，如下图中的效果，怎么样？动手试试： 一、例：让鼠标指针变变样： 把鼠标变成上面第一个图的样子，当然你爱咋样子的都行，比如一个字，一种形状，一张图片都行。 过程： 1)插入一个元件，类型为影片剪辑，自己动手画个形状吧，像上面图一那样的也行，这不要紧，要紧的是在元件编辑视图下，要将这个图形的左上角对准中心的十字，否则鼠标定位时会有误差，如图： 小技巧：直接在舞台上绘图，完成后全选并右击，选择“转换为元件影片剪辑确定”，这样做影片剪辑，会自动对齐。 2)把影片剪辑放到舞台上，实例名为：mouse_mc 3)在帧上加代码，非常简单： mouse_mc.startDrag(fal
31、se); 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）把这些图拖到舞台上去，按图从小到大的顺序依次分别右击他们，并选“转换成元件影片剪辑确定”： 按“从小到大”的
32、顺序操作，是为了叠放次序，后来居上：虽然在同一时间轴图层上，但后转换成影片剪辑的会居上方。 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
33、:uint = 3; for (var i:uint = 1; i=5; i+) thislevel+i.x += (thislevel + (i-1).x - thislevel + i.x )/speed; thislevel+i.y += (thislevel + (i-1).y - thislevel + i.y )/speed; 三、例3：鼠标跟随飘动的文字 这个其实和例2是一样的，把图片换成一个个文字，其他的过程一样，数量有些不同，改改相关的代码即可。但这个例子，想和大家一起用代码方式做，代码如下，不理解也没关系，复制到第一帧上，可以改一改跟随文字，比如把“打倒日本帝国主义”改成“
34、钓鱼岛是中国的固有领土”，呵呵： /*从这里复制开始 * var _text:String = 打倒日本帝国主义; var i:uint = 0;var arrTextSprite:Array = new Array(); for (i; i_text.length; i+) arrTextSpritei = addTextField(_text.charAt(i); stage.addChild(arrTextSpritei); arrTextSprite0.startDrag(false); stage.addEventListener(Event.ENTER_FRAME,myMouse)
35、; function myMouse(evt:Event) arrTextSprite0.x = stage.mouseX + 20; arrTextSprite0.y = stage.mouseY + 10; var speed:uint = 3; for (i = 1; iarrTextSprite.length; i+) arrTextSpritei.x += (arrTextSpritei-1.x - arrTextSpritei.x + 15)/speed; arrTextSpritei.y += (arrTextSpritei-1.y - arrTextSpritei.y)/spe
36、ed; 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
37、 = false; myTextField.multiline = false; myTextField.defaultTextFormat = myTextFormat; myTextField.text = str; /将文本框加入到prite，就像是在舞台上将一个文本框转换成影片剪辑 var mySprite:Sprite = new Sprite(); mySprite.addChild(myTextField); return mySprite; /*复制到这一行结束 * 四、例4：群星飞瀑鼠标跟随效果 过程： （一）新建一个flash文档，背景为黑色，帧频为20。（二）绘制星星：
38、1）插入一个元件，类型为“图形”，确定后进入到元件编辑状态下，适当放大视图，然后进行绘图。 2）画一个无线框圆，白色，透明度33%，再调成纵向窄条；画一个无边线六边形，白色，透明66%，拽一拽上下两个顶点，让它们不那么冒尖，然后再调成窄条；再制一个窄条，透明度调成100%，即不透明。将三个窄条组合，调整长短、宽窄，然后叠起来；最后再复制一下，叠成十字形状，如下图： 3）画三个圆，无边线，白色，透明分别为33%、66%、100%，再将它们组合、重叠起来，调整好大小位置，如图： 4）将十字和圆圈叠起来，调好适当大小位置，并组合；将组合图中心点对齐到“十”字上，大小设为16*16像素，一个小星星，如
39、图： （三）制作星星播放动画： 1）插入一个元件，类型为“影片剪辑”，进入到元件编辑视图下，在第一帧上，将刚才做好星星拖入，中心点对齐到中间“十”字上。 2）在第10帧上插入一个关键帧，将星星Y轴下调130像素，旋转90度，并与第一帧之间创建补动画。 3）在时间轴上，再添加四个图层，分别为“图层2到图层5”，再将“图层1”已经做好的帧分别复制粘贴到这四个图层上，如下图左： 4）由下往上，将各图层第一帧上的星星透明度分别调整为20%、40%、60%、80%、100%，最后一帧上的星星透明度都调为0%全透明。 5）再如上图右边那样，将各图层的第一层和最后一帧的位置拖动到适当的位置上 6）图层1的最
40、后一帧（第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+;一款鼠标跟随特效代码