鼠标特效（更新中）(页 1) - 【素材教程】 - 【音画教程】 - 音乐堡音乐论坛在音乐中享受生活

corea 发表于 2008-4-10 01:01

鼠标特效（更新中）

[table=100%,#FFFFE6][tr][td][size=9pt][发帖际遇]: [url=http://www.yule.co.nz/bbs/event.php]corea在五星级酒店和MM HAPPY一晚, 花费堡币65元.[/url][/font][/td][/tr][/table]

1、怎样使用特效代码？     只要把这些代码复制、粘贴到你的网页源代码中，保存，再在浏览器中打开，你就会看到效果了！ 
 
<BLOCKQUOTE dir=ltr style="MARGIN-RIGHT: 0px">
<BLOCKQUOTE dir=ltr style="MARGIN-RIGHT: 0px">
2、怎样在我的网页中插入代码？        使用DreamWeaver：             在编辑状态下按F10即弹出源代码窗口，将特效代码粘贴进去即可。        使用FrontPage：             点击编辑窗口左下角的“HTML”选项卡即出现源代码窗口，将特效代码粘贴进去即可。        使用“记事本”等编辑器：              直接用这些编辑器打开网页文件，出现的就是源代码，将特效代码粘贴进去即可。    3、在什么地方插入代码？     一般来说，在网页源代码的<body>与</body>之间的任何地方插入代码都可以（除非特别指明，例如要求插入到<head>与</head>之间）。</BLOCKQUOTE></BLOCKQUOTE>
    提示：在<td>与</td>之间插入代码，一般不会出错。 
 
4、该怎样修改代码？     插入代码之后，把代码中的文字替换成你自己的内容即可。     注意：为避免出错，请不要改动除中文文字之外的代码，否则程序可能会不能运行！

corea 发表于 2008-4-10 01:03

[color=Blue][b][size=3]效果1、跟随鼠标的文字[/size][/b][/color] 

<IFRAME style="WIDTH: 704px; HEIGHT: 400px" marginWidth=0 marginHeight=0 src="http://www.yybyy.com/bbsftp/vipuser/corea/effect/mouse/001.txt" frameBorder=0 width=200 scrolling=no height=400></iframe>

corea 发表于 2008-4-10 01:08

[table=100%,#FFFFE6][tr][td][size=9pt][发帖际遇]: [url=http://www.yule.co.nz/bbs/event.php]corea在馒头店卖馒头赚到堡币5元.[/url][/font][/td][/tr][/table]

<script language="JavaScript">
 
 yourLogo='享受音乐.音乐堡奉献.'; 
logoFont='Arial'; 
logoSize=8; 
logoColor='c7c5d2'; 
logoWidth=40;
 logoHeight=40;
 logoSpeed=0.02; 
 
 
//Nothing needs altering below! 
yourLogo=yourLogo.split('');
 L=yourLogo.length; 
Result=""; 
TrigSplit=360/L; 
br=(document.layers)?1:0;
 if (br){ 
for (i=0; i < L; i++) 
document.write('<layer name="ns'+i+'" top=0 left=0 width=14 height=14">'+Result+yourLogo[i]+'</layer>'); 
} 
else{ 
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:14px;height:14px">'+Result+yourLogo[i]+'</div>'); 
document.write('</div></div>'); 
} 
ypos=0; 
xpos=0; 
step=logoSpeed; 
currStep=0; 
Y=new Array(); 
X=new Array(); 
Yn=new Array(); 
Xn=new Array(); 
for (i=0; i < L; i++) 
{ 
Yn[i]=0; 
Xn[i]=0; 
} 
(document.layers)?window.captureEvents(Event.MOUSEMOVE):0; 
function Mouse(evnt){ 
ypos = (document.layers)?evnt.pageY:event.y; 
xpos = (document.layers)?evnt.pageX:event.x; 
} 
(document.layers)?window.onMouseMove=Mouse:document.onmousemove=Mouse; 
function animateLogo(){ 
if (!br)outer.style.pixelTop=document.body.scrollTop; 
for (i=0; i < L; i++){ 
var layer=(document.layers)?document.layers['ns'+i]:ie[i].style; 
layer.top =Y[i]+logoHeight*Math.sin(currStep+i*TrigSplit*Math.PI/180); 
layer.left=X[i]+logoWidth*Math.cos(currStep+i*TrigSplit*Math.PI/180); 
} 
currStep-=step; 
} 
function Delay(){ 
for (i=L; i >= 0; i--) 
{ 
Y[i]=Yn[i]+=(ypos-Yn[i])*(0.1+i/L); 
X[i]=Xn[i]+=(xpos-Xn[i])*(0.1+i/L); 
} 
animateLogo(); 
setTimeout('Delay()',20); 
} 
window.onload=Delay;
 // --> 
</script>[/code]
 
说明： 
yourLogo='享受音乐.音乐保奉献.'; 文字内容 
logoFont='Arial'; 字体 
logoSize=8; 字号
 logoColor='c7c5d2'; 颜色 
logoWidth=40; LOGO宽度 
logoHeight=40; LOGO高度
 logoSpeed=0.02; LOGO速度

[[i] 本帖最后由 corea 于 2008-4-10 01:24 编辑 [/i]]

corea 发表于 2008-4-10 10:43

[table=100%,#FFFFE6][tr][td][size=9pt][发帖际遇]: [url=http://www.yule.co.nz/bbs/event.php]corea收取租客本月房租堡币31元.[/url][/font][/td][/tr][/table]

[color=Blue][b][size=3]效果2、跟随鼠标的文字[/size][/b][/color] 

<IFRAME style="WIDTH: 704px; HEIGHT: 400px" marginWidth=0 marginHeight=0 src="http://www.yybyy.com/bbsftp/vipuser/corea/effect/mouse/002.txt" frameBorder=0 width=200 scrolling=no height=400></iframe>

corea 发表于 2008-4-10 10:52

[table=100%,#FFFFE6][tr][td][size=9pt][发帖际遇]: [url=http://www.yule.co.nz/bbs/event.php]corea买了一个馒头吃, 花了堡币5元.[/url][/font][/td][/tr][/table]

将下列代码插入html文件的<body>和</body>之间:
 <SCRIPT LANGUAGE="JavaScript"> 
if (document.all) 
{ 
yourLogo = "音乐堡音乐论坛欢迎您！"; 
logoFont = "宋体"; 
logoColor = "6699ff"; 
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:center">'+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> 说明： yourLogo = "音乐堡音乐论坛欢迎你"; 改为你的文字 logoFont = "宋体"; 字体设置 logoColor = "6699ff"; 文字颜色设置

corea 发表于 2008-4-10 10:54

[color=Blue][b][size=3]效果3、跟随鼠标的文字[/size][/b][/color] 

<IFRAME style="WIDTH: 704px; HEIGHT: 400px" marginWidth=0 marginHeight=0 src="http://www.yybyy.com/bbsftp/vipuser/corea/effect/mouse/003.txt" frameBorder=0 width=200 scrolling=no height=400></iframe>

闲云孤鹤 发表于 2008-4-11 12:15

很详细，感谢corea!

豆苗发表于 2008-4-14 22:01

:4a46b55d020017g0 好象满好玩的～带回实验田去研究下的说

corea 发表于 2008-4-28 08:57

效果3代码： 以下代码加入html文件的<*body>与<*/body>之间即可 [code]<style type="text/css">
.spanstyle {
position:absolute;
visibility:visible;
top:-50px;
font-size:9pt;
color: #000000;
font-weight:bold;
}</style>
<script>
var x,y
var step=20
var flag=0
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]=-50}
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; i<message.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; i<message.length-1; i++) {
var thisspan = eval("document.span"+i)
thisspan.left=xpos[i]
thisspan.top=ypos[i]} }
var timer=setTimeout("makesnake()",30)}
</script>
<body onLoad="makesnake()" >
<script>
for (i=0;i<=message.length-1;i++) {
document.write("")
document.write(message[i])
document.write("")}
if (document.layers){
document.captureEvents(Event.MOUSEMOVE);}
document.onmousemove = handlerMM;
</script>[/code]

[[i] 本帖最后由 corea 于 2008-4-28 09:07 编辑 [/i]]

corea 发表于 2008-4-28 09:02

[color=Blue][b][size=3]效果4、跟随鼠标的文字[/size][/b][/color] 

<IFRAME style="WIDTH: 704px; HEIGHT: 200px" marginWidth=0 marginHeight=0 src="http://www.yybyy.com/bbsftp/vipuser/corea/effect/mouse/004.txt" frameBorder=0 width=200 scrolling=no height=200></iframe>

corea 发表于 2008-4-28 09:05

以下代码插入html文件的<body>与</body>之间即可 [code]<script language="JavaScript1.2">
var scroller_msg='音乐堡欢迎你www.yybyy.com'
var dismissafter=0

var initialvisible=0
if (document.all)
document.write('<marquee id="curscroll" style="position:absolute;width:150px;border:0px solid black;font-size:14px;background-color:#ffffff;visibility:hidden">'+scroller_msg+'</marquee>')

function followcursor(){
//move cursor function for IE

if (initialvisible==0){
curscroll.style.visibility="visible"
initialvisible=1
}

curscroll.style.left=document.body.scrollLeft+event.clientX+10
curscroll.style.top=document.body.scrollTop+event.clientY+10
}

function dismissmessage(){
curscroll.style.visibility="hidden"
}

if (document.all){
document.onmousemove=followcursor
document.ondblclick=dismissmessage
if (dismissafter!=0)
setTimeout("dismissmessage()",dismissafter*1000)
}

//-->

</script>[/code]

corea 发表于 2008-4-28 09:10

[color=Blue][b][size=3]效果5、跟随鼠标的文字[/size][/b][/color] 

<IFRAME style="WIDTH: 704px; HEIGHT: 200px" marginWidth=0 marginHeight=0 src="http://www.yybyy.com/bbsftp/vipuser/corea/effect/mouse/005.txt" frameBorder=0 width=200 scrolling=no height=200></iframe>

corea 发表于 2008-4-28 09:11

[code]
<script language="JavaScript1.2">
var message='教程学堂'
var messagecolor='FF0000'
var dismissafter=0
var amount=5,ypos=0,xpos=0,Ay=0,Ax=0,By=0,Bx=0,Cy=0,Cx=0,Dy=0,Dx=0,Ey=0,Ex=0;
if (document.layers){
for (i = 0; i < amount; i++)
{document.write('<layer name=ns'+i+' top=0 left=0>'+message+'</layer>')}
window.captureEvents(Event.MOUSEMOVE);
function nsmouse(evnt){xpos = evnt.pageX;ypos = evnt.pageY;makefollow()}
}
else if (document.all){
document.write("<div id='outer' style='position:absolute;top:0px;left:0px'>");
document.write("<div id='inner' style='position:relative'>");
for (i = 0; i < amount; i++)
{document.write('<div id="text"'+i+' style="position:absolute;top:0px;left:0px;font-family:Courier New;font-size:16px;color:'+messagecolor+'">'+message+'</div>')}
document.write("</div>");
document.write("</div>");
function iemouse(){ypos = document.body.scrollTop + event.y;xpos = document.body.scrollLeft + event.x;makefollow()}
}
function makefollow(){
if (document.layers){
document.layers["ns0"].top=ay;document.layers["ns0"].left=ax;
document.layers["ns1"].top=by;document.layers["ns1"].left=bx;
document.layers["ns2"].top=cy;document.layers["ns2"].left=cx;
document.layers["ns3"].top=Dy;document.layers["ns3"].left=Dx;
document.layers["ns4"].top=Ey;document.layers["ns4"].left=Ex;
}
else if (document.all){
outer.all.inner.all[0].style.pixelTop=ay;outer.all.inner.all[0].style.pixelLeft=ax;
outer.all.inner.all[1].style.pixelTop=by;outer.all.inner.all[1].style.pixelLeft=bx;
outer.all.inner.all[2].style.pixelTop=cy;outer.all.inner.all[2].style.pixelLeft=cx;
outer.all.inner.all[3].style.pixelTop=Dy;outer.all.inner.all[3].style.pixelLeft=Dx;
outer.all.inner.all[4].style.pixelTop=Ey;outer.all.inner.all[4].style.pixelLeft=Ex;
}
}
function move(){
if (dismissafter!=0)
setTimeout("hidetrail()",dismissafter*1000)

if (document.layers){window.onMouseMove = nsmouse}
else if (document.all){window.document.onmousemove = iemouse}
ey = Math.round(Ey+=((ypos+20)-Ey)*2/2);ex = Math.round(Ex+=((xpos+20)-Ex)*2/2);
dy = Math.round(Dy+=(ey - Dy)*2/4);dx = Math.round(Dx+=(ex - Dx)*2/4);
cy = Math.round(Cy+=(dy - Cy)*2/6);cx = Math.round(Cx+=(dx - Cx)*2/6);
by = Math.round(By+=(cy - By)*2/8);bx = Math.round(Bx+=(cx - Bx)*2/8);
ay = Math.round(Ay+= (by - Ay)*2/10);ax = Math.round(Ax+= (bx - Ax)*2/10);
makefollow();
jumpstart=setTimeout('move()',10);
}

function hidetrail(){
if (document.all){
for (i2=0;i2<amount;i2++){
outer.all.inner.all[i2].style.visibility="hidden"
clearTimeout(jumpstart)
}
}
else if (document.layers){
for (i2=0;i2<amount;i2++){
temp="ns"+i2
document.layers[temp].visibility="hide"
clearTimeout(jumpstart)
}
}
}

window.onload=move;
//-->
</script>

</body>

</html>[/code]

Sergin 发表于 2008-9-30 16:16

学习学习
今天是html学习日～:4a46b55d020017ev

页: [1]

音乐堡音乐论坛's Archiver

鼠标特效（更新中）