JavaScript经典效果收藏

最新推荐文章于 2021-06-03 02:09:29 发布

fightplane

最新推荐文章于 2021-06-03 02:09:29 发布

阅读量872

点赞数

分类专栏： WEB2.0相关技术 java web 开发 javaScript 文章标签： javascript object function filter delay border

java web 开发同时被 3 个专栏收录

117 篇文章

订阅专栏

javaScript

60 篇文章

订阅专栏

WEB2.0相关技术

48 篇文章

订阅专栏

本文介绍几种实用的HTML特效技巧，包括使用JavaScript实现的荧光效果、透明渐变效果、无图片圆角效果及文字幻灯片效果。这些技巧有助于提升网页视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

荧光效果

.荧光效果

</span>

<!--

function SymError()

{

return true;

}

window.onerror = SymError;

//-->

</script>

<!--

var from = 1;

var to = 4;

var delay = 55; //闪的速度

var glowColor = "#FFCC00";//颜色

var i = to;

var j = 0;

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;

}

//-->

</script>

模仿图片透明渐变

<HTML>

<HEAD>

<TITLE>dancepower.cn</TITLE>

// Flash table Extension for Dreamwever ,by dio(diopex@sina.com)

nereidFadeObjects = new Object();

nereidFadeTimers = new Object();

function nereidFade(object, destOp, rate, delta){

if (!document.all)

return

if (object != "[object]"){ //do this so I can take a string too

setTimeout("nereidFade("+object+","+destOp+","+rate+","+delta+")",0);

return;

}

clearTimeout(nereidFadeTimers[object.sourceIndex]);

diff = destOp-object.filters.alpha.opacity;

direction = 1;

if (object.filters.alpha.opacity > destOp){

direction = -1;

}

delta=Math.min(direction*diff,delta);

object.filters.alpha.opacity+=direction*delta;

if (object.filters.alpha.opacity != destOp){

nereidFadeObjects[object.sourceIndex]=object;

nereidFadeTimers[object.sourceIndex]=setTimeout("nereidFade(nereidFadeObjects["+object.sourceIndex+"],"+destOp+","+rate+","+delta+")",rate);

}

</SCRIPT>

</HEAD>

<BODY text=#000000 bgColor=#ffffff leftMargin=0 topMargin=0 marginheight="0"

marginwidth="0">

<TBODY>

<TR>

<TABLE borderColor=#ffffff height=100 cellSpacing=1 cellPadding=1

width=100 align=center bgColor=#000033 border=1>

<TBODY>

<TD onmouseover=nereidFade(this,100,10,5)

style="FILTER: alpha(opacity=70)" onmouseout=nereidFade(this,50,10,5)

bgColor=#00ccff><FONT face=verdana color=#ffffff

size=1>dio</FONT></TD>

<TD onmouseover=nereidFade(this,100,10,5)

style="FILTER: alpha(opacity=70)" onmouseout=nereidFade(this,50,10,5)

bgColor=#ff9900><FONT face=verdana color=#ffffff

size=1>pex</FONT></TD></TR>

<TD onmouseover=nereidFade(this,100,10,5)

style="FILTER: alpha(opacity=70)" onmouseout=nereidFade(this,50,10,5)

bgColor=#ff3399><FONT face=verdana color=#ffffff

size=1>pex</FONT></TD>

<TD onmouseover=nereidFade(this,100,10,5)

style="FILTER: alpha(opacity=70)" onmouseout=nereidFade(this,50,10,5)

bgColor=#33ff66><FONT face=verdana color=#ffffff

size=1>dio</FONT></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></BODY></HTML>

无图片实现圆角

div.RoundedCorner{background: #9BD1FA}

b.rtop, b.rbottom{display:block;background: #FFF}

b.rtop b, b.rbottom b{display:block;height: 1px;overflow: hidden; background: #9BD1FA}

b.r1{margin: 0 5px}

b.r2{margin: 0 3px}

b.r3{margin: 0 2px}

b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}

</style>

<br>无图片实现圆角框<br><br>

</div>

文字幻灯片

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">

<html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>">

<head>

<title>51du.cn-代码演示专用页面</title>

.trans {filter:revealTrans(Transition=12,Duration=2)}

</style>

</head>

<body>

Text = new Array(

"<a href='<a href="http://www.51du.cn" target="_blank">http://www.51du.cn</a>' target='_blank' class='cr4'>班级留言“说”出口，校友录开通语音留言服务</a>",

"<a href='<a href="http://www.51du.cn" target="_blank">http://www.51du.cn</a>' class='cr4'>星级会员新体验,享受无广告的清新校友录</a>",

"<a href='<a href="http://www.51du.cn" target="_blank">http://www.51du.cn</a>' target='_blank' class='cr4'>星级会员免费多彩留言,表情,贴图,个性无限...</a>",

"<a href='<a href="http://www.51du.cn" target="_blank">http://www.51du.cn</a>' target='_blank' class='cr4'>星级会员免费留言下载,导出更多昔日记忆</a>",

"<a href='<a href="http://www.51du.cn" target="_blank">http://www.51du.cn</a>' target='_blank' class='cr4'>在5千万用户中脱颖而出,我是星级会员</a>"

)

var IDX= -1;

function playAd() {

if (IDX==Text.length-1) {

IDX=0;

} else {

IDX++;

}

var prefix = "";

divText.filters[0].apply();

divText.innerHTML = prefix + Text[IDX];

divText.filters[0].play();

to = setTimeout("playAd()",6000);

}

</script>

</tr>

</table>

</body>

</html>

将HTML自动转为JS代码

function toScript(val)

{

var value = val.value

value = value.replace(///gi,"//").replace(/"/gi,"/"").replace(/'/gi,"/'")

valArr = value.split(" ")

value=""

for (i=0; i<valArr.length; i++)

{

value += (i==0) ? "info =" : ""

value += " "" + valArr[i]

value += (i!=valArr.length-1) ? "" +"/n"+ " : "" "

}

value+=" document.write(info)"

val.value = value

}

</script>

</table></textarea>