JavaScript经典效果收藏

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

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

 荧 光 效 果
.荧 光 效 果


<span id="theText" style="width:100%">
<h1><font size="2">用户名:</font></h1>
</span> 

<script language="JavaScript">
<!--

function SymError()
{
  
return true;
}


window.onerror 
= SymError;

//-->
</script>

<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>
<SCRIPT language=JavaScript> 
// 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">
<TABLE height="100%" cellSpacing=0 cellPadding=0 width="100%" border=0>
  
<TBODY>
  
<TR>
    
<TD align=middle>
      
<TABLE borderColor=#ffffff height=100 cellSpacing=1 cellPadding=1 
      width
=100 align=center bgColor=#000033 border=1>
        
<TBODY>
        
<TR align=middle>
          
<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>
        
<TR align=middle>
          
<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>

 

无图片实现圆角

 

<style type="text/css">
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>

<div class="RoundedCorner">
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
<br>无图片实现圆角框<br><br>
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
</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>
<style type="text/css">
.trans 
{filter:revealTrans(Transition=12,Duration=2)}
</style>
</head>
<body>
<script language="JavaScript">
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>
<table width=453 border=0 cellspacing=3 cellpadding=0>
          
<tr bgcolor=CCF4B9> 
            
<td height=24 bgcolor=CCF4B9 id=divText class=trans></td>
          
</tr>
      
<script>playAd()</script>
 
</table>
</body>
</html>


将HTML自动转为JS代码

 

<script>
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> 
<input type=button value="将 HTML 转为 JavaScript" onclick=toScript(document.all["code"])><br>
<textarea id=code cols=75 rows=20>
<table width="300">
<tr><td align="right">A</td></tr>
</table></textarea>
73个效果的实例 01:___CSS+JS滚动图片功能代码 02:___CSS使用图片完美修饰的全兼容圆角框 03:___CSS制作的类似相册浏览的功能 04:___CSS完成神奇创意的相框 05:___CSS实现自适应的图片背景边框 06:___CSS将图片自动变为圆角 07:___CSS强制等比例缩小图片 08:___Javascript仿Flash图片轮翻 09:___JavaScript图片滚动(绝对酷) 10:___JavaScript生成弹性透明的图片放大代码 11:___JavaScript由左向右的图片渐变过渡 12:___JavaScript动态控制图片透明度的变化 13:___JavaScript图片放大 14:___JavaScript图片特效 15:___JavaScript图片预加载代码,显示loading 16:___JavaScript改变图片透明度,鼠标放上渐渐显示 17:___JavaScript真正的鼠标放上动画加载大图的 18:___JS+CSS给图片加上鼠标滑过的方框 19:___JS卡通图片切换 20:___JS图片切换,带缩略图版 21:___JS图片滚动代码(无缝、平滑) 22:___Js图片连续左右滚动 23:___Js拖动特效,一串水晶球(很强大) 24:___JS放大镜,JavaScript图片放大代码 25:___JS点击小图预览大图(仿淘宝) 26:___亮丽的JS图片渐变导航 27:___从两侧向中间拼合的JavaScript图片切换效果 28:___仿265网站LOGO,会盯着你看的眼睛 29:___像弹簧一样抖动的横向图片滚动 30:___前后轮翻的JS图片幻灯切换 31:___动态的Loading文字,逐个变大 32:___可控的纵向图片滚动 33:___右下角随机显示的JS图片广告 34:___向上翻动的内容切换示例 35:___图片友情链接滚动,横向,带控制按钮 36:___图片围成环形滚动,有空间感 37:___图片型不规则菜单的CSs实现 38:___图片拖拉缩放效果(仿PHOTOSHOP) 39:___图片控制内容框的文字上下翻滚 40:___图片旋转构成3D圆环的展示特效 41:___图片点击后变灰色的CSs代码 42:___图片闪烁代码 43:___图片雷达效果,像光照一样 44:___在图片上单击获取图片原始大小 45:___大幅JS焦点图切换 46:___左右切换鼠标可控的无缝图片滚动代码 47:___平滑图片滚动 48:___很有意思的图片分裂复制效果 49:___按比例缩放图片,JavaScript代码 50:___最简的JavaScript鼠标经过切换图片 51:___有点炫的JavaScript立体图片展示 52:___根据鼠标放上切换内容制作的图片导航 53:___浮动的图片广告 54:___清爽简洁的图片交替导航效果 55:___用CSS实现图片的双边框效果 56:___禁止在图片上使用右键 57:___竖向图片滚动 58:___纯CSS代码实现的图片列表滚动 59:___纯CSS实现鼠标移上图片添加阴影效果 60:___经典的图片切换 61:___网站首页js幻灯片代码 62:___美化过的匀速图片滚动 63:___腾讯QQ网站的Js图片切换 64:___自写Js+CSS轮显效果 65:___自动播放——Js幻灯片缓冲效果 66:___规定区域的JS拖动展示效果 67:___超漂亮Js+css图片幻灯切换 68:___马赛克效果的JS图片切换代码 69:___鼠标放到图片上会滑出提示文字 70:___鼠标滑过,缩略图放大显示(纯CSS) 71:___鼠标移上图片,变换出大图片 72:___鼠标经过图片时显示半透明文字,边框变色 73:___鼠标经过图片由灰色变彩色
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值