| 网站首页 | 业界新闻 | 小组 | 威客 | 人才 | 下载频道 | 博客 | 代码贴 | 在线编程 | 编程论坛 | 
登录
注册
用户控制面板
搜索
道具
风格
短消息
论坛展区
帮助
编程论坛 → WEB开发 → 『 WEB前端(UI) 』 → 无聊找了点网页特效代码！！
我的收件箱(0)
欢迎加入我们，一同切磋技术
用户名：   
 
密　码：  
共有 6158 人关注过本帖
标题：无聊找了点网页特效代码！！
只看楼主 加入收藏
oヤ偽妳變壞
Rank: 2
等　级：新手上路
威　望：4
帖　子：2251
专家分：0
注　册：2006-3-19
第 31 楼
收藏
 得分:0 

字符在状态栏缓慢移动
要完成此效果把如下代码加入到<body>区域中

<script language="Javascript">
<!--
var x = 0
var speed = 120
var text = "欢迎光临细溪驿站!"
var course = 120
var text2 = text

function Scroll() {
window.status = text2.substring(0, text2.length)

if (course < text2.length) {
setTimeout("Scroll2()", speed)
}

else {
text2 = " " + text2

setTimeout("Scroll()", speed);
}
}

function Scroll2() {
window.status = text2.substring(x, text2.length)

if (text2.length - x == text.length) {
text2 = text
x = 0

setTimeout("Scroll()", speed);
}

else {
x++
setTimeout("Scroll2()", speed);
}
}

Scroll()
//-->
</script>


/sysweb/RegTrans.aspx?CodeProvider=systemxp" target="_blank">免费支持FTP,PHP,.NET1G的空间
2006-04-28 19:00
oヤ偽妳變壞
Rank: 2
等　级：新手上路
威　望：4
帖　子：2251
专家分：0
注　册：2006-3-19
第 32 楼
收藏
 得分:0 

输入代码变背景颜色
脚本说明:
第一步:把如下代码加入<head>区域中
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function test(form) {
if (form.text.value == "")
alert("请输入你喜欢的颜色代码!")
else {
document.bgColor=(""+form.text.value+"");
}
}
// End -->
</SCRIPT>


第二步:把如下代码加入<body>区域中
<FORM>
<B>输入你喜欢的颜色代码，然后按按扭：<BR>
<input type="text" name="text">
<input type="button" name="button" value="输入" onClick="test(this.form)">
</FORM>

第三步:把<body>改为
<body bgcolor="#fef4d9" onLoad="clear();display()">


/sysweb/RegTrans.aspx?CodeProvider=systemxp" target="_blank">免费支持FTP,PHP,.NET1G的空间
2006-04-28 19:01
oヤ偽妳變壞
Rank: 2
等　级：新手上路
威　望：4
帖　子：2251
专家分：0
注　册：2006-3-19
第 33 楼
收藏
 得分:0 

背景颜色随你选择
脚本说明:第一步:把如下代码加入<head>区域中
<SCRIPT language=javascript>
<!--
function makeArray(q){for(i=1;i<=q;i++){this[i]=0}}Colors=new makeArray(7);Colors[1]="00";Colors[2]="33";Colors[3]="66";Colors[4]="99";Colors[5]="CC";Colors[6]="FF";
-->
</SCRIPT>


第二步:把如下代码加入<body>区域中
<center><table cellspacing=0 cellpadding=0><SCRIPT language=javascript>
<!--
for(i=1;i<=6;i++){for(j=1;j<=6;j++){for(k=1;k<=6;k++){var thiscolor=Colors[i]+Colors[j]+Colors[k];document.writeln("<tr><td height = 20 bgcolor = \"#" + thiscolor + "\" align = right><a href = ");document.writeln("\'\' onMouseOver = \"document.bgColor=\'"+thiscolor+"\'\">"+thiscolor+"</a></td></tr>");}}}

-->


</SCRIPT></table></center>


/sysweb/RegTrans.aspx?CodeProvider=systemxp" target="_blank">免费支持FTP,PHP,.NET1G的空间
2006-04-28 19:03
oヤ偽妳變壞
Rank: 2
等　级：新手上路
威　望：4
帖　子：2251
专家分：0
注　册：2006-3-19
第 34 楼
收藏
 得分:0 

