最新-一款鼠标跟随特效代码精品

合集下载

【网页特效代码-鼠标特效】鼠标随移动的方向而改变

<html xmlns:v="urn:schemas-microsoft-com:vml"><STYLE>body{margin:0px;cursor:url(/jscode/images/Select.cur)}v\:* { Behavior: url(#default#VML) }</STYLE><script>var trace=""var vPvar r=0var vSvar p=new Object()var lineColor=[[255,0,0],[255,0,255]]p.x=0;p.y=0function init(){document.body.onmousedown=function(){if (event.button==1 || event.button==4){if (event.button==1) vP=document.createElement("v:PolyLine"); else vP=document.createElement("v:line");}vS=document.createElement("v:stroke")vP.filled="false"vP.appendChild(vS)document.body.appendChild(vP)trace="";if (event.button==4) vP.from.value=event.clientX + "," + event.clientY; }document.body.onmousemove=function(){if (event.button==1){pos=event.clientX + "," + event.clientY + " ";trace+=posvS.color="rgb(255,0,0)"vP.points.value=trace}if (event.button==4) {vP.to.value=event.clientX + "," + event.clientY;}rImg.style.left=event.clientX-20;rImg.style.top=event.clientY-20;var cX = p.x-event.clientX;var cY = p.y-event.clientY;if (cX || cY) {status ="cX:"+cX+" -cY:"+cYrotationImg(180-parseInt(Math.atan2(cY,cX)*180/Math.PI,10));}p.x=event.clientX;p.y=event.clientY;}document.body.onmouseup=function(){vS.EndArrow="Block"}document.onselectstart=function(){return false}}function rotationImg(flag){window.status=r + " to " + flag;var step=3;while(r-flag>180) flag+=360while(flag-r>180) flag-=360r += (flag-r)/steprImg.style.rotation=90-r;}</script><body onload="init()"><v:image id="rImg" src="/teixiao/UploadFiles_4612/200802/20080224102453174.gif" style="position:absolute;top:0;left:0;width:37;height:37;0" ><v:Stroke dashstyle="Solid"/></v:image></body>。

鼠标跟随特效代码

鼠标跟随代码物体对鼠标的跟随可以采用在帧上添加as语句starDrag的方法来实现。

但是采用这种方法所实现的跟随过程太生硬，跟得实在是紧，也就是当鼠标移动到别的位置，物体也很快的移动了过来，假如要让物体慢慢（速度可以控制）的靠近鼠标，使用starDrag 这条语句就不能做到。

starDrag语句的功能其实是和下面的代码相同的。

onClipEvent (enterFrame) { xTarget = _root._xmouse; yTarget = _root._ymouse; _x = xTarget; _y = yTarget;}这几行代码是添加在物体（影片剪辑）上面的。

其中，语句_x = xTarget 和_y = yTarget的作用是使物体的坐标定位到（xTarget，yTarget）上，而（xTarget，yTarget）就是鼠标的当前坐标。

修改这几行代码，就可以使物体在鼠标移动后，慢慢的靠近鼠标。

_x = xTarget 等价于_x = xTarget + _x - _x（加一个减一个）即：_x =_x + （xTarget - _x）其中的（xTarget - _x）是物体的目标位置与当前位置的坐标差如果让（xTarget - _x）乘上一个小于1的系数，那么物体就不会突然移动到坐标（xTarget，yTarget）上，而是慢慢的靠过去。

于是，修改后的代码如下：onClipEvent (enterFrame) { xTarget = _root._xmouse; yTarget = _root._ymouse; fraction=0.5; _x = _x + (xTarget-_x)fraction; _y = _y + (yTarget-_y)fraction; }实现了慢慢靠近对“慢慢靠近”的加以利用：一个跟一个场景上放置一个影片剪辑，instance name命名为darg0在帧上添加代码：copies = 5;for (var i = 1; i=copies; i++) { duplicateMovieClip (drag0, drag+i, i); (drag+i).num = i;}上面的代码复制了5个，drag1～drag5，连同drag0，场景上共6个其中，还给drag1～drag5定义了内部变量drag1.num～drag5.num在场景上的drag0上面添加代码：onClipEvent (enterFrame) { if (num) { xTarget = (_root.drag+(num-1))._x; yTarget =(_root.drag+(num-1))._y; } else { xTarget = _root._xmouse; yTarget = _root._ymouse; } fraction = .5; _x += (xTarget-_x)fraction; _y += (yTarget-_y)fraction;}这几行代码使得drag0跟随着鼠标，drag1跟随着drag0，drag2跟随着drag1，……，drag5跟随着drag4解释一下if这个判断语句因为drag1.num～drag5.num的值都不为空，所以对于drag1～drag5这5个影片剪辑，执行的代码是：xTarget = (_root.drag+(num-1))._x;yTarget = (_root.drag+(num-1))._y;也就是跟随着前一个而对于drag0，由于没有给它定义num，它的值为空，所以对于drag0，执行的代码是：xTarget = _root._xmouse;yTarget = _root._ymouse;也就是跟随着鼠标“一个跟一个”代码的另一种写法上面的“一个跟一个”的制作，是在场景上只放置了一个影片剪辑，然后在影片剪辑上添加as代码，再通过在帧上添加as代码（duplicateMovie）来复制影片剪辑。

js实现鼠标跟随运动效果

js实现⿏标跟随运动效果⿏标跟随运动效果展⽰1、使⽤命令创建基本结构ul.cursorPlay#cursorPlay>li*12>a>img+div>span2、给span标签添加字段3、设置基本的样式1、cursorPlay的宽度 992px，⾼度600px2、cursorPlay li背景为⽩⾊，内边距为8px，外边距5px,显⽰浮动为左浮动3、cursorPlay li a,cursorPlay li a img显⽰为块状并且为相对布局4、cursorPlay li a添加overflow:hidden5、cursorPlay li a div为绝对布局，宽度和⾼度均为100%，设置背景颜⾊为rgba4、js添加动态效果（⽅向0,1,2,3分别为上，右，下，左）1）、给绑定⿏标进⼊或者出去的事件$("#cursorPlay li").on("mouseenter mouseleave",function(event){var evType = event.type;var direction = getDir($(this), {x: event.pageX,y: event.pageY});// console.log("evtype:"+evType+",dir:"+direction);moveTo($(this),direction, evType);});2、2）、使⽤getDir获取⿏标移动的⽅向，coordinates坐标计算⿏标划⼊画出⽅向函数（搜索关键词“jquery计算⿏标划⼊划出⽅向”）direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4;function getDir($el, coordinates){var w = $el.width(),h = $el.height(),x = (coordinates.x - $el.offset().left - (w / 2)) * (w > h ? (h / w) : 1),y = (coordinates.y - $el.offset().top - (h / 2)) * (h > w ? (w / h) : 1),direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4;return direction;}3）、添加移动函数moveTo，三个参数分别为选择器，⽅向，⿏标划⼊画出类型，通过判断⿏标划⼊类型，来⾃定义选择器初始位置，然后重定义css样式，当⿏标划出时再重定义每个⽅向上的位置function moveTo($el, direction, type){var $layer = $el.find("div");var coord = {};if(type === "mouseenter"){switch(direction){case 0 : $layer.css("top","-100%").css("left","0px");break;case 1 : $layer.css("left","100%").css("top","0px");break;case 2 : $layer.css("top","100%").css("left","0px");break;case 3 : $layer.css("left","-100%").css("top","0px");break;}coord = {left:0,top:0}}else{switch(direction){case 0 : coord = {left:0,top:'-100%'};break;case 1 : coord = {left:'100%',top:0};break;case 2 : coord = {left:0,top:'100%'};break;case 3 : coord = {left:'-100%',top:0};break;}}$layer.animate(coord,300);}以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

一款鼠标跟随特效代码

一款鼠标跟随特效代码篇一：网页制作特效——鼠标特效代码网页制作特效——鼠标特效说明：选择下列特效中的一种，选择其中蓝色的部分，粘贴在html的之间，预览效果。

(一)时钟环绕鼠标之间-->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 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=(yers);ie=(document.all);Face=Face.split(' ');n=Face.length;a=size*10;ymouse=0;xmouse=0;scrll=0;props="";props2="";Split=360/n;Dsplit=360/D.length;HandHeight=ClockHeight/4.5 HandWidth=ClockWidth/4.5HandY=-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 Dy=new Array();Dx=new Array();DY=new Array();DX=new Array();for (i=0; i if (ns){for (i=0; i document.write(''+props2+D[i]+'');for (i=0; i document.write(''+props+Face[i]+'');for (i=0; i document.write(''+S[i]+'');for (i=0; i document.write(''+M[i]+'');for (i=0; i document.write(''+H[i]+'');}if (ie){document.write('');for (i=0; i document.write(''+props2+D[i]+'');document.write('');document.write(' style="position:relative">');for (i=0; i document.write(''+props+Face[i]+'');document.write('');document.write('');for (i=0; i document.write(''+H[i]+'');document.write('');document.write('');for (i=0; i document.write(''+M[i]+'');document.write('')document.write('');for (i=0; i document.write(''+S[i]+'');document.write('')}(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 varF=(ns)?yers['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 varHL=(ns)?yers['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 varML=(ns)?yers['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 varSL=(ns)?yers['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 varDL=(ns)?yers['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 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 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;//-->(二)很酷的跟随鼠标的三色彩带之间-->var a_Colour='fff000';var b_Colour='00ff00';var c_Colour='ff00ff';var Size=120;var YDummy=new Array(),XDummy=newArray(),xpos=0,ypos=0,ThisStep=0;step=0.6; if (yers){ 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 篇二：简单的网页鼠标跟随代码放入标签中就OKhtml {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;}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 var O = OO;for(var j=10; j 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 }, 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;}();new Follow('screen', {speed: 4,animR : 2,fn : function (i, j) {return {x : j/4*Math.cos(i),y : j/4*Math.sin(i)}}})篇三：Flash常见的鼠标跟随效果[Flash常见的鼠标跟随效果flash中的鼠标可以更有个性些，做起来也不算复杂，比如把鼠标指针换成你喜欢的样子，或让鼠标指针有一个灵动飘逸的跟随，如下图中的效果，怎么样？动手试试：一、例１：让鼠标指针变变样：把鼠标变成上面第一个图的样子，当然你爱咋样子的都行，比如一个字，一种形状，一张图片都行。

常用的网页特效代码【VIP专享】

常用的网页特效代码1．文本向上循环滚动说明:文本自动向上循环滚动，鼠标放到上面还会暂时停下来。

果:代码:2．页面自动滚屏效果<body onLoad="scrollit()"><SCRIPT language="JavaScript"> </SCRIPT>3．滚动的文字说明说明鼠标放到链接上就会出现一个说明框，里面有滚动的文字说明效果把鼠标放上来试试代码4．飘动的字符跟随鼠标说明在鼠标后面跟着一串飘动的字符效果看看就知道啦！Array代码5．一群小点跟随鼠标说明跟随鼠标的一群小点，就象星星一样效果看看就知道啦！代码6．接触链接自动打开窗口说明鼠标放到链接上，就立刻弹出警告框效果试试代码7．数字时钟说明数字化的时钟效果现在时刻：12:07:54代码8．显示停留的时间说明显示他人在页面停留的时间，而且可以作出提醒效果代码9．有影子的数字时钟说明这个时钟是有影子的，而且还在不停地走着呢效果12:09:3612:09:36代码10．打字效果说明:文字在状态栏上从左往右一个一个地显示，就象你打出的字一样效果:看看状态栏！Array代码:11．文字不停闪烁说明:一段文字在状态栏上不停跳动显示，可以作为提示信息效果:看看状态栏！代码:12．图象大小自动变化说明: 把一张图片变形扭曲成各种不同的长宽，非常好玩效果:代码:13．漫天飞雪说明: 漫天飞雪效果: 看到了吗？代码:14．自由移动的图片(一)说明:自由移动的图片效果:看到了吗？代码:再把<body>改为：15．自由移动的图片(二)说明: 图片在页面内随意飘动，遇到边界还会反弹。

效果: 看到了吗？代码:16．状态栏里的动态欢迎语说明浏览器的状态栏里出现一个字接一个字往左跑的欢迎语！效果看看状态栏：）代码17．背景色变换按钮:18．去掉超链接的下划线说明有时候看着那超链接的下划线挺讨厌的，把下面这段代码放到网页源代码<head>与</head>之间，下划线就无影无踪啦！注意，网页的<body>标签里不能再有link之类的属性，否则本效果会失效！效果试试就知道啦！代码19．给页面加保护说明如果你不想让辛辛苦苦做出来的东西被人轻易地Copy&Paste走的话，不妨在HTML里加入下面这段代码。

flash鼠标跟随

Flash鼠标跟随简介Flash是一种常用的多媒体技术，可以创建动画、游戏和交互式应用程序。

在Flash中，鼠标跟随是一种常见的交互效果，它可以使对象或元素在鼠标移动时进行相应的移动。

在本文中，我们将学习如何使用Flash来实现鼠标跟随效果。

我们将介绍基本的思路和步骤，并给出示例代码帮助你更好地理解。

实现步骤步骤1：创建一个新的Flash项目首先，你需要创建一个新的Flash项目。

打开Flash软件，点击“文件”菜单，选择“新建”来创建一个新的项目。

步骤2：添加元件在Flash项目中，你可以使用元件来创建和管理图形、动画和其他对象。

我们将添加一个元件来实现鼠标跟随效果。

点击菜单栏上的“插入”按钮，选择“新建元件”。

在弹出的对话框中，选择一个合适的元件类型，比如影片剪辑(Symbol)。

步骤3：设置鼠标跟随1.将创建的元件拖动到舞台上。

2.在舞台上，选中该元件，然后点击顶部的“属性”面板。

3.在属性面板中，找到“动画”选项卡，并点击“创建新的动画”，创建一个新的动画帧序列。

4.在舞台上的元件中，选中第1帧，在顶部的“属性”面板中，找到“动作”选项卡。

5.在“动作”选项卡中，选择“鼠标”并勾选“跟随”。

步骤4：设置对象的移动现在，当鼠标在舞台上移动时，元件将跟随鼠标进行移动。

但是，通常我们希望元件有一定的平滑移动效果。

1.在舞台上，选中元件的第1帧，在属性面板中选择“动作”选项卡。

2.在“动作”选项卡中，选择“脚本”并输入以下代码：onEnterFrame = function () {this._x += ( _xmouse - this._x ) / 10;this._y += ( _ymouse - this._y ) / 10;}以上代码创建了一个onEnterFrame函数，它在每一帧都会执行。

函数中的代码计算了元件的新位置，并使用简单的缓动效果让元件平滑地跟随鼠标移动。

步骤5：导出并测试最后一步是导出Flash项目并测试鼠标跟随效果。

【网页特效代码-鼠标特效】疯狂攻击鼠标

}
}
function Split(){
Clrs=new Array('fff000','ffffff','ffa500')
var ntscp=yers,msie=document.all;
if (yers){
for (i = 0; i < amount; i++)
{
if (i < amount-1)
{ntscp['nsa'+i].top=ntscp['nsa'+(i+1)].top;ntscp['nsa'+i].left=ntscp['nsa'+(i+1)].left}
else
{ntscp['nsa'+i].top=divTop;ntscp['nsa'+i].left=divLeft}
function nsMouse(evnt){
xpos=evnt.pageX;ypos=evnt.pageY;
}
window.onMouseMove = nsMouse;
}
else if (document.all){
document.write('<div style="position:absolute;top:0px;left:0px">');
bomb();
else
{
if ((divLeft > xpos-speed/1.5) && (divLeft < xpos+speed/1.5) && (divTop >= ypos-speed/1.5) && (divTop <= ypos+speed/1.5))

jQuery实现炫酷的鼠标轨迹特效

jQuery实现炫酷的⿏标轨迹特效代码：复制代码代码如下:<!DOCTYPE html><html xmlns="/1999/xhtml"><head><title>jQuery实现炫酷的⿏标轨迹特效</title><base target="_blank" /><script type="text/javascript"> window.onload = function () {C = Math.cos; S = Math.sin; U = 0; w = window; j = document; d = j.getElementById("kele"+"yi_com"); c = d.getContext("2d"); W = d.width = w.innerWidth; H = d.height = w.innerHeight; c.fillRect(0, 0, W, H); c.globalCompositeOperation = "lighter"; c.lineWidth = 0.2; c.lineCap = "round"; var bool = 0, t = 0; d.onmousemove = function (e) {if (window.T) {if (D == 9) { D = Math.random() * 15; f(1); }clearTimeout(T);}X = e.pageX; Y = e.pageY; a = 0; b = 0; A = X, B = Y; R = (e.pageX / W * 999 >> 0) / 999; r = (e.pageY / H * 999 >> 0) / 999; U = e.pageX / H * 360 >> 0; D = 9; g = 360 * Math.PI / 180; T = setInterval(f = function (e) {c.save(); c.globalCompositeOperation = "source-over"; if (e != 1) { c.fillStyle = "rgba(0,0,0,0.02)"; c.fillRect(0, 0, W, H); }c.restore(); i = 25; while (i--) {c.beginPath(); if (D > 450 || bool) {if (!bool) { bool = 1; }if (D < 0.1) { bool = 0; }t -= g; D -= 0.1;}if (!bool) { t += g; D += 0.1; }q = (R / r - 1) * t; x = (R - r) * C(t) + D * C(q) + (A + (X - A) * (i / 25)) + (r - R); y = (R - r) * S(t) - D * S(q) + (B + (Y - B) * (i / 25)); if (a) { c.moveTo(a, b); c.lineTo(x, y) }c.strokeStyle = "hsla(" + (U % 360) + ",100%,50%,0.75)"; c.stroke(); a = x; b = y;}U -= 0.5; A = X; B = Y;}, 16);}j.onkeydown = function (e) { a = b = 0; R += 0.05 }d.onmousemove({ pageX: 300, pageY: 290 })}</script><style>body{margin:0;overflow:hidden}div{padding:1px 5px;background:#333;position:absolute;z-index:2;color:#555;font-family:arial}a{color:#ccf}a:hover{color:red}</style></head><body><div id="text"></div><canvas id="keleyi_com"></canvas></body></html>以上就是本⽂的内容了，希望⼩伙伴们喜欢此特效，快过年了，给⾃⼰的个⼈主页增添些⾊彩吧。

VBA代码来实现“鼠标移过物体,触发动画”的效果

“鼠标移过物体，触发动画”的效果该代码能够实现“鼠标接触物体后触发动画效果”，下面介绍这个VBA代码。

很多人都在问有没有什么好方法能够实现，鼠标移到一个按钮上，然后出现按钮的内容。

之前，我们是用“鼠标接触物体后，跳至某一幻灯片”的方法来模拟这个效果，即：第一张是一个按钮，第二张按钮旁边多了按钮的内容，那么从第一张跳至到第二张后，给人的效果就是按钮旁边出现了按钮的内容。

那么，现在我们可以用以下VBA代码来实现“鼠标移过物体，触发动画”的效果。

Sub tap ()SendKeys "{TAB}"SendKeys "{ENTER}"End Sub（注：该代码是由PowerPoint Heaven的Microsoft MVP：John 提供）〓代码解释〓Sub XXX ()/意思为：给这个宏代码取名XXX。

SendKeys “{XXX}”/意思为：执行键盘上的某个按键，这个代码Sendkeys的中文意思就是“送按键”，例如SendKeys”{Enter}”，代表：执行这个宏后，自动执行键盘上的回车键（无需使用者自行敲击）。

End Sub/意思为：这个宏的代码编写结束。

那么，那么代码：Sub tap ()SendKeys "{TAB}"SendKeys "{ENTER}"End Sub意思就是执行TAB按键和Enter按键。

你想想看，当一个普通的幻灯片，按了回车键以后，它是不是会执行“单击时”的动画？而在PowerPoint中的“动作”对话框中的“鼠标接触”选项卡内，有个“宏”的复选框，那么我们就可以将这个宏代码设置于此，那么接触设置了这个动作的物体，播放幻灯片，鼠标移到该物体上就会触发这个宏代码，效果就好像按了Enter键一样，那么幻灯片就会执行第一个“单击时”到第二个“单击时”之间的动画（包括第一个“单击时”动画）。

这就实现了“鼠标接触物体后触发动画效果”。

js鼠标跟随代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><title>鼠标跟随提示框</title><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><style type="text/css">body{font:12px/1.8 arial;}a,a:visited{color:#3366cc;text-decoration:none;}a:hover{color:#f60;text-decoration:underline;}.tip{width:200px;border:2px solid #ddd;padding:8px;background:#f1f1f1;color:#666;}img{border:none;}</style><script type="text/javascript">var tip={$:function(ele){if(typeof(ele)=="object")return ele;else if(typeof(ele)=="string"||typeof(ele)=="number")return document.getElementById(ele.toString());return null;},mousePos:function(e){var x,y;var e = e||window.event;return{x:e.clientX+document.body.scrollLeft+document.documentElement.scrollLeft,y:e.clientY+ document.body.scrollTop+document.documentElement.scrollTop};},start:function(obj){var self = this;var t = self.$("mjs:tip");obj.onmousemove=function(e){var mouse = self.mousePos(e);t.style.left = mouse.x + 10 + 'px';t.style.top = mouse.y + 10 + 'px';t.innerHTML = obj.getAttribute("tips");t.style.display = '';}obj.onmouseout=function(){t.style.display = 'none';}}}</script></head><body><ol><li><a href="/article/21812.htm" target="_blank"><img src="/images/logo.gif" onmouseover="tip.start(this)" tips="JQuery获取元素文档大小、偏移和位置和滚动条位置的" /></a></li><li><a href="/article/21808.htm" target="_blank" onmouseover="tip.start(this)" tips="Javascript 实现TreeView CheckBox全选效果……">关于用户研究的一点思考</a></li><li><a href="/article/21806.htm" target="_blank" onmouseover="tip.start(this)" tips="JavaScript 学习笔记（九）call和apply方法……">WEB重构拾趣</a></li></ol><div id="mjs:tip" class="tip" style="position:absolute;left:0;top:0;display:none;"></div></body></html>。

鼠标特效代码及用法

7、流氓兔代码：
<STYLE>body{cursor:url(); }<流氓兔></STYLE>
8、小提琴代码:
<STYLE>body{CURSOR: url('/cursor/mouse001.cur');}</STYLE>
9、萨克斯代码:
<STYLE>body{CURSOR: url('/cursor/mouse051.cur');}</STYLE>
4、小白玫瑰花代码:
<STYLE> body{CURSOR:url('/cursor/mouse025.ani');}</STYLE>
5、小蜜蜂代码:
<STYLE>BODY{CURSOR:url('/cursor/mouse004.ani');}</STYLE>
6、小白兔代码:
<STYLE>body{CURSOR: url('/cursor/mouse031.ani ');}</STYLE>
鼠标特效代码及用法
全屏欣赏查看源文件代码
鼠标特效代码及用法
一、鼠标特效代码
1、小红旗代码：
<STYLE>body{CURSOR: url('/cursor/mouse038.ani');}</STYLE>
2、大红花代码：
<STYLE>body{cursor:url(/http%253A%252F%252Fplugin%252Esmileycentral%252Ecom%252Fassetserver%252Fcursor%252Ejhtml%253Fcur%253D1%2526i%253D9646a/image.gif); }</STYLE>

10个经典的网页鼠标特效代码

10个经典的⽹页⿏标特效代码1、⿏标指向出现实⽤特殊提⽰<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta http-equiv="Content-Language" content="zh-CN" /><title>css打造⿏标触发效果</title><style type="text/css"></style><script type="text/javascript"><![CDATA[//><!]]></script></head><li id="conter1"><h2>找什么</h2><input id="jobKw" name="jobKw" type="text" /><ul id="conter3"><li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external n <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external n <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external n <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external n <li><span class="moreCity"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="externa </ul></li><li id="conter2"><h2>在那⾥</h2><input id="cityKw" name="cityKw" type="text" /><ul id="conter4"><li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external n <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external n <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external n <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external n <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external n <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external n <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external n <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external n <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external n <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external n <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external n <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external n <li><span class="moreCity"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="externa </ul></li></ul><div class="sbtn"><input name="submit" type="submit" class="btn4" style="margin:0px 15px 2px 0;" value="搜索⼯作" /></div><div class="searchMore"><a href="search_expert.html" rel="external nofollow" >⾼级搜索</a><br /><a href="search_sort.html" rel="external nofollow" >分类搜索</a> </div></form></div></body></html>2、跟随⿏标的流星<html><head><title>⽹页特效---跟随⿏标的流星</title><meta content="text/html; charset=gb2312" http-equiv="Content-Type"></head><body bgColor="#000000"><script language="JavaScript"></script></body></html>3、跟随⿏标的三⾊彩带<html><head><title>⽹页特效--很酷的跟随⿏标的三⾊彩带</title></head><body bgColor=#000000><script language="JavaScript"></script></body></html>4、⿏标经过滚动提⽰⽂字<a href="http://www.⽹址.com" rel="external nofollow" _fcksavedurl="http://www.⽹址.com" target="_blank" onMouseOver="helpor_net_show(this,event,'⽹页⿏标特效')" onMouseOut="helpor_net_hide()">把⿏标放上来试试</a> <div id="tooltip2" style="position:absolute;visibility:hidden;clip:rect(0 150 50 0);width:150px;background-color:seashell"><layer name="nstip" width="1000px" bgColor="seashell"></layer></div><SCRIPT language="JavaScript"></SCRIPT>5、围绕⿏标旋转的三叶空间旋浆<html><head><title>围绕⿏标旋转的三叶空间旋浆</title><meta content="text/html; charset=gb2312" http-equiv="Content-Type"></head><body bgColor="#000000"><scriptlanguage="JavaScript"></script><script language="JavaScript"></script></body></html>6、围绕⿏标的⽴体星环（摩天轮）<html><head><title>围绕⿏标的⽴体星环</title><meta content="text/html; charset=gb2312" http-equiv="Content-Type"><script language="JavaScript"></script></head><body bgcolor="#000000"></body></html>7、围绕⿏标的⽴体旋转⽂字<html><head><title>围绕⿏标的⽴体旋转⽂字</title><meta content="text/html; charset=gb2312" http-equiv="Content-Type"><meta content="Microsoft FrontPage 5.0" name="GENERATOR"></head><body><script LANGUAGE="JavaScript"></script></body></html>8、跟随⿏标的⽇期时间表盘<html><head><title>跟随⿏标的⽇期时间表盘</title></head><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("星期⽇","星期⼀","星期⼆","星期三","星期四","星期五","星期六");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=(yers);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.5HandWidth=ClockWidth/4.5HandY=-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;。

不可思议的纯CSS实现鼠标跟随效果

不可思议的纯CSS实现⿏标跟随效果直接进⼊正题，⿏标跟随，顾名思义，就是元素会跟随着⿏标的移动⽽作出相应的运动。

⼤概类似于这样：通常⽽⾔，CSS 负责表现，JavaScript 负责⾏为。

⽽⿏标跟随这种效果属于⾏为，要实现通常都需要借助 JS。

当然，本⽂的重点，就是介绍如何在不借助 JS 的情况下使⽤ CSS 来模拟实现⼀些⿏标跟随的⾏为动画效果。

原理以上⾯的 Demo 为例⼦，要使⽤ CSS 实现⿏标跟随，最重要的⼀点就是：如何实时监测到当前⿏标处于何处？OK，其实很多 CSS 效果，都离不开障眼法⼆字。

要监测到当前⿏标处于何处，我们只需要在页⾯上铺满元素即可：我们使⽤ 100 个元素，将整个页⾯铺满，hover 的时，展⽰颜⾊，核⼼ SCSS 代码如下：<div class="g-container"><div class="position"></div><div class="position"></div><div class="position"></div><div class="position"></div>... // 100个</div>.g-container {position: relative;width: 100vw;height: 100vh;}.position {position: absolute;width: 10vw;height: 10vh;}@for $i from 0 through 100 {$x: $i % 10;$y: ($i - $x) / 10;.position:nth-child(#{$i + 1}) {top: #{$y * 10}vh;left: #{$x * 10}vw;}.position:nth-child(#{$i + 1}):hover {background: rgba(255, 155, 10, .5)}}可以得到这样的效果：好的，如果把每个元素的 hover 效果去掉，那么这个时候操作页⾯，其实是没有任何效果的。

网页鼠标特效代码

图片跟随鼠标脚本说明:第一步:把如下代码加入<body><center><script language=javascript src="../js/shang.js"></script>区域中<SCRIPT LANGUAGE="JavaScript">var newtop=0var newleft=0if (navigator.appName == "Netscape") {layerStyleRef="layer.";layerRef="yers";styleSwitch="";}else{layerStyleRef="layer.style.";layerRef="document.all";styleSwitch=".style";}function doMouseMove() {layerName = 'iit'eval('var curElement='+layerRef+'["'+layerName+'"]')eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.visibility="hidden"') eval('curElement'+styleSwitch+'.visibility="visible"')eval('newleft=document.body.clientWidth-curElement'+styleSwitch+' .pixelWidth')eval('newtop=document.body.clientHeight-curElement'+styleSwitch+ '.pixelHeight')eval('height=curElement'+styleSwitch+'.height')eval('width=curElement'+styleSwitch+'.width')width=parseInt(width)height=parseInt(height)if (event.clientX > (document.body.clientWidth - 5 - width)){newleft=document.body.clientWidth + document.body.scrollLeft - 5 - width}elsenewleft=document.body.scrollLeft + event.clientX}eval('curElement'+styleSwitch+'.pixelLeft=newleft')if (event.clientY > (document.body.clientHeight - 5 - height)){newtop=document.body.clientHeight + document.body.scrollTop - 5 - height}else{newtop=document.body.scrollTop + event.clientY}eval('curElement'+styleSwitch+'.pixelTop=newtop')}document.onmousemove = doMouseMove;</SCRIPT>第二步:把如下代码加入<body><center><script language=javascript src="../js/shang.js"></script><script language="javascript">if (navigator.appName == "Netscape") {}else{document.write('<div ID=OuterDiv>')document.write('<img ID=iit src="image1.gif" STYLE="position:absolute;TOP:0pt;LEFT:0pt;width=103;height=28;Z-INDE X:2;visibility:hidden;">')document.write('</div>')}</script>鼠标放上去打开新页面脚本说明:第一步:把如下代码加入<body><center><script language=javascript src="../js/shang.js"></script>区域中<SCRIPT Language="JavaScript">function winopen () {msg=open("update.htm","NewWindow","toolbar=no,location=no,direct ories=no,status=no,menubar=no,scrollbars=no,resizable=no,copyhistory=yes,width=400,height=260");}</SCRIPT>第二步:把如下代码加入<body><center><script language=javascript src="../js/shang.js"></script>区域中<a href="default.htm" onMouseOver="winopen(); return true;"><IMG SRC="shu.gif" border="0"></a>鼠标激活警告框脚本说明:把如下代码加入<body><center><script language=javascript src="../js/shang.js"></script>区域中<a href="default.htm" onMouseOver="alert('本站域名:/');return true;">记住本站域名</a>显示鼠标坐标脚本说明：第一步:把如下代码加入<body><center><script language=javascript src="../js/shang.js"></script>区域中:<SCRIPT LANGUAGE="JavaScript">if (navigator.appName == 'Netscape'){document.captureEvents(Event.MOUSEMOVE);document.onmousemove = netscapeMouseMove;}function netscapeMouseMove(e) {if (e.screenX != document.test.x.value && e.screenY != document.test.y.value){document.test.x.value = e.screenX;document.test.y.value = e.screenY;}}function micro$oftMouseMove() {if (window.event.x != document.test.x.value && window.event.y != document.test.y.value){document.test.x.value = window.event.x;document.test.y.value = window.event.y;}}</SCRIPT><FORM NAME="test">X: <INPUT TYPE="TEXT" NAME="x" SIZE="4"> Y: <INPUTTYPUE="TEXT" NAME="y" SIZE="4"></FORM>第二步：把<body><center><script language=javascript src="../js/shang.js"></script>中内容改为：<body bgcolor="#fef4d9" onMousemove="micro$oftMouseMove()">各种形状的鼠标脚本说明:第一步:把如下代码加入<head>区域中<table width="53%" border="0"><tr><td width="51%" height="25"><div align="left"><font face="Arial, Helvetica, sans-serif"size="2"><b><a href="cursor.htm" style="cursor:hand">style="cursor:hand"</a></b></font></div></td><td width="49%" valign="top" height="25"><div align="left"><font face="Arial, Helvetica, sans-serif" size="2"><b><a href="cursor.htm" style="cursor:crosshair">style="cursor:crosshair"</a></b></font></div> </td></tr><tr><td width="51%" height="29" valign="top"><div align="left"><font face="Arial, Helvetica, sans-serif" size="2"><b><a href="cursor.htm" style="cursor:text">style="cursor:text"</a></b></font></div></td><td width="49%" valign="top" height="29"><div align="left"><font face="Arial, Helvetica, sans-serif" size="2"><b><a href="cursor.htm" style="cursor:wait">style="cursor:wait"</a></b></font></div></td></tr><tr><td width="51%" height="29" valign="top"><div align="left"><font face="Arial, Helvetica, sans-serif" size="2"><b><a href="cursor.htm" style="cursor:move">style="cursor:move"</a></b></font></div> </td><td width="49%" valign="top" height="29"><div align="left"><font face="Arial, Helvetica, sans-serif" size="2"><b><a href="cursor.htm" style="cursor:help">style="cursor:help"</a></b></font></div></td></tr><tr><td width="51%" height="29" valign="top"><div align="left"><font face="Arial, Helvetica, sans-serif" size="2"><b><a href="cursor.htm" style="cursor:e-resize">style="cursor:e-resize"</a></b></font></div> </td><td width="49%" valign="top" height="29"><div align="left"><font face="Arial, Helvetica, sans-serif" size="2"><b><a href="cursor.htm" style="cursor:n-resize">style="cursor:n-resize"</a></b></font></div> </td></tr><tr><td width="51%" height="29" valign="top"><div align="left"><font face="Arial, Helvetica, sans-serif" size="2"><b><a href="cursor.htm" style="cursor:nw-resize">style="cursor:nw-resize"</a></b></font></div> </td><td width="49%" valign="top" height="29"><div align="left"><font face="Arial, Helvetica, sans-serif" size="2"><b><a href="cursor.htm" style="cursor:w-resize"">style="cursor:w-resize"</a></b></font></div> </td></tr><tr><td width="51%" height="29" valign="top"><div align="left"><font face="Arial, Helvetica, sans-serif" size="2"><b><a href="cursor.htm" style="cursor:s-resize">style="cursor:s-resize"</a></b></font></div> </td><td width="49%" valign="top" height="29"><div align="left"><font face="Arial, Helvetica, sans-serif" size="2"><b><a href="cursor.htm"style="cursor:se-resize">style="cursor:se-resize"</a></b></font></div> </td></tr><tr><td width="51%" height="29" valign="top"><div align="left"><font face="Arial, Helvetica, sans-serif" size="2"><b><a href="cursor.htm" style="cursor:sw-resize">style="cursor:sw-resize"</a></b></font></div> </td><td width="49%" valign="top" height="29"><div align="left"></div></td></tr></table>鼠标响应文字变色脚本说明:把如下代码加入<body><center><script language=javascript src="../js/shang.js"></script>区域中<font face="arial" size=3 onMouseOver="this.style.backgroundColor = 'red';"随鼠标的彩色字符脚本说明:第一步:把如下代码加入<head>区域中<STYLE>.spanstyle {COLOR: #0066ff; FONT-FAMILY: 隶书; FONT-SIZE: 14pt; FONT-WEIGHT: normal; POSITION: absolute; TOP: -50px; VISIBILITY: visible}</STYLE>第二步:把如下代码加入<body><center><script language=javascript src="../js/shang.js"></script>区域中<SCRIPT language=javascript>var message="欢迎光临javascript 精彩世界!";var x,y;var step=12;var flag=0;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 = (yers) ? e.pageX : document.body.scrollLeft+event.clientX+10;y = (yers) ? 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];thisspan.color=Math.random() * 255 * 255 * 255 + Math.random() * 255 * 255 + Math.random() * 255;}}else if (flag==1 && yers) {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];thisspan.color=Math.random() * 255 * 255 * 255 + Math.random() * 255 * 255 + Math.random() * 255;}}}</SCRIPT><SCRIPT language=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 (yers) {document.captureEvents(Event.MOUSEMOVE);}document.onmousemove = handlerMM;</SCRIPT><SCRIPT language=javascript>function pageonload() {makesnake();window.setTimeout("pageonload();", 2);}</SCRIPT>第三步:把<body><center><script language=javascript src="../js/shang.js"></script>改为<body bgcolor="#fef4d9" onload=javascript:pageonload()>。

FLASH里实现鼠标跟随的两种方法

FLASH里实现鼠标跟随的两种方法FLASH是一种流行的多媒体平台，可以创建富有互动性和动画效果的网页内容。

实现鼠标跟随效果可以增加网页的交互性，并为用户提供更好的使用体验。

下面将介绍两种实现鼠标跟随的方法，以及它们的实现原理和示例代码。

方法一：使用鼠标事件和坐标计算首先，我们可以利用Flash中的事件监听器和鼠标事件来实现鼠标跟随的效果。

具体步骤如下：1. 创建一个MovieClip并将其命名为“follower”。

2.在舞台上添加一个事件监听器，监听鼠标的移动事件。

3.在事件处理函数中获取鼠标的当前坐标。

4. 将“follower” MovieClip 的坐标设置为鼠标的当前坐标。

以下是示例代码：```actionscriptimport flash.events.MouseEvent;// 创建一个follower MovieClipvar follower:MovieClip = new MovieClip(;follower.graphics.beginFill(0xFF0000);follower.graphics.drawRect(0, 0, 50, 50);follower.graphics.endFill(;addChild(follower);//监听舞台上鼠标的移动事件stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);//鼠标移动事件处理函数function mouseMoveHandler(event:MouseEvent):void//获取鼠标的当前坐标var mouseXPos:Number = stage.mouseX;var mouseYPos:Number = stage.mouseY;// 设置follower MovieClip的坐标为鼠标的当前坐标follower.x = mouseXPos;follower.y = mouseYPos;```方法二：使用鼠标速度和缓动动画第二种方法是利用鼠标的移动速度和缓动动画来实现鼠标跟随的效果。

怎么用js实现简单鼠标跟随效果

怎么用js实现简单鼠标跟随效果前端成为现在的大热，想学习前端就必须会js，你知道怎么用js实现鼠标跟随效果吗?下面由小编教大家怎么用js实现简单鼠标跟随效果js实现简单鼠标跟随效果的方法鼠标跟随，顾名思义，就是在鼠标移动的时候，有个动画跟随着鼠标一起移动。

要点一：1varoEvent=evt||window.event;这个是为了兼容ie和ff而写的，在ie下window.event表示event对象，而ff下，是给事件函数传一个参数，这个参数就表示事件对象。

要点二：1document.onmousemove=function(evt)鼠标跟随是在鼠标移动时发生的事情。

要点三：1document.documentElement.scrollTop||document.body.sc rollTop;这是为了兼容chrome和其它浏览器，滚动条距上边滚动的距离，chrome用后边那个，其它浏览器用前面那个。

要点四：1oTop.style.top=oEvent.clientY+scrolltop+10+"px& quot;;当鼠标移动时把鼠标的当前位置赋值给元素的位置值。

oEvent.clientY即为鼠标的当前Y坐标的位置，加scrolltop 的距离是要在滚动到不是第一屏的时候，鼠标跟随效果依然不改变而写。

代码如下：1234567891011121415161718192021222324252627282930313233343637<!DOCTYPEhtml><html><head><metacharset="utf-8"/> <title>无标题文档</title><style>body{margin:0;padding:0}#to_top{width:30px;height:40px;padding:20px;font:14px/20pxarial;text-align:center;background:#06c;position:absolute;cursor:pointer;color:#fff}</style>window.onload=function(){varoTop=document.getElementById("to_top" );document.onmousemove=function(evt){varoEvent=evt||window.event;varscrollleft=document.documentElement.scrollLeft||docu ment.body.scrollLeft;varscrolltop=document.documentElement.scrollTop||docu ment.body.scrollT op;oTop.style.left=oEvent.clientX+scrollleft+10+"px&q uot;;oTop.style.top=oEvent.clientY+scrolltop+10+"px& quot;;}}</script></head><bodystyle="height:1000px;"><ahref="#">文字</a><divid="to_top">鼠标跟随</div></body>怎么用js实现简单鼠标跟随效果相关文章：1.怎么制作鼠标跟随动画2.使用js实现鼠标点击变色3.js设置鼠标光标形状4.js实现鼠标移到图片显示文字5.flash鼠标跟随代码怎么打。

鼠标跟随代码

鼠标跟随代码<STYLE>.spanstyle {COLOR: #0066ff; FONT-FAMIL Y: 宋体; FONT-SIZE: 9pt; FONT-WEIGHT: normal; POSITION: absolute; TOP: -50px; VISIBILITY: visible}</STYLE><SCRIPT language=javascript>var message="同学们好";var x,y;var step=12;var flag=0;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 = (yers) ? e.pageX : document.body.scrollLeft+event.clientX+10;y = (yers) ? 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];thisspan.color=Math.random() * 255 * 255 * 255 + Math.random() * 255 * 255 + Math.random() * 255;}}else if (flag==1 && yers) {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];thisspan.color=Math.random() * 255 * 255 * 255 + Math.random() * 255 * 255 + Math.random() * 255;}}}</SCRIPT><SCRIPT language=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 (yers) {document.captureEvents(Event.MOUSEMOVE);}document.onmousemove = handlerMM;</SCRIPT><SCRIPT language=javascript>function pageonload() {makesnake();window.setTimeout("pageonload();", 2);}</SCRIPT><body onload=javascript:pageonload()>第二个要完成此效果需要三个步骤第一步：把如下代码加入到<head>区域中<STYLE>.spanstyle {COLOR: #0066ff; FONT-FAMIL Y: 隶书; FONT-SIZE: 14pt; FONT-WEIGHT: normal; POSITION: absolute; TOP: -50px; VISIBILITY: visible}</STYLE>第二步：把如下代码加入到<body>区域中<SCRIPT language=javascript>var message="我爱你一生一世!";var x,y;var step=12;var flag=0;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 = (yers) ? e.pageX : document.body.scrollLeft+event.clientX+10;y = (yers) ? 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];thisspan.color=Math.random() * 255 * 255 * 255 + Math.random() * 255 * 255 + Math.random() * 255;}}else if (flag==1 && yers) {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];thisspan.color=Math.random() * 255 * 255 * 255 + Math.random() * 255 * 255 + Math.random() * 255;}}}</SCRIPT><SCRIPT language=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 (yers) {document.captureEvents(Event.MOUSEMOVE);}document.onmousemove = handlerMM;</SCRIPT><SCRIPT language=javascript>function pageonload() {makesnake();window.setTimeout("pageonload();", 2);}</SCRIPT>第三步：把“onload=javascript:pageonload()”加在<body>标记里例如：<body onload=javascript:pageonload()>。

js-----博客园鼠标特效，跟随鼠标移动线条

js-----博客园⿏标特效，跟随⿏标移动线条把以下代码放到页脚Html代码（设置--->页脚Html代码）⾥。

如下图：<script>!function(){function n(n,e,t){return n.getAttribute(e)||t}function e(n){return document.getElementsByTagName(n)}function t(){var t=e("script"),o=t.length,i=t[o-1];return{l:o,z:n(i,"zIndex",-1),o:n(i,"opacity",.5),c:n(i,"color","0,0,0"),n:n(i,"count",99)}}function o(){a=m.width=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth,c=m.height=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight}function i(){r.clearRect(0,0,a,c);var n,e,t,o,m,l;s.forEach(function(i,x){for(i.x+=i.xa,i.y+=i.ya,i.xa*=i.x>a||i.x<0?-1:1,i.ya*=i.y>c||i.y<0?-1:1,r.fillRect(i.x-.5,i.y-.5,1,1),e=x+1;e<u.length;e++)n=u[e],null!==n.x&&null!==n.y&&(o=i.x-n.x,m=i.y-n.y,l=o*o+m*m,l<n.max&&(n===y&&l>=n.max/2&&(i.x-=.03*o,i.y-=.03*m),t=(n.max-l)/n.max,r.beginPath(),r.lineWidth=t/2,r.strokeStyle="rgba("+d.c+","+(t+.2)+")",r.moveTo(i.x,i.y),r.lineTo(n.x,n.y),r.stroke()))}),x(i)}var a,c,u,m=document.createElement("canvas"),d=t(),l="c_n"+d.l,r=m.getContext("2d"),x=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame|| function(n){window.setTimeout(n,1e3/45)},w=Math.random,y={x:null,y:null,max:2e4};m.id=l,m.style.cssText="position:fixed;top:0;left:0;z-index:"+d.z+";opacity:"+d.o,e("body")[0].appendChild(m),o(),window.onresize=o,window.onmousemove=function(n){n=n||window.event,y.x=n.clientX,y.y=n.clientY},window.onmouseout=function(){y.x=null,y.y=null};for(var s=[],f=0;d.n>f;f++){var h=w()*a,g=w()*c,v=2*w()-1,p=2*w()-1;s.push({x:h,y:g,xa:v,ya:p,max:6e3}) }u=s.concat([y]),setTimeout(function(){i()},100)}();</script>。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

一款鼠标跟随特效代码
篇一：网页制作特效——鼠标特效代码网页制作特效——鼠标特效说明：选择下列特效中的一种，选择其中蓝色的部分，粘贴在的之间，预览效果。

(一)时钟环绕鼠标之间-->(二)很酷的跟随鼠标的三色彩带之间-->篇三：常见的鼠标跟随效果[常见的鼠标跟随效果中的鼠标可以更有个性些，做起来也不算复杂，比如把鼠标指针换成你喜欢的样子，或让鼠标指针有一个灵动飘逸的跟随，如下图中的效果，怎么样？动手试试：一、例１：让鼠标指针变变样：把鼠标变成上面第一个图的样子，当然你爱咋样子的都行，比如一个字，一种形状，一张图片都行。

过程：1)插入一个元件，类型为影片剪辑，自己动手画个形状吧，像上面图一那样的也行，这不要紧，要紧的是在元件编辑视图下，要将这个图形的左上角对准中心的十字，否则鼠标定位时会有误差，如图：[小技巧：直接在舞台上绘图，完成后全选并右击，选择“转换为元件——影片剪辑——确定”，这样做影片剪辑，会自动对齐。

]2)把影片剪辑放到舞台上，实例名为：_3)在帧上加代码，非常简单：_();(_,);(){_=;_=;}();其中();的作用是隐藏默认的鼠标指针，如果要恢复显示：();二、例２：鼠标指针后面跟随飘逸的枫叶：过程：1）把这几张图下载到你的电脑上，并导入到库中去。

2）把这些图拖到舞台上去，按图从小到大的顺序依次分别右击他们，并选“转换成元件——影片剪辑——确定”：按“从小到大”的顺序操作，是为了叠放次序，后来居上：虽然在同一时间轴图层上，但后转换成影片剪辑的会居上方。

3）同样从小到大，依次取实例名为：0、1、2、3、4、54）在帧上加一些简单的代码即可：0();(_,);(){0=+20;0=+10;=3;(=1; 但这个例子，想和大家一起用代码方式做，代码如下，不理解也没关系，复制到第一帧上，可以改一改跟随文字，比如把“打倒日本帝国主义”改成“钓鱼岛是中国的固有领土”，呵呵：*************************从这里复制开始**************************************_="打倒日本帝国主义";=0;=();(; （二）绘制星星：1）插入一个元件，类型为“图形”，确定后进入到元件编辑状态下，适当放大视图，然后进行绘图。

2）画一个无线框圆，白色，透明度33%，再调成纵向窄条；画一个无边线六边形，白色，透明66%，拽一拽上下两个顶点，让它们不那么冒尖，然后再调成窄条；再制一个窄条，透明度调成100%，即不透明。

将三个窄条组合，调整长短、宽窄，然后叠起来；最后再复制一下，叠成十字形状，如下图：3）画三个圆，无边线，白色，透明分别为33%、66%、100%，再将它们组合、重叠起来，调整好大小位置，如图：4）将十字和圆圈叠起来，调好适当大小位置，并组合；将组合图中心点对齐到“十”字上，大小设为16*16像素，一个小星星，如图：（三）制作星星播放动画：1）插入一个元件，类型为“影片剪辑”，进入到元件编辑视图下，在第一帧上，将刚才做好星星拖入，中心点对齐到中间“十”字上。

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

3）在时间轴上，再添加四个图层，分别为“图层2到图层5”，再将“图层1”已经做好的帧分别复制粘贴到这四个图层上，如下图左：4）由下往上，将各图层第一帧上的星星透明度分别调整为20%、40%、60%、80%、100%，最后一帧上的星星透明度都调为0%全透明。

5）再如上图右边那样，将各图层的第一层和最后一帧的位置拖动到适当的位置上6）图层1的最后一帧（第30帧）添加代码()，即播放到最后停止。

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

（五）在主场景第一帧中加入代码：(_,);=0;(){(%3==0){__=_();_=;_=;(_);}++;。