现在的位置: 首页 > 综合 > 正文

JavaScript经典效果收藏

2013年01月23日 ⁄ 综合 ⁄ 共 3665字 ⁄ 字号 评论关闭
 荧 光 效 果
.荧 光 效 果


<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"

抱歉!评论已关闭.