经典论坛 › 论坛 › 网站开发区 › 前台制作与脚本专栏 › 表格艺术经典回顾

查看: 24914|回复: 52

表格艺术经典回顾 [复制链接]

marvellous　楼主

金翅擘海

钻石会员

帖子: 16559
体力: 37158
威望: 143

发表于 2006-3-19 23:56:00 |显示全部楼层

本帖旨在挖掘表格在艺术创意方面的一些功能效果。

if (navigator.appName.indexOf("Microsoft",0) != -1 && parseInt(navigator.appVersion) >= 4) {
    Browser = true;
} else {
    Browser = false;
}

if (Browser) {
    document.onmouseover = doRainbowAnchor;
    document.onmouseout = stopRainbowAnchor;
}

function doRainbow()
{
    if (Browser && act != 1) {
        act = 1;
        obj = event.srcElement;
        clrOrg = obj.style.color;
        TimerID = setInterval("ChangeColor()",100);
    }
}

function stopRainbow()
{
    if (Browser && act != 0) {
        obj.style.color = clrOrg;
        clearInterval(TimerID);
        act = 0;
    }
}

function doRainbowAnchor()
{
    if (Browser && act != 1) {
        obj = event.srcElement;

while (obj.tagName != 'A' && obj.tagName != 'BODY') {
            obj = obj.parentElement;
            if (obj.tagName == 'A' || obj.tagName == 'BODY')
                break;
        }

if (obj.tagName == 'A' && obj.href != '') {
            act = 1;
            clrOrg = obj.style.color;
            TimerID = setInterval("ChangeColor()",100);
        }
    }
}

function ChangeColor()
{
    obj.style.color = makeColor();
}

function makeColor()
{

if (elmS == 0) {
        elmR = elmV;    elmG = elmV;    elmB = elmV;
    }
    else {
        t1 = elmV;
        t2 = (255 - elmS) * elmV / 255;
        t3 = elmH % 60;
        t3 = (t1 - t2) * t3 / 60;

if (elmH < 60) {
            elmR = t1;  elmB = t2;  elmG = t2 + t3;
        }
        else if (elmH < 120) {
            elmG = t1;  elmB = t2;  elmR = t1 - t3;
        }
        else if (elmH < 180) {
            elmG = t1;  elmR = t2;  elmB = t2 + t3;
        }
        else if (elmH < 240) {
            elmB = t1;  elmR = t2;  elmG = t1 - t3;
        }
        else if (elmH < 300) {
            elmB = t1;  elmG = t2;  elmR = t2 + t3;
        }
        else if (elmH < 360) {
            elmR = t1;  elmG = t2;  elmB = t1 - t3;
        }
        else {
            elmR = 0;   elmG = 0;   elmB = 0;
        }
    }

elmR = Math.floor(elmR);
    elmG = Math.floor(elmG);
    elmB = Math.floor(elmB);

clrRGB = '#' + elmR.toString(16) + elmG.toString(16) + elmB.toString(16);

elmH = elmH + rate;
    if (elmH >= 360)
        elmH = 0;

return clrRGB;
}

//-->
</script>

</td></tr></table>

/*
Flashing Table Border Script- 
?Dynamic Drive (www.dynamicdrive.com)
For full source code, installation instructions,
100's more DHTML scripts, and Terms Of
Use, visit dynamicdrive.com
*/

function flashit(){
if (!document.all)
return
if (myexample.style.borderColor=="white")
myexample.style.borderColor="red"
else
myexample.style.borderColor="white"
}
setInterval("flashit()", 500)
//-->
</script>

提示：您可以先修改部分代码再运行

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-htm.../loose.dtd"> 
<HTML><HEAD><TITLE>Rounded Box Demo</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<STYLE type=text/css>
BODY {
    PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 16px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; FONT-FAMILY: Georgia; BACKGROUND-COLOR: #fff
}
DIV.rounded-box {
    MARGIN: 3px; WIDTH: 9em; POSITION: relative; BACKGROUND-COLOR: #e6e6e6; filter:Alpha(Opacity=50);
}
DIV.top-left-corner {
    OVERFLOW: hidden; WIDTH: 20px; POSITION: absolute; HEIGHT: 20px; BACKGROUND-COLOR: #fff
}
DIV.bottom-left-corner {
    OVERFLOW: hidden; WIDTH: 20px; POSITION: absolute; HEIGHT: 20px; BACKGROUND-COLOR: #fff
}
DIV.top-right-corner {
    OVERFLOW: hidden; WIDTH: 20px; POSITION: absolute; HEIGHT: 20px; BACKGROUND-COLOR: #fff
}
DIV.bottom-right-corner {
    OVERFLOW: hidden; WIDTH: 20px; POSITION: absolute; HEIGHT: 20px; BACKGROUND-COLOR: #fff
}
DIV.top-left-inside {
    FONT-SIZE: 150px; COLOR: #e6e6e6; LINE-HEIGHT: 40px; FONT-FAMILY: arial; POSITION: relative
}
DIV.bottom-left-inside {
    FONT-SIZE: 150px; COLOR: #e6e6e6; LINE-HEIGHT: 40px; FONT-FAMILY: arial; POSITION: relative
}
DIV.top-right-inside {
    FONT-SIZE: 150px; COLOR: #e6e6e6; LINE-HEIGHT: 40px; FONT-FAMILY: arial; POSITION: relative
}
DIV.bottom-right-inside {
    FONT-SIZE: 150px; COLOR: #e6e6e6; LINE-HEIGHT: 40px; FONT-FAMILY: arial; POSITION: relative
}
DIV.top-left-corner {
    LEFT: 0px; TOP: 0px
}
DIV.bottom-left-corner {
    LEFT: 0px; BOTTOM: 0px
}
DIV.top-right-corner {
    RIGHT: 0px; TOP: 0px
}
DIV.bottom-right-corner {
    RIGHT: 0px; BOTTOM: 0px
}
DIV.top-left-inside {
    LEFT: -8px
}
DIV.bottom-left-inside {
    LEFT: -8px; TOP: -17px
}
DIV.top-right-inside {
    LEFT: -25px
}
DIV.bottom-right-inside {
    LEFT: -25px; TOP: -17px
}
DIV.box-contents {
    PADDING-RIGHT: 8px; PADDING-LEFT: 8px; PADDING-BOTTOM: 8px; COLOR: #000; PADDING-TOP: 8px; POSITION: relative
}
</STYLE>

