js实践3_渐变应用
最近在网上学习使用JS来制作渐变效果的应用，现在贴出来和大家共享，
页面渐变：
轮换效果：
图片淡入淡出：
上次本想自己封装Date类，但发现里面还有很多问题，所以决定找一天时间来
写，所以只好下次见 哦！
页面渐变：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题 1</title>
<script type="text/javascript">
function windowslong(address,winname,features)
{
windowschange=open(address,winname,features)
for(var x=1;x<=50;x++)
{
windowschange.resizeby(2,0);
}
for(var x=1;x<=70;x++)
{
windowschange.resizeby(0,1);
}
}
</script>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" style="FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#3A0001,endColorStr=#FFFFFF)" >
<div id="jswindows" style="background-color:silver; height:1024px; width:800px;">
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题 1</title>
<script type="text/javascript">
function windowslong(address,winname,features)
{
windowschange=open(address,winname,features)
for(var x=1;x<=50;x++)
{
windowschange.resizeby(2,0);
}
for(var x=1;x<=70;x++)
{
windowschange.resizeby(0,1);
}
}
</script>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" style="FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#3A0001,endColorStr=#FFFFFF)" >
<div id="jswindows" style="background-color:silver; height:1024px; width:800px;">
</div>
</body>
</html>
轮换效果：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题 1</title>
</head>
<body>
<script type="text/javascript">
var NowFrame = 1;
var MaxFrame = 4;
var bStart = 0;
function fnToggle() {
var next = NowFrame + 1;
if(next == MaxFrame+1)
{
NowFrame = MaxFrame;
next = 1;
}
if(bStart == 0)
{
bStart = 1;
setTimeout('fnToggle()', 3500);
return;
}
else
{
oTransContainer.filters[0].Apply();
document.images['oDIV'+next].style.display = "";
document.images['oDIV'+NowFrame].style.display = "none";
oTransContainer.filters[0].Play(duration=2);
if(NowFrame == MaxFrame)
NowFrame = 1;
else
NowFrame++;
} setTimeout('fnToggle()', 3500);
}
fnToggle();
</script>
<div align="center">
<DIV id=oTransContainer style="FILTER: progid:DXImageTransform.Microsoft.Wipe(GradientSize=2.0,wipeStyle=4, motion='forward'); WIDTH: 1px; HEIGHT: 1px;"/>
<a href="" target="_blank">
<img id=oDIV1 style=" border:5px: #FFFFCC groove; height:300px; BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; BORDER-LEFT: black 1px solid; BORDER-BOTTOM: black 1px solid" src="2.jpg"/></a>
<a href="" target="_blank">
<img id=oDIV2 style="border:5px: #FFFFCC groove; width:400px; height:300px; BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; BORDER-LEFT: black 1px solid; DISPLAY: none; BORDER-BOTTOM: black 1px solid" src="3.jpg"/></a>
<a href="" target="_blank">
<img id=oDIV3 style="background-color:#CCFFFF;border:5px: #FF8973 groove; width:400px; height:300px; border-right : black 1px solid; BORDER-TOP: black 1px solid; BORDER-LEFT: black 1px solid; DISPLAY: none; BORDER-BOTTOM: black 1px solid" src="4.jpg"/></a>
<a href="" target="_blank">
<img id=oDIV4 style="background-color:#CCFFFF;border:5px: #000000 groove; width:400px; height:300px; border-right : black 1px solid; BORDER-TOP: black 1px solid; BORDER-LEFT: black 1px solid; DISPLAY: none; BORDER-BOTTOM: black 1px solid" src="1.jpg"/></a>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题 1</title>
</head>
<body>
<script type="text/javascript">
var NowFrame = 1;
var MaxFrame = 4;
var bStart = 0;
function fnToggle() {
var next = NowFrame + 1;
if(next == MaxFrame+1)
{
NowFrame = MaxFrame;
next = 1;
}
if(bStart == 0)
{
bStart = 1;
setTimeout('fnToggle()', 3500);
return;
}
else
{
oTransContainer.filters[0].Apply();
document.images['oDIV'+next].style.display = "";
document.images['oDIV'+NowFrame].style.display = "none";
oTransContainer.filters[0].Play(duration=2);
if(NowFrame == MaxFrame)
NowFrame = 1;
else
NowFrame++;
} setTimeout('fnToggle()', 3500);
}
fnToggle();
</script>
<div align="center">
<DIV id=oTransContainer style="FILTER: progid:DXImageTransform.Microsoft.Wipe(GradientSize=2.0,wipeStyle=4, motion='forward'); WIDTH: 1px; HEIGHT: 1px;"/>
<a href="" target="_blank">
<img id=oDIV1 style=" border:5px: #FFFFCC groove; height:300px; BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; BORDER-LEFT: black 1px solid; BORDER-BOTTOM: black 1px solid" src="2.jpg"/></a>
<a href="" target="_blank">
<img id=oDIV2 style="border:5px: #FFFFCC groove; width:400px; height:300px; BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; BORDER-LEFT: black 1px solid; DISPLAY: none; BORDER-BOTTOM: black 1px solid" src="3.jpg"/></a>
<a href="" target="_blank">
<img id=oDIV3 style="background-color:#CCFFFF;border:5px: #FF8973 groove; width:400px; height:300px; border-right : black 1px solid; BORDER-TOP: black 1px solid; BORDER-LEFT: black 1px solid; DISPLAY: none; BORDER-BOTTOM: black 1px solid" src="4.jpg"/></a>
<a href="" target="_blank">
<img id=oDIV4 style="background-color:#CCFFFF;border:5px: #000000 groove; width:400px; height:300px; border-right : black 1px solid; BORDER-TOP: black 1px solid; BORDER-LEFT: black 1px solid; DISPLAY: none; BORDER-BOTTOM: black 1px solid" src="1.jpg"/></a>
</div>
</body>
</html>
图片淡入淡出：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题 1</title>
</head>
<body>
<script type="text/javascript">
var d=0
function JM_fade(ob){
if (d==0) {
ob.filters.alpha.opacity+=1}
else {ob.filters.alpha.opacity-=1}
if (ob.filters.alpha.opacity==100)
{d=1;}
else if (ob.filters.alpha.opacity==0)
{d=0;}
}
setInterval("JM_fade(u)",10);
</script>
<img style="FILTER: alpha(opacity=0)" src="1.jpg" name="u" alt=""/>
</body>
</html>
渐变菜单：<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题 1</title>
</head>
<body>
<script type="text/javascript">
var d=0
function JM_fade(ob){
if (d==0) {
ob.filters.alpha.opacity+=1}
else {ob.filters.alpha.opacity-=1}
if (ob.filters.alpha.opacity==100)
{d=1;}
else if (ob.filters.alpha.opacity==0)
{d=0;}
}
setInterval("JM_fade(u)",10);
</script>
<img style="FILTER: alpha(opacity=0)" src="1.jpg" name="u" alt=""/>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>dancepower.cn</title>
<script type="text/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>
<table>
<tr>
<td align="middle">
<table borderColor="#ffffff" height="100" cellSpacing="1" cellPadding="1"
width="100" align="center" bgColor="#000033" border="1">
<tr align="center">
<td id="td" onmouseover="nereidFade(this,100,10,5)"
style="background-color:red; FILTER: alpha(opacity=70)" onmouseout="nereidFade(this,50,10,5)"
><font face="verdana" color="#ffffff" size="1">dio</font>
</td>
</tr>
<tr align="center">
<td id="td1" onmouseover="nereidFade(this,100,10,5)" style=" background-color:green; FILTER: alpha(opacity=70)" onmouseout="nereidFade(this,50,10,5)"
><font face="verdana" color="#ffffff" size="1">pex</font>
</td>
</tr>
<tr align="center">
<td id="td2" onmouseover="nereidFade(this,100,10,5)"
style="background-color:blue; FILTER: alpha(opacity=70)" onmouseout="nereidFade(this,50,10,5)"
><font face="verdana" color="#ffffff" size="1">pex</font>
</td>
</tr>
<tr align="center">
<td id="td3" onmouseover="nereidFade(this,100,10,5)"
style="background-color:aqua; FILTER: alpha(opacity=70)" onmouseout="nereidFade(this,50,10,5)"
><font face="verdana" color="#ffffff" size="1">dio</font>
</td>
</tr >
</table>
</td>
</tr>
</table>
</body>
</html>
<html>
<head>
<title>dancepower.cn</title>
<script type="text/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>
<table>
<tr>
<td align="middle">
<table borderColor="#ffffff" height="100" cellSpacing="1" cellPadding="1"
width="100" align="center" bgColor="#000033" border="1">
<tr align="center">
<td id="td" onmouseover="nereidFade(this,100,10,5)"
style="background-color:red; FILTER: alpha(opacity=70)" onmouseout="nereidFade(this,50,10,5)"
><font face="verdana" color="#ffffff" size="1">dio</font>
</td>
</tr>
<tr align="center">
<td id="td1" onmouseover="nereidFade(this,100,10,5)" style=" background-color:green; FILTER: alpha(opacity=70)" onmouseout="nereidFade(this,50,10,5)"
><font face="verdana" color="#ffffff" size="1">pex</font>
</td>
</tr>
<tr align="center">
<td id="td2" onmouseover="nereidFade(this,100,10,5)"
style="background-color:blue; FILTER: alpha(opacity=70)" onmouseout="nereidFade(this,50,10,5)"
><font face="verdana" color="#ffffff" size="1">pex</font>
</td>
</tr>
<tr align="center">
<td id="td3" onmouseover="nereidFade(this,100,10,5)"
style="background-color:aqua; FILTER: alpha(opacity=70)" onmouseout="nereidFade(this,50,10,5)"
><font face="verdana" color="#ffffff" size="1">dio</font>
</td>
</tr >
</table>
</td>
</tr>
</table>
</body>
</html>
上次本想自己封装Date类，但发现里面还有很多问题，所以决定找一天时间来
写，所以只好下次见 哦！
