论坛: 网站建设 标题: 几种网页特效（贴上来让大家看看）！！ 复制本贴地址    
作者: linyuan_25 [linyuan_25]    论坛用户   登录
1.标题栏闪烁

只要把下面的js加到</head>之前就可以了。
<script language=javascript>

title_tmp1=document.title
if (title_tmp1.indexOf(">>")!=-1){
title_tmp2=title_tmp1.split(">>");
title_last=" ―> "+title_tmp2[1];
title_last=title_last + " ―> " + title_tmp2[2];
}else{
if (title_tmp1.indexOf("――")!=-1){
title_tmp2=title_tmp1.split("――");
title_last=" ―> "+title_tmp2[1];
if (title_last==" ―> "){title_last=" ―> "};
if (title_last==" ―> "){title_last=" ―> "};
}
else { title_last="http://www.yaguo.com/~lzlforever"}
}


title_new="精彩设计风"+title_last+""
step=0

function flash_title()
{
step++
if (step==7) {step=1}
if (step==1) {document.title='◆◇◇◇'+title_new+'◇◇◇◆'}
if (step==2) {document.title='◇◆◇◇'+title_new+'◇◇◆◇'}
if (step==3) {document.title='◇◇◆◇'+title_new+'◇◆◇◇'}
if (step==4) {document.title='◇◇◇◆'+title_new+'◆◇◇◇'}
if (step==5) {document.title='◇◇◆◇'+title_new+'◇◆◇◇'}
if (step==6) {document.title='◇◆◇◇'+title_new+'◇◇◆◇'}
setTimeout("flash_title()",180);
}
flash_title()

</script>

注：大家可以修改其中的title名，就可以为自己的主页增添一些特色！

2.打字效果

<div class="ttl1" id="ttl0">
<script language="javascript1.2">
var layers = document.layers;
var style = document.all;
var both = layers || style;
var huliguo_b = 0;
var huliguo_c = 4;
function writeOnText(obj, str) {
if (layers) with (document[obj]){
document.open();
document.write(str);
document.close();
}
if (style) eval(obj+'.innerHTML= str');
}
var dispStr = new Array("<font style=\"font-size:12px\">欢迎光临设计风！！！ </font>",
"<font style=\"font-size:12px\"> 风声，雨声，读书声，声声入耳！</font>",
"<font style=\"font-size:12px\">家事，国事，天下事，事事关心！</font>",
"<font style=\"font-size:12px\">请多提意见，谢谢！</font>",
"");
function txtTyper(str, idx, idObj, spObj, clr1, clr2, delay){
var tmp0 = tmp1 = ''
var skip =100;
if (both && idx <= str.length){
if (str.charAt(idx) == '<'){while (str.charAt(idx) != '>') idx++; idx++;}
if (str.charAt(idx) == '&' && str.charAt(idx+1) != ' ') {while (str.charAt(idx) != ';') idx++; idx++;}
tmp0 = str.slice(0,idx);
tmp1 = str.charAt(idx++);
writeOnText(idObj, "<span class="+spObj+"><font color='"+clr1+"'><b>"+tmp0+"</b></font><font color='"+clr2+"'>"+tmp1+"</font></span>");
setTimeout("txtTyper('"+str+"', "+idx+", '"+idObj+"', '"+spObj+"', '"+clr1+"', '"+clr2+"', "+delay+")",delay);
}
else{
huliguo_b++;
init();
}
}
function init(){
if (huliguo_b == huliguo_c) huliguo_b = 0;
txtTyper(dispStr[huliguo_b], 0, 'ttl0', 'ttl1', '#ffff00', '#0099cc', 150);
}
</script>
</div>


注：修改其中的文字便可。
另外不要忘记在<body>中加入onLoad=init()。

3.字幕特效

代码如下：
<SCRIPT language=JavaScript>

<!--
var index = 4

text = new Array(12);
text[0] ='<font style=\"font-size:12px\">怎么让向上滚动的字幕当鼠标放字幕后就停止；</font>'
text[1] ='<a href="#"><font style=\"font-size:12px\">怎么让向上滚动的字幕加上超连接；</font></a><font style=\"font-size:12px\">'
text[2] ='<font color="#ff0000">怎么让向上滚动的字幕当鼠标放字幕后就停止；</font>'
text[3] ='<font color="#ff8000">怎么让向上滚动的字幕当鼠标放字幕后就停止；</font>'
document.write ("<marquee scrollamount='1' scrolldelay='80' direction= 'up' loop=false width='300' height='100' id=design onmouseover=design.stop() onmouseout=design.start()>");
for (i=0;i<index;i++){

document.write (text[i] + "</A><br>");
}
document.write ("</marquee>")
// -->

</SCRIPT>

4.荧光文字
代码如下：
<!--
/*
Pulsating Text (Chris A e-mail: KilerCris@Mail.com)
Permission granted to Dynamic Drive to feature script in archive
For full source, usage terms, and 100's more DHTML scripts, visit <img src=/moi/file.gif align=absbottom> <a href="http://dynamicdrive.com" target=_blank>http://dynamicdrive.com</a>
*/


//range of glowing（调节光晕的大小）
var from = 5;
var to = 11;

//speed of pulsing（调节光晕搏动）
var delay = 55;

//color of glow, name or RGB value (example:'#00FF00')（设置颜色）
var glowColor = "lime";


//NO MORE EDITING!!!
var i = to;
var j = 0;

//can be called here or whenever you want the text to start pulsing
textPulseDown();

function textPulseUp()
{
if (!document.all)
return
if (i < to)
{
theText.style.filter = "Glow(Color=" + glowColor + ", Strength=" + i + ")";
i++;
theTimeout = setTimeout('textPulseUp()',delay);
return 0;
}

if (i = to)
{
theTimeout = setTimeout('textPulseDown()',delay);
return 0;
}


}

function textPulseDown()
{
if (!document.all)
return
if (i > from)
{
theText.style.filter = "Glow(Color=" + glowColor + ", Strength=" + i + ")";
i--;
theTimeout = setTimeout('textPulseDown()',delay);
return 0;
}

if (i = from)
{
theTimeout = setTimeout('textPulseUp()',delay);
return 0;
}
}

//-->


5.页面title效果
代码很简单的，只要在</head>之前加上以下js即可。
<script language=javascript >
var text=document.title
var timerID
function newtext()
{
clearTimeout(timerID)
document.title=text.substring(1,text.length)+text.substring(0,1)
text=document.title.substring(0,text.length)
timerID = setTimeout("newtext()", 100)
}
</script>

地主 发表时间: 04-08-20 18:54

论坛: 网站建设

20CN网络安全小组版权所有
Copyright © 2000-2010 20CN Security Group. All Rights Reserved.
论坛程序编写：NetDemon

粤ICP备05087286号