</DIV></DIV>

<br><br>
<style>td{color:red;font-family:华文行楷;font-size:14px;}</style>
<center>
<TABLE BORDER="5" BORDERCOLOR="#0080FF" BORDERCOLORLIGHT="#62B0FF" BORDERCOLORDARK="#004B97" BGCOLOR=#FFCC33 cellspacing="10" cellpadding="10" style=" FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=yellow,endColorStr=green);">
<TR><TD>良</TD><TD>天</TD></TR>
<TR><TD>心</TD><TD>地</TD></TR>
</TABLE>

</BODY></HTML>

提示：您可以先修改部分代码再运行

<style>

body{background:#000000;}
H3{
        text-align: left;
        font-size: 12px;
        color: brown;
        float: left;
        margin-left: 2px;
        margin-top: 3px;
font-family: "隶书";letter-spacing:3px;
}
p {
        line-height: 22px;
        color: yellow;
        font-size: 12px;
        text-indent: 2em;
        margin-top: 10px;
        margin-right: 10px;
        margin-left: 10px;
        font-family: "华文行楷";
}
</style>
<center>
<table><tr>
<td>
<table style="width:240;height:360;" cellspacing="0" cellpadding="0">
<tr><td style="width:240;height:10%;filter:progid:DXImageTransform.microsoft.gradient(gradienttype=1,startColorStr=white,endColorStr=pink);">
<h3>让我内心的男主角放出光芒</h3>

</td></tr><tr><td style="width:240;height:90%;background-color:darkblue;filter:progid:DXImageTransform.microsoft.gradient(gradienttype=1,startColorStr=skyblue,endColorStr=darkblue);">

<p>偶就是做手机短信的，但不是这种诈骗的行为。这样的短信随手删除就ok了。我觉得这样的短信还不算可气的。
可气的是，对方给你拨电话响一声挂了。自己以为是什么重要的业务电话。随手回过去，结果是莫名其妙的：“欢迎致电台湾**公司。。。”一个*声*气的女的。立马挂断，心里面还扑通扑通，这个声讯电话扣我多少钱啊？</p>

</td></tr><tr><td style="width:240;height:90%;background-color:darkblue;filter:progid:DXImageTransform.microsoft.gradient(gradienttype=1,startColorStr=darkblue,endColorStr=skyblue);">

</td></tr>
</table>
</td>
</tr><tr>
<td>
<table style="width:240;height:360;" cellspacing="0" cellpadding="0">
<tr><td style="width:240;height:10%;filter:progid:DXImageTransform.microsoft.gradient(gradienttype=1,startColorStr=white,endColorStr=green);">
<h3>让我内心的女主角放出光芒</h3>
</td></tr><tr><td style="width:240;height:90%;background-color:darkblue;filter:progid:DXImageTransform.microsoft.gradient(gradienttype=1,startColorStr=skyblue,endColorStr=darkblue);">

</td></tr>
</table>
</td>
<td>
<table style="width:240;height:360;" cellspacing="0" cellpadding="0">
<tr><td style="width:240;height:10%;filter:progid:DXImageTransform.microsoft.gradient(gradienttype=1,startColorStr=deeppink,endColorStr=white);">
<center>
<span id="glowtext"><font color="ffffff" " face="华文新魏" size="4">妹妹扎起黑漆漆的翘揪揪儿
</font></span>

</td></tr><tr><td style="width:240;height:90%;background-color:darkblue;filter:progid:DXImageTransform.microsoft.gradient(gradienttype=1,startColorStr=darkblue,endColorStr=skyblue);">

</script>
<center>
<a href="#"  onFocus="if(this.blur)this.blur()"><img src="http://desk.blueidea.com/DESK/16001200BZ/Webshots_29/225/Webshots_29001.jpg"  onMouseOut=nereidFade(this,100,10,3) onMouseOver=nereidFade(this,20,10,3)  style="FILTER: alpha(opacity=100)" border="0" ></a>

</td></tr>
</table>
</td>
</tr></table>

提示：您可以先修改部分代码再运行

┏┯┓┏┯┓┏┯┓┏┯┓
┠知┨┠往┨┠观┨┠来┨
┗┷┛┗┷┛┗┷┛┗┷┛

		自动登录	找回密码
密码			注册

表格艺术经典回顾 [复制链接]

浏览过的帖子

浏览过的版块