一款鼠标跟随特效代码.docx
- 文档编号:26906818
- 上传时间:2023-06-23
- 格式:DOCX
- 页数:12
- 大小:20.18KB
一款鼠标跟随特效代码.docx
《一款鼠标跟随特效代码.docx》由会员分享,可在线阅读,更多相关《一款鼠标跟随特效代码.docx(12页珍藏版)》请在冰豆网上搜索。
一款鼠标跟随特效代码
一款鼠标跟随特效代码
篇一:
网页制作特效——鼠标特效代码
网页制作特效——鼠标特效
说明:
选择下列特效中的一种,选择其中蓝色的部分,粘贴在html的之间,预览效果。
(一)时钟环绕鼠标
之间-->
dCol="0000FF"
fCol="FF0000"
sCol="00FF00"
mCol="000000"
hCol="000000"
ClockHeight=40;
ClockWidth=40;
ClockFromMouseY=0;
ClockFromMouseX=100;
d=newArray("星期日","星期一","星期二","星期三","星期四","星期五","星期六");
m=newArray("1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月");
date=newDate();
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='123456789101112';
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="";
props2="";
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=newArray();x=newArray();Y=newArray();X=newArray();
for(i=0;i Dy=newArray();Dx=newArray();DY=newArray();DX=newArray();
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;
functionMouse(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;
functionClockAndAssign(){
time=newDate();
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)?
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 varHL=(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 varML=(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 varSL=(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 varDL=(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;
}
functionDelay(){
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;
//-->
(二)很酷的跟随鼠标的三色彩带
之间-->
vara_Colour='fff000';
varb_Colour='00ff00';
varc_Colour='ff00ff';
varSize=120;
varYDummy=newArray(),XDummy=newArray(),xpos=0,ypos=0,ThisStep=0;step=0.6;if(document.layers){
window.captureEvents(Event.MOUSEMOVE);
functionnsMouse(evnt){
xpos=window.pageYOffset+evnt.pageX+6;
ypos=window.pageYOffset+evnt.pageY+16;
}
window.onMouseMove=nsMouse;
}
elseif(document.all)
{
functionieMouse(){
xpos=document.body.scrollLeft+event.x+6;
ypos=document.body.scrollTop+event.y+16;
}
document.onmousemove=ieMouse;
}
functionswirl(){
for(i=0;i 篇二:
简单的网页鼠标跟随代码
放入标签中就OK
html{
overflow:
hidden;
}
body{
position:
absolute;
height:
100%;
width:
100%;
margin:
0;
padding:
0;
}
#screen{
background:
#000;
position:
absolute;
width:
100%;
height:
100%;
}
#screenspan{
background:
#fff;
font-size:
0;
overflow:
hidden;
width:
2px;
height:
2px;
}
varFollow=function(){
var$=function(i){returndocument.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;
varinit=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(){
vark=180/Math.PI,OO,o,_this=this,fn=this.config.fn;
OBJ[N++]=OO=newCObj(null,0,0);
for(vari=0;i varO=OO;
for(varj=10;j varx=fn(i,j).x,
y=fn(i,j).y;
OBJ[N++]=o=newCObj(O,x,y);
O=o;
}
}
setInterval(function(){
for(vari=0;i },16);
}
}
varCObj=function(p,cx,cy){
varobj=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';
}
returninit;
}();
newFollow('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中的鼠标可以更有个性些,做起来也不算复杂,比如把鼠标指针换成你喜欢的样子,或让鼠标指针有一个灵动飘逸的跟随,如下图中的效果,怎么样?
动手试试:
一、例1:
让鼠标指针变变样:
把鼠标变成上面第一个图的样子,当然你爱咋样子的都行,比如一个字,一种形状,一张图片都行。
过程:
1)插入一个元件,类型为影片剪辑,自己动手画个形状吧,像上面图一那样的也行,这不要紧,要紧的是在元件编辑视图下,要将这个图形的左上角对准中心的十字,否则鼠标定位时会有误差,如图:
[小技巧:
直接在舞台上绘图,完成后全选并右击,选择“转换为元件——影片剪辑——确定”,这样做影片剪辑,会自动对齐。
]
2)把影片剪辑放到舞台上,实例名为:
mouse_mc
3)在帧上加代码,非常简单:
mouse_mc.startDrag(false);
stage.addEventListener(Event.ENTER_FRAME,myMouse);
functionmyMouse(evt:
Event){
mouse_mc.x=mouseX;
mouse_mc.y=mouseY;
}
Mouse.hide();
其中Mouse.hide();的作用是隐藏默认的鼠标指针,如果要恢复显示:
Mouse.show();
二、例2:
鼠标指针后面跟随飘逸的枫叶:
过程:
1)把这几张图下载到你的电脑上,并导入到flash库中去。
2)把这些图拖到舞台上去,按图从小到大的顺序依次分别右击他们,并选“转换成元件——影片剪辑——确定”:
按“从小到大”的顺序操作,是为了叠放次序,后来居上:
虽然在同一时间轴图层上,但后转换成影片剪辑的会居上方。
3)同样从小到大,依次取实例名为:
level0、level1、level2、level3、level4、level5
4)在帧上加一些简单的代码即可:
level0.startDrag(false);
stage.addEventListener(Event.ENTER_FRAME,myMouse);
functionmyMouse(evt:
Event){
level0.x=stage.mouseX+20;
level0.y=stage.mouseY+10;
varspeed:
uint=3;
for(vari:
uint=1;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="打倒日本帝国主义";
vari:
uint=0;
vararrTextSprite:
Array=newArray();
for(i;i arrTextSprite[i]=addTextField(_text.charAt(i));
stage.addChild(arrTextSprite[i]);
}
arrTextSprite[0].startDrag(false);
stage.addEventListener(Event.ENTER_FRAME,myMouse);
functionmyMouse(evt:
Event){
arrTextSprite[0].x=stage.mouseX+20;
arrTextSprite[0].y=stage.mouseY+10;
varspeed:
uint=3;
for(i=1;i arrTextSpri
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 一款 鼠标 跟随 特效代码
![提示](https://static.bdocx.com/images/bang_tan.gif)