实用的网页特效集锦

最新推荐文章于 2022-06-21 12:26:27 发布

leaveoff

最新推荐文章于 2022-06-21 12:26:27 发布

阅读量2.1k

点赞数

分类专栏： HTML+CSS+JS 文章标签： function javascript hex input border timer

本文链接：https://blog.csdn.net/leaveoff/article/details/326621

版权

HTML+CSS+JS 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

实用的网页特效集锦

1、没有凹凸感的表单：
<input style="border:1px black solid">
——————————————————————————————————————————
2、超级搜索引擎：


<form action="http://www2.yeah.net/cgi-bin/gosearch/search.cgi"; name="searchform">
<div align="center"><center><table border="0">
<tr align="center" vAlign="center">
<td><select class="p9" name="site" size="1">
<option selected value="---------------">*** 搜索引擎大全 ***</option>
<option value="网易yeah搜索">网易yeah搜索</option>
<option value="中文雅虎">中文雅虎</option>
<option value="中文cseek">中文cseek</option>
<option value="搜狐">搜狐</option>
<option value="悠游中文搜索">悠游中文搜索</option>
<option value="常青藤搜索">常青藤搜索</option>
<option value="北极星">北极星</option>
<option value="若比邻搜索">若比邻搜索</option>
<option value="中经搜索">中经搜索</option>
<option value="视讯中文搜索">视讯中文搜索</option>
<option value="----------------">---------------------</option>
<option value="哇塞中文网(B5)">哇塞中文网(Big5)</option>
<option value="奇摩搜索">奇摩搜索(Big5)</option>
<option value="蕃薯藤(B5)">蕃薯藤(Big5)</option>
<option value="添达香港搜索器">添达香港搜索器(Big5)</option>
<option value="盖世引擎">盖世引擎(Big5)</option>
<option value="绿界探索引擎">绿界探索引擎(Big5)</option>
<option value="Coo台湾索引">Coo台湾索引(Big5)</option>
<option value="UFO搜索">UFO搜索(Big5)</option>
<option value="怪兽搜索">怪兽搜索(Big5)</option>
<option value="茉莉之窗搜索">茉莉之窗搜索(Big5)</option>
<option value="八爪魚搜索机">八爪魚搜索机(Big5)</option>
<option value="***英文搜索引擎***">---------------------</option>
<option value="英文Yahoo">英文 Yahoo!</option>
<option value="英文Locys">英文 Locys</option>
<option value="英文Excite">英文 Excite</option>
<option value="英文Infoseek">英文 Infoseek</option>
<option value="Altavista中英文搜索">Altavista中英文搜索</option>
<option value="dejanews">dejanews 讨论组搜索</option>
<option value="feedME">feedME 讨论组搜索</option>
<option value="mp3">Mp3 音乐搜索</option>
<option value="ubl">Ubl 流行音乐资料库</option>
<option value="***软件及FTP搜索***">--------------------</option>
<option value="Download">Download.com 软件库</option>
<option value="ZDNet">ZDNet 软件库</option>
<option value="cnet">cnet 软件库</option>
<option value="Tucows软件搜索">Tucows 软件库</option>
<option value="------------------">---------------------</option>
<option value="Fastftp软件搜索">Fastftp 软件搜索</option>
<option value="filez">Filez 软件搜索</option>
<option value="fm">FM 软件搜索</option>
<option value="Igd软件搜索">Igd 软件搜索</option>
<option value="SoftSeek软件搜索">SoftSeek 软件搜索</option>
<option value="Winfiles软件搜索">Winfiles 软件搜索</option>
<option value="Winsite软件搜索">Winsite 软件搜索</option>
<option value="davecentral">davecentral</option>
<option value="sharepaper">sharepaper</option>
<option value="slaughterhouse">slaughterhouse</option>
<option value="shareshop">shareshop</option>
</select><input class="pp9" name="key" size="20"><input name="submit" type="submit"
value="开始搜索"></td>
</tr>
</table>
</center></div>
</form>
——————————————————————————————————————————————
3、__有标题的表格：___
| |
| 内容 |
|__________________|


<hr size="1" color="#000000">
<br><br><fieldset style="width:220" align="center"><legend> 有标题的表格 </legend>
这里是表格中的内容,可以是一段文字,也可以是图片,表格
</fieldset>
————————————————————————————————————————————————————————————————
4、友情链接表单验证：


<script language="JavaScript">

</script>



<form name="form" method="post" action="mailto: laohe2000@263.net?SUBJECT=友情连接" enctype="text/plain" onSubmit="return validate_form()">
<p>姓名:<br>
<input style="border:1px black solid" size="40" name="NAME"><br>
Email地址:<br>
<input style="border:1px black solid" size="40" name="EMAIL"><br>
主页网址:<br>
<input style="border:1px black solid" size="40" name="URL" value="http://";><br>
内容简介:<br>
<textarea NAME="DESCRIPTION" input style="border:1px black solid" ROWS="5" COLS="38" wrap="virtual"></textarea><br>
<input type="submit" name="submit" value="立刻发送"> <input type="reset" value="重新填写"> </p>
</form>
————————————————————————————————————————————————
5、进度条中的loading（很酷的特效）


<center><font color=red><b>请稍等，正在打开页面...</b></font></center>
<form name=loading>
<p align=center>
<font color="#0066ff" size="2" face="Arial">loading...</font><input type=text name=chart size=46 style="font-family:Arial; font-weight:bolder; color:#0066ff; background-color:white; padding:0px; border-style:none;"> <br> <input type=text name=percent size=47 style="color:#0066ff; text-align:center; border-width:medium; border-style:none;">
<script>
var bar=0
var line="||"
var amount="||"
count()
function count(){
bar=bar+2
amount =amount + line
document.loading.chart.value=amount
document.loading.percent.value=bar+"%"
if (bar<99)
{setTimeout("count()",100);}
else
{window.location = "http://mufeng.363.net/bbinw.htm";;} //将这里网址改成要“Loading”的页面
}</script></p></form>
————————————————————————————————————————————————
6、打字效果文字：


<script language="JavaScript1.2">
var it=0
var head="display:''"
function initialize(){
mytext=typing.innerText
var myheight=typing.offsetHeight
typing.innerText=''
document.all.typing.style.height=myheight
typeit()
}
function typeit(){
typing.insertAdjacentText("beforeEnd",mytext.charAt(it))
if (it<mytext.length-1){
it++
setTimeout("typeit()",100)
}
else
return
}
if (document.all)
document.body.οnlοad=initialize
</script>
<span id="typing"
style="visiblity:hidden;height:2" style="{head};">
<p>
<font color="#FF0000">沐风三叉戟</span> </font></p>
————————————————————————————————————————————————
7、改变IE滚动条样式（适合IE6。0以上IE浏览器）：


<STYLE>
Body{
Scrollbar-Face-Color:#536BFD; //滚动条表面颜色
scrollbar-highlight-color:#536BFD; //滚动条上斜面和左斜面颜色
scrollbar-shadow-color:#536BFD; //滚动条下斜面和右斜面颜色
scrollbar-3dlight-color:#FFFFFF; //滚动条上边和左边的边沿颜色
scrollbar-arrow-color:Blue; //滚动条上下箭头颜色
scrollbar-track-color:#536BFD; //滚动条底版颜色
scrollbar-darkshadow-color:#536BFD //滚动条下边和右边边沿颜色
}
</STYLE>
————————————————————————————————————————————————
8、改变收藏夹图标：


<link REL = "Shortcut Icon" href="favicon.ico">
————————————————————————————————————————————————
7、改变底纹链接色：
<center>
<div style="width:400" onMouseOver="this.style.filter='glow(color=#eeffff, strength=500)'" onMousedown="this.style.filter='glow(color=black, strength=50)'" onMouseOut='this.style.filter=""'>
<p><span style="FONT-SIZE: 9pt";color:#ffffff><a href="http://ogle.51.net";>可爱作坊</a></span></p>
</div>
</center>
————————————————————————————————————————————————
8、缩放文字（不一定可实现）：
<SCRIPT LANGUAGE="JavaScript">
var speed = 100;
var cycledelay = 2000;
var maxsize = 28;
var x = 0;
var y = 0;
var themessage, size;
var esize = "</font>";
function initArray() {
this.length = initArray.arguments.length;
for (var i = 0; i < this.length; i++) {
this = initArray.arguments;
}
}
var themessage2 = new initArray(
"实用网页特效集锦！",

""
);
if(navigator.appName == "Netscape"
document.write('<layer id="wds"></layer><br>');
if (navigator.appVersion.indexOf("MSIE" != -1)
document.write('<span id="wds"></span><br>');
function upwords(){
themessage = themessage2[y];
if (x < maxsize) {
x++;
setTimeout("upwords()",speed);
}
else setTimeout("downwords()",cycledelay);

if(navigator.appName == "Netscape" {
size = "<font point-size='"+x+"pt'>";
document.wds.document.write(size+"<center>"+themessage+"</center>"+esize);
document.wds.document.close();
}
if (navigator.appVersion.indexOf("MSIE" != -1){
wds.innerHTML = "<center>"+themessage+"</center>";
wds.style.fontSize=x+'px'
}
}
function downwords(){
if (x > 1) {
x--;
setTimeout("downwords()",speed);
}
else {
setTimeout("upwords()",cycledelay);
y++;
if (y > themessage2.length - 1) y = 0;
}
if(navigator.appName == "Netscape" {
size = "<font point-size='"+x+"pt'>";
document.wds.document.write(size+"<center>"+themessage+"</center>"+esize);
document.wds.document.close();
}
if (navigator.appVersion.indexOf("MSIE" != -1){
wds.innerHTML = "<center>"+themessage+"</center>";
wds.style.fontSize=x+'px'
}
}
setTimeout("upwords()",speed);
</script>
————————————————————————————————————————————————
9、彩虹文字：
<script language="JavaScript">
function MakeArray(n){
this.length=n;
for(var i=1; i<=n; i++) this=i-1;
return this
}

hex=new MakeArray(16);
hex[11]="A"; hex[12]="B"; hex[13]="C"; hex[14]="D"; hex[15]="E"; hex[16]="F";

function ToHex(x){
var high=x/16;
var s=high+"";
s=s.substring(0,2);
high=parseInt(s,10);
var left=hex[high+1];
var low=x-high*16;
s=low+"";
s=s.substring(0,2);
low=parseInt(s,10);
var right=hex[low+1];
var string=left+""+right;
return string;
}

function rainbow(text){
text=text.substring(3,text.length-4);
color_d1=100;
mul=color_d1/text.length;
for(i=0;i < text.length;i++){
color_d1=255*Math.sin(i/(text.length/3)); "255*Math.sin(i/(text.length/3))"
color_h1=ToHex(color_d1);
color_d2=mul*i;
color_h2=ToHex(color_d2);
document.write("<FONT COLOR='#FF"+color_h1+color_h2+"'>"+text.substring(i,i+1)+'</FONT>');
}
}
// -->
</script>
<script>
实用网页特效集锦！
</script>
————————————————————————————————————————————————
10、阴影隐现文字：
<body onLoad="glowtext()">
<script language=javaScript>; ;
</script>
<div id="glowdiv" style="position:absolute;visibility:visible;width:588px;text-align:center;
top:200px;left:88px;font-family:宋体;font-size:12pt;color:#FFFFFF"></div>