颜色选择器
本说明:
把如下代码加入<body>区域中
<FORM>
<SELECT Size=22 name=clr onChange="document.bgColor=this.options[this.selectedIndex].value">
<OPTION VALUE="blue">blue
<OPTION VALUE="aquamarine">aquamarine
<OPTION VALUE="chocolate">chocolate
<OPTION VALUE="darkred">dark red
<OPTION VALUE="gold">gold
<OPTION VALUE="red">red
<OPTION VALUE="yellow">yellow
<OPTION VALUE="hotpink">hotpink
<OPTION VALUE="lime">lime
<OPTION VALUE="darkkhaki">dark khaki
<OPTION VALUE="cadetblue ">cadet blue
<OPTION VALUE="darkgoldenrod">dark goldenrod
<OPTION VALUE="darkslateblue">dark slate blue
<OPTION VALUE="deeppink">deep pink
<OPTION VALUE="darksalmon">dark salmon
<OPTION VALUE="salmon">salmon
<OPTION VALUE="tan">tan
<OPTION VALUE="wheat">wheat
<OPTION VALUE="tomato">tomato
<OPTION VALUE="springgreen">springgreen
<OPTION VALUE="turquoise">turquoise
<OPTION VALUE="FFFFFF" SELECTED> White
</select></form>


/sysweb/RegTrans.aspx?CodeProvider=systemxp" target="_blank">免费支持FTP,PHP,.NET1G的空间
2006-04-28 19:04
oヤ偽妳變壞
Rank: 2
等　级：新手上路
威　望：4
帖　子：2251
专家分：0
注　册：2006-3-19
第 35 楼
收藏
 得分:0 

礼花背景
脚本说明:
把如下代码加入<body>区域中
<layer name="a0" left=10 top=10 visibility=show bgcolor="#ffffff" clip="0,0,1,1"></layer>
<layer name="a1" left=10 top=10 visibility=show bgcolor="#fff000" clip="0,0,1,1"></layer>
<layer name="a2" left=10 top=10 visibility=show bgcolor="#ffa000" clip="0,0,1,1"></layer>
<layer name="a3" left=10 top=10 visibility=show bgcolor="#ff00ff" clip="0,0,1,1"></layer>
<layer name="a4" left=10 top=10 visibility=show bgcolor="#00ff00" clip="0,0,1,1"></layer>
<layer name="a5" left=10 top=10 visibility=show bgcolor="#ff00ff" clip="0,0,1,1"></layer>
<layer name="a6" left=10 top=10 visibility=show bgcolor="#ff0000" clip="0,0,1,1"></layer>
<layer name="a7" left=10 top=10 visibility=show bgcolor="#ffffff" clip="0,0,1,1"></layer>
<layer name="a8" left=10 top=10 visibility=show bgcolor="#fff000" clip="0,0,1,1"></layer>
<layer name="a9" left=10 top=10 visibility=show bgcolor="#ffa000" clip="0,0,1,1"></layer>
<layer name="a10" left=10 top=10 visibility=show bgcolor="#ff00ff" clip="0,0,1,1"></layer>
<layer name="a11" left=10 top=10 visibility=show bgcolor="#00ff00" clip="0,0,2,2"></layer>
<layer name="a12" left=10 top=10 visibility=show bgcolor="#0000ff" clip="0,0,2,2"></layer>
<layer name="a13" left=10 top=10 visibility=show bgcolor="#ff0000" clip="0,0,2,2"></layer>
<div id="starsDiv" style="position:absolute;top:0px;left:0px">
<div style="position:relative;width:2px;height:2px;background:#ffffff;font-size:2px"></div>
<div style="position:relative;width:1px;height:1px;background:#fff000;font-size:1px"></div>
<div style="position:relative;width:1px;height:1px;background:#ffa000;font-size:1px"></div>
<div style="position:relative;width:1px;height:1px;background:#ff00ff;font-size:1px"></div>
<div style="position:relative;width:1px;height:1px;background:#00ff00;font-size:1px"></div>
<div style="position:relative;width:1px;height:1px;background:#0000ff;font-size:1px"></div>
<div style="position:relative;width:1px;height:1px;background:#FF0000;font-size:1px"></div>
<div style="position:relative;width:1px;height:1px;background:#ffffff;font-size:1px"></div>
<div style="position:relative;width:1px;height:1px;background:#fff000;font-size:1px"></div>
<div style="position:relative;width:1px;height:1px;background:#ffa000;font-size:1px"></div>
<div style="position:relative;width:1px;height:1px;background:#ff00ff;font-size:1px"></div>
<div style="position:relative;width:2px;height:2px;background:#ff00ff;font-size:2px"></div>
<div style="position:relative;width:1px;height:1px;background:#0000ff;font-size:1px"></div>
<div style="position:relative;width:1px;height:1px;background:#FF0000;font-size:1px"></div>
</div>

<SCRIPT LANGUAGE="JavaScript">

<!-- Begin
var Clrs = new Array(9);
Clrs[0] = 'ff0000';
Clrs[1] = '00ff00';
Clrs[2] = '000aff';
Clrs[3] = 'ff00ff';
Clrs[4] = 'ffa500';
Clrs[5] = 'ffff00';
Clrs[6] = '00ff00';
Clrs[7] = 'ffffff';
Clrs[8] = 'fffff0';
var sClrs = new Array(5);
sClrs[0] = 'ffa500';
sClrs[1] = '55ff66';
sClrs[2] = 'AC9DFC';
sClrs[3] = 'fff000';
sClrs[4] = 'fffff0';
var yBase;
var xBase;
var step;
var currStep = 0;
var Xpos = 1;
var Ypos = 1;
var initialStarColor = 'ffa000';
var Mtop = 250;
var Mleft = 250;
function Fireworks() {
if (document.all) {
yBase = window.document.body.offsetHeight / 3;
xBase = window.document.body.offsetWidth / 8;
}
else if (document.layers) {
yBase = window.innerHeight / 3;
xBase = window.innerWidth / 8;
}
if (document.all) {
step = 5;
for ( i = 0 ; i < starsDiv.all.length ; i++ ) {
for (ai = 0; ai < Clrs.length; ai++) {
var c = Math.round(Math.random()*[ai]);
}
if (currStep < 90)
starsDiv.all[i].style.background=initialStarColor;
if (currStep > 90)
starsDiv.all[i].style.background=Clrs[c];
starsDiv.all[i].style.top = Mtop + yBase*Math.sin((currStep+i*5)/3)*Math.sin(550+currStep/100)
starsDiv.all[i].style.left = Mleft + yBase*Math.cos((currStep+i*5)/3)*Math.sin(550+currStep/100)
}
}
else if (document.layers) {
step = 5;
for ( j = 0 ; j < 24 ; j++ ) { //number of NS layers!
var templayer = "a"+j;
for (ai = 0; ai < Clrs.length; ai++) {
var c = Math.round(Math.random()*[ai]);
}
if (currStep < 90)
document.layers[templayer].bgColor=initialStarColor;
if (currStep > 90)
document.layers[templayer].bgColor=Clrs[c];
document.layers[templayer].top = Mtop + yBase*Math.sin((currStep+j*5)/3)*Math.sin(550+currStep/100)
document.layers[templayer].left = Mleft + yBase*Math.cos((currStep+j*5)/3)*Math.sin(550+currStep/100)
}
}
currStep+= step;
T=setTimeout("Fireworks()",5);
if (currStep == 220) {
currStep = -10;
for (n = 0; n < sClrs.length; n++) {
var k = Math.round(Math.random()*n);
}
initialStarColor = sClrs[k];
if (document.all) {
Dtop = window.document.body.clientHeight - 250;
Dleft = xBase * 3.5;
Mtop = Math.round(Math.random()*Dtop);
Mleft = Math.round(Math.random()*Dleft);
document.all.starsDiv.style.top = Mtop+document.body.scrollTop;
document.all.starsDiv.style.left = Mleft+document.body.scrollLeft;
}
else if (document.layers) {
Dleft = window.innerWidth - 100;
Dtop = window.innerHeight - 100;
Mtop = Math.round(Math.random()*Dtop+window.pageYOffset);
Mleft = Math.round(Math.random()*Dleft+window.pageXOffset);
document.layers[templayer].top = Mtop;
document.layers[templayer].left = Mleft;
}
if ((Mtop < 20) || (Mleft < 20)) {
Mtop += 90;
Mleft += 90;
}
}
}
Fireworks();
// End -->
</script>


/sysweb/RegTrans.aspx?CodeProvider=systemxp" target="_blank">免费支持FTP,PHP,.NET1G的空间
2006-04-28 19:05
oヤ偽妳變壞
Rank: 2
等　级：新手上路
威　望：4
帖　子：2251
专家分：0
注　册：2006-3-19
第 36 楼
收藏
 得分:0 

页面自动滚屏效果
第一步:把如下代码加入<head>区域中
<SCRIPT language="JavaScript">
<!--
function scrollit(){
for (I=1; I<=500; I++){
self.scroll(1,I)
}
}
//-->
</SCRIPT>

第二步:把<body>区中内容改为
<body onload="scrollit()">


/sysweb/RegTrans.aspx?CodeProvider=systemxp" target="_blank">免费支持FTP,PHP,.NET1G的空间
2006-04-28 19:08
oヤ偽妳變壞
Rank: 2
等　级：新手上路
威　望：4
帖　子：2251
专家分：0
注　册：2006-3-19
第 37 楼
收藏
 得分:0 

在你的网页中加入下雨的效果
要完成此效果把如下代码加入到<body>区域中

<script language="JavaScript">
<!--
var no = 50;
var speed = 1;
var ns4up = (document.layers) ? 1 : 0;
var ie4up = (document.all) ? 1 : 0;
var s, x, y, sn, cs;
var a, r, cx, cy;
var i, doc_width = 800, doc_height = 600;
if (ns4up) {
doc_width = self.innerWidth;
doc_height = self.innerHeight;
}
else
if (ie4up) {
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
}
x = new Array();
y = new Array();
r = new Array();
cx = new Array();
cy = new Array();
s = 8;
for (i = 0; i < no; ++ i) {
initRain();
if (ns4up) {
if (i == 0) {
document.write("<layer name=\"dot"+ i +"\" left=\"1\" ");
document.write("top=\"1\" visibility=\"show\"><font color=\"#999999\">");
document.write(",</font></layer>");
}
else {
document.write("<layer name=\"dot"+ i +"\" left=\"1\" ");
document.write("top=\"1\" visibility=\"show\"><font color=\"#999999\">");
document.write(",</font></layer>");
}
}
else
if (ie4up) {
if (i == 0) {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: ");
document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: ");
document.write("visible; TOP: 15px; LEFT: 15px;\"><font color=\"#999999\">");
document.write(",</font></div>");
}
else {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: ");
document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: ");
document.write("visible; TOP: 15px; LEFT: 15px;\"><font color=\"#999999\">");
document.write(",</font></div>");
}
}
}
function initRain() {
a = 6;
r[i] = 1;
sn = Math.sin(a);
cs = Math.cos(a);
cx[i] = Math.random() * doc_width + 1;
cy[i] = Math.random() * doc_height + 1;
x[i] = r[i] * sn + cx[i];
y[i] = cy[i];
}
function makeRain() {
r[i] = 1;
cx[i] = Math.random() * doc_width + 1;
cy[i] = 1;
x[i] = r[i] * sn + cx[i];
y[i] = r[i] * cs + cy[i];
}
function updateRain() {
r[i] += s;
x[i] = r[i] * sn + cx[i];
y[i] = r[i] * cs + cy[i];
}
function raindropNS() {
for (i = 0; i < no; ++ i) {
updateRain();
if ((x[i] <= 1) || (x[i] >= (doc_width - 20)) || (y[i] >= (doc_height - 20))) {
makeRain();
doc_width = self.innerWidth;
doc_height = self.innerHeight;
}
document.layers["dot"+i].top = y[i];
document.layers["dot"+i].left = x[i];
}
setTimeout("raindropNS()", speed);
}
function raindropIE() {
for (i = 0; i < no; ++ i) {
updateRain();
if ((x[i] <= 1) || (x[i] >= (doc_width - 20)) || (y[i] >= (doc_height - 20))) {
makeRain();
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
}
document.all["dot"+i].style.pixelTop = y[i];
document.all["dot"+i].style.pixelLeft = x[i];
}
setTimeout("raindropIE()", speed);
}
if (ns4up) {
raindropNS();
}
else
if (ie4up) {
raindropIE();
}

-->
</script>


/sysweb/RegTrans.aspx?CodeProvider=systemxp" target="_blank">免费支持FTP,PHP,.NET1G的空间
2006-04-28 19:09
oヤ偽妳變壞
Rank: 2
等　级：新手上路
威　望：4
帖　子：2251
专家分：0
注　册：2006-3-19
第 38 楼
收藏
 得分:0 

背景图片由你自己选择
要完成此效果把如下代码加入到<body>区域中

<script language="JavaScript1.2">
<!--
function tile(){
if (!document.all)
return
var source=event.srcElement
if (source.tagName=="IMG")
document.body.style.backgroundImage="url("+source.src+")"
}

function restore(){
document.body.style.backgroundImage=''
}
document.body.onclick=restore
-->
</script>
</p>
<p align="center"><span class="bgimages" onClick="tile();event.cancelBubble=true">
<img src="http://www.jojoo.net/include/1.jpg" height=96 width=96 border=2>
<img src="http://www.jojoo.net/include/4.jpg" height=96 width=96 border=2><br>
<img src="http://www.jojoo.net/include/3.jpg" height=96 width=96 border=2>
<img src="http://www.jojoo.net/include/2.jpg" height=96 width=96 border=2></span></p>


/sysweb/RegTrans.aspx?CodeProvider=systemxp" target="_blank">免费支持FTP,PHP,.NET1G的空间
2006-04-28 19:12
oヤ偽妳變壞
Rank: 2
等　级：新手上路
威　望：4
帖　子：2251
专家分：0
注　册：2006-3-19
第 39 楼
收藏
 得分:0 

舞台光照射的效果
<head>
<title>Untitled</title>
</head>

<body bgcolor="Black">

<div id="myLightObject" style="position: relative; height: 400px; width: 400px; top: 10px; left: 0px;
color: White; filter: light">
<p align="center">
春花秋月何时了，往事知多少
</p>
<p align="center">
<br>
小楼昨夜又东风
</p>
<p align="center">
<br>
故国不堪回首月明中。
</p>
<p align="center">
<br>
雕栏玉砌应犹在，只是朱颜改。
</p>
<p align="center">
问君能有几多愁，
</p>
<p align="center">
<br>
恰似一江春水向东流。<br>
</p>
</div>

<script language="VBScript">
Option Explicit
sub window_OnLoad()
call myLightObject.filters.light(0).addambient(0,0,255,30)
call myLightObject.filters.light(0).addcone(400,400,200,100,100,200,204,200,80,10)
end sub

sub document_onMouseMove()
call myLightObject.filters.light(0).MoveLight(1,window.event.x,window.event.y,0,1)
end sub


</script>

</body>
</html>




/sysweb/RegTrans.aspx?CodeProvider=systemxp" target="_blank">免费支持FTP,PHP,.NET1G的空间
2006-04-28 19:13
oヤ偽妳變壞
Rank: 2
等　级：新手上路
威　望：4
帖　子：2251
专家分：0
注　册：2006-3-19
第 40 楼
收藏
 得分:0 

状态栏显示载入进度
要完成此效果把如下代码加入到<body>区域中

<script language=VBScript>
Dim Bar, Line, SP
Bar = 0
Line = "|"
SP = 100

Function Window_onLoad()
Bar = 95
SP = 10
End Function

Function Count()
If Bar < 100 Then
Bar = Bar + 1
Window.Status = "已成功下载" & Bar & "%" & " " & String(Bar, Line)
setTimeout "Count()", SP
Else
Window.Status = "欢迎你的光临！！！"
Document.Body.Style.Display = ""
End If
End Function

Call Count()
</script>


/sysweb/RegTrans.aspx?CodeProvider=systemxp" target="_blank">免费支持FTP,PHP,.NET1G的空间
2006-04-28 19:15
快速回复：无聊找了点网页特效代码！！
数据加载中...
 
　　　



关于我们 | 广告合作 | 编程中国 | 清除Cookies | TOP | 手机版

编程中国 版权所有，并保留所有权利。
Powered by Discuz, Processed in 0.101738 second(s), 7 queries.
Copyright©2004-2024, BCCN.NET, All Rights Reserved