HTML特效代码大全

最新推荐文章于 2024-07-15 16:36:52 发布

xiaoyecanfeng

最新推荐文章于 2024-07-15 16:36:52 发布

阅读量2.5k

点赞数

分类专栏：残风文章标签： html javascript image iframe border microsoft

残风专栏收录该内容

158 篇文章 0 订阅

订阅专栏

进入主页以后自动播放声音
<embed src="http://你的网站/music.rm" hidden=true autostart=true loop=true>

进入主页后自动最大话,省的去在自己单击了
<script>
self.moveTo(0,0)
self.resizeTo(screen.availWidth,screen.availHeight)
</script>

显示现在时间的脚本
<script language=vbscript>document.write now</script>

显示最后修改时间的脚本
<script>document.write(document.lastModified)</script>

设为首页,加为收藏，加入频道,启动outlook发信
<a style="cursor:hand"　
οnclick="this.style.behavior="url(#default#homepage)";
this.setHomePage("yourURL">设为首页</a>

<a style="cursor:hand"
οnclick="window.external.AddFavorite(location.href,document.title);">加入收藏</a>

<a href=javascript:window.external.addChannel("typhoon.cdf")>加入频道</a>

<a href="youEmail">与我联系</a>

Flash中在按钮上如何加“设为首页”“加入收藏”？action怎么写啊？
on (release) {
getURL("javascript:void(document.links[0].style.behavior='url(#default#homepage)');void document.links[0].setHomePage('84design.com/" 黑吧="_blank">url);", "_self");
}

加入收藏：
on(release) {
getURL("javascript:window.external.AddFavorite('84design.com/" 黑吧="_blank">url','E佳工作室')");
}

状态栏动态显示现在时间
<script>
function see(){
window.setTimeout("see()",1000);
today = new Date();
self.status = today.toString();
}
</script>
<body οnlοad=see()>

关闭窗口的脚本
<a href=javascript:close()>[关闭窗口]</a>

窗口定时关闭
先将如下代码网页文件的<head></head>区：
　<script language="JavaScript">
　function closeit() { setTimeout("self.close()",10000) //毫秒 }
　</script>
然后再在<body></body>标内加入如：<body οnlοad="closeit()">

网页自动关闭
　<html>
　<head>
　<object id=closes type="application/x-oleobject"
　classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11">
　<param name="Command" value="Close">
　</object>
　</head>
　<body οnlοad="window.setTimeout('closes.Click()',10000)">
　这个窗口会在10秒过后自动关闭,而且不会出现提示.
　</body>
　</html>

按下F12键,直接返回首页
<script>function look(){
if(event.keyCode==123){document.location.href=http://www.wowo-design.com/}
}
if(document.οnkeydοwn==null)
{document.οnkeydοwn=look}
</script>

后退,刷新,前进
<input type=button value=后退 οnclick=history.go(-1)>
<input type=button value=刷新 οnclick=history.go(-0)>
<input type=button value=前进 οnclick=history.go(+1)>

设定时间弹出窗口,4000=4秒,当然你可以自定义
<script>function l() {
window.open("yourURL","name","width=500,height=150,border=0")
}
setTimeout("l()",4000)
</script>

随机替换图片 <script>
　document.write('<img src="img/'+parseInt(Math.random()*(5))
　+'.gif"height="40" width="50">')
</script>

图片文件名为0.gif 1.gif 2.gif 3.gif 4.gif

防止表格被撑破的代码
<table width=100 border=1>
<tr><td style="word-break:break-all">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td></tr>

Dreamweaver里画细线标格
<table style="border-collapse: collapse">

有没有可能用层来遮住FLASH？
1.在flash的parameters里加入 <param name="wmode" value="transparent">
2.<body οnblur=self.focus()>

如何让Flash按钮同时打开两个网页
最简单的办法，最一个按扭，把
on(press){
getURL("http://www.*****.com";,_blank);
getURL("http://www.*****.com";,_blank);
}
加在按扭上

怎样点不同的链接在同一个Iframe里显示？
<table width="510" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="218" align="center" bgcolor="#eeeeee"><a href="http://www.******.com"; 黑吧="manager">blueidea</a>
</td>
<td width="292" align="center" bgcolor="#eeeeee"><a href="http://www.******.com/bbs"; 黑吧="manager">bbs</a></td>
</tr>
<tr>
<td height="200" colspan="2"><iframe border=0 frameborder=0 framespacing=0 height=200 marginheight=0 marginwidth=0 name=manager scrolling="NO" noresize src="http://www.******.com"; width=500 vspale="0"></iframe></td>
</tr>
</table>

节日倒计时
<Script Language="JavaScript">
　　 var timedate= new Date("October 1,2002");
　　 var times="国庆节";
　　 var now = new Date();
　　 var date = timedate.getTime() - now.getTime();
　　 var time = Math.floor(date / (1000 * 60 * 60 * 24));
　　 if (time >= 0)
　　 document.write("现在离"+times+"还有: "+time +"天")
</Script>

随机变换背景图象（一个可以刷新心情的特效）
在<head></head>之间加上如下代码：
<Script Language="JavaScript">
　　 image = new Array(4); //定义image为图片数量的数组
　　 image [0] = 'tu0.gif' //背景图象的路径
　　 image [1] = 'tu1.gif'
　　 image [2] = 'tu2.gif'
　　 image [3] = 'tu3.gif'
　　 image [4] = 'tu4.gif'
　　 number = Math.floor(Math.random() * image.length);
　　 document.write("<BODY BACKGROUND="+image[number]+">");
</Script>

select挡住div的解决方法
在div里加入下面的代码，根据需要调整就可以了。
<iframe src="javascript:false" scrolling="no" frameborder="0" style="z-index:-1;position:absolute; top:5px; left:2px;width:168;height:100px;">
</iframe>

服务器上如何定义连接
MM_www_STRING ="driver={Microsoft access Driver (*.mdb)};dbq=" & server.mappath("../data/www.mdb")

链接到
response.redirect"login.asp"
location.href="xx.asp"

取得IP
userip = Request.ServerVariables("HTTP_X_FORWARDED_FOR")
If userip = "" Then userip = Request.ServerVariables("REMOTE_ADDR")

sql="update feedbak set hit=hit+1 where id="&request("id")
conn.execute(sql)

截取字符是否加...
function formatStr(str,len)
if(len(str)>len)
str = left(str,len) + "..."
end if
formatStr = str
end function

接收表单
If Ucase(Request.ServerVariables("REQUEST_METHOD")) = "POST" then
end if

图片宽度
<script language="javascript">

</script>
I'll be Back 22:18:06
<img src="<%=formPath%>/<%=rs("photoname")%>" border="0" >

跳转
<meta http-equiv=refresh content='0; url=/distributor/distributor.aspx'>

溢出栏的设制
visible：超出的部分照样显示；
hidden：超出的部分隐藏；
scrool：不管有否超出，都显示滚动条；
auto：有超出时才出现滚动条；

onMouseOver：鼠标移到目标上；
onMouseUp：按下鼠标再放开左键时；
onMouseOut：鼠标移开时；
onMouseDown：按下鼠标时（不需要放开左键）；
onClink：点击时；
onDblClick：双击时；
onLoad：载入网页时；
onUnload：离开页面时；
onResize：当浏览者改变浏览窗口的大小时；
onScroll：当浏览者拖动滚动条的时。

CSS样式
a:link：表示已经链接；
a:hover：表示鼠标移上链接时；
a:active：表示链接激活时；
a:visited：表示己点击过的链接。

跳出对话框链接
javascript:alert('lajflsjpjwg')

后退：javascript:history.back(1)

关闭窗口：javascript:window.close();

窗口还原
function restore(){
window.moveTo(8,8);
window.resizeTo(screen.width-24,screen.availHeight-24);
}

head区是指首页HTML代码的<head>和</head>之间的内容。
必须加入的标签
1.公司版权注释



2.网页显示字符集

简体中文：<META HTTP-EQUIV="Content-Type" C>
繁体中文：<META HTTP-EQUIV="Content-Type" C>
英语：<META HTTP-EQUIV="Content-Type" C>

3.网页制作者信息

<META name="author" c>

4.网站简介

<META NAME="DESCRIPTION" C>

5.搜索关键字

<META NAME="keywords" C>

6.网页的css规范

<LINK href="style/style.css" rel="stylesheet" type="text/css">
(参见目录及命名规范)

7.网页标题

<title>xxxxxxxxxxxxxxxxxx</title>

可以选择加入的标签
1.设定网页的到期时间。一旦网页过期，必须到服务器上重新调阅。
<META HTTP-EQUIV="expires" C>

2.禁止浏览器从本地机的缓存中调阅页面内容。
<META HTTP-EQUIV="Pragma" C>

3.用来防止别人在框架里调用你的页面。
<META HTTP-EQUIV="Window-黑吧" C>

4.自动跳转。
<META HTTP-EQUIV="Refresh" C>
5指时间停留5秒。

5.网页搜索机器人向导.用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。
<META NAME="robots" C>
CONTENT的参数有all,none,index,noindex,follow,nofollow。默认是all。

6.收藏夹图标
<link rel = "Shortcut Icon" href="favicon.ico">

所有的javascript的调用尽量采取外部调用.
<SCRIPT LANGUAGE="javascript" SRC="script/xxxxx.js"></SCRIPT>

附<body>标签：

<body>标签不属于head区，这里强调一下，为了保证浏览器的兼容性，必须设置页面背景<body bgcolor="#FFFFFF">

flash透明

在flash的源代码中加上：<param name="wmode" value="transparent"> 表格透明
style="FILTER: alpha(opacity=72)"

网址前添加icon的方法
1、上 http://www.******.com上用他的icon editor online制作一个图标。他会将做好的图标通过email即时发送给你。

2、把这个命名为favicon.ico的图标放置在index.html同一个文件夹中。就可以了。

作一个图标文件，大小为16*16像素。文件扩展名为ico，然后上传到相应目录中。在HTML源文件“＜head＞＜/head＞”之间添加如下代码：

＜Link Rel="SHORTCUT ICON" href="http://图片的地址（注意与刚才的目录对应）"＞

其中的“SHORTCUT ICON”即为该图标的名称。当然如果用户使用IE5或以上版本浏览时，就更简单了，只需将图片上传到网站根目录下，自动识别

可以在收藏夹中显示出你的图标
<link rel="Bookmark" href="favicon.ico">

状态栏连接说明
<A HREF="链接到某处" >某某链接</a>
链接说明
<a href=“”Title=链接说明>

禁止鼠标右键
在<body>标签中加入 <body >

禁止复制，鼠标拖动选取
<body οndragstart=window.event.returnValue=false οncοntextmenu=window.event.returnValue=false onselectstart=event.returnValue=false>

水平线
<hr width="长度" size="高度" color="颜色代码" noshade> noshade为有无阴影

表单电子邮件提交
< form name="content" method="post" action="mailto:电子邮箱" >< /form>
文本域名为Subject 为邮件的标题
邮件链接定制
Mailto:地址 ? Subject=邮件的标题 &bc=抄送 &bcc=密件抄送

背景音乐
<bgsound src=地址 loop="-1">

消除ie6自动出现的图像工具栏，设置 GALLERYIMG属性为false或no .
<IMG SRC="mypicture.jpg" HEIGHT="100px" WIDTH="100px" GALLERYIMG="no">

防止点击空链接时，页面往往重置到页首端
代码“javascript:void(null)”代替原来的“#”标记

如何避免别人把你的网页放在框架中
<script language=“javascript”>< /script>

页面定时刷新
<meta http-equiv="Refresh" c >

页面定时转向新的地址
<meta http-equiv="refresh" c>

显示日期
<script language="javascript">
</script>

文字滚动
插入边框为0的1行1列的表格，在表格中输入文字，选中文字，
按ctrl+t输入marquee direction="up", 回车即可让文字在表格区域内向上滚动。
（right、down可用于让文字或图象向右及向下滚动，修改html原代码还可以得到需要的滚动速度。

表单验正
<SCRIPT language=javascript>
function checkform(theform){
if(theform.name.value==""){
alert("姓名不能为空!");
theform.name.focus();
return false;
}
if(theform.tel.value==""){
alert("电话不能为空!");
theform.tel.focus();
return false;
}
}
</SCRIPT>

定义鼠标
body{cursor: url(cur.ani或cur);}

以图片方式插视频
<IMG height=240 loop=infinite dynsrc=http://amedia.efu.com.cn/EFUADD0001.rmvb width=320>

层在flash上面
< param name="wmode" value="opaque" >

延迟跳转
<meta http-equiv=refresh content='3; url=javascript:window.close();'>

空链接
javascript:;

标题表格
<fieldset>
<legend>表格的说明</legend>
</fieldset>

细线表格
style="BORDER-COLLAPSE: collapse;"

滚动条颜色代码
BODY{
SCROLLBAR-FACE-COLOR: #FFFFFF;
SCROLLBAR-HIGHLIGHT-COLOR: #FFFFFF;
SCROLLBAR-SHADOW-COLOR: #FFFFFF;
SCROLLBAR-3DLIGHT-COLOR: #FFCBC8;
SCROLLBAR-ARROW-COLOR: #FFFFFF;
SCROLLBAR-TRACK-COLOR: #FFFFFF;
SCROLLBAR-DARKSHADOW-COLOR: #FFCBC8;
SCROLLBAR-BASE-COLOR: #FFFFFF
}

连续的英文或者一堆感叹号!!!不会自动换行的问题
只要在CSS中定义了如下句子，可保网页不会再被撑开了

table{table-layout: fixed;}
td{word-break: break-all; word-wrap:break-word;}

注释一下：

1.第一条table{table-layout: fixed;}，此样式可以让表格中有!!!(感叹号)之类的字符时自动换行。

2.td{word-break: break-all}，一般用这句这OK了，但在有些特殊情况下还是会撑开，因此需要再加上后面一句{word-wrap:break-word;}就可以解决。此样式可以让表格中的一些连续的英文单词自动换行。

控制横向和纵向滚动条的显隐？
<body style="overflow-y:hidden"> 去掉x轴
<body style="overflow-x:hidden"> 去掉y轴
<body scroll="no">不显

表格变色
<TD οnmοuseοver="this.style.backgroundColor='#FFFFFF'"
οnmοuseοut="this.style.backgroundColor=''"
style="CURSOR: hand">

普通iframe页面
<iframe name="name" src="main.htm" width="450" height="287" scrolling="Auto" frameborder="0"></iframe>

iframe自适应高度
<iframe name="pindex" src="index.asp" frameborder=false scrolling="auto" width="100%" height="100%" frameborder=no οnlοad="document.all['pindex'].style.height=pindex.document.body.scrollHeight" ></iframe>

iframe(嵌入式帧)自适应高度
填写的嵌入地址一定要和本页面在同一个站点上，否则会提示“拒绝访问！”。对跨域引用有权限问题，请查阅其他资料。
<iframe name="guestbook" src="gbook/index.asp" scrolling=no width="100%" height="100%" frameborder=no οnlοad="document.all['guestbook'].style.height=guestbook.document.body.scrollHeight"></iframe>

字号缩放
越来越多的人长时间的泡网，眼镜的普及率也越来越高，让文字大点，让更多的用户看的更清楚。
<script type="text/javascript">
function doZoom(size)
{document.getElementById('zoom').style.fontSize=size+'px';}
</script>
<span id="zoom">需要指定大小的文字</span>
<a href="javascript:doZoom(16)">大</a> <a href="javascript:doZoom(14)">中</a> <a href="javascript:doZoom(12)">小</a>

select挡住div的解决方法
在div里加入下面的代码，根据需要调整就可以了。
<iframe src="javascript:false" scrolling="no" frameborder="0" style="z-index:-1;position:absolute; top:5px; left:2px;width:168;height:100px;">
</iframe>

跳转菜单新窗口
<select name="select" οnchange="window.open(this.options[this.selectedIndex].value)">
<option value="http://www.microsoft.com/ie"> Internet Explorer</option>
<option value="http://www.microsoft.com"> Microsoft Home</option>
<option value="http://msdn.microsoft.com"> Developer Network</option>
</select>

flash透明选项
<param name="wmode" value="transparent">

记录并显示网页的最后修改时间
<script language=JavaScript>
document.write("最后更新时间: " + document.lastModified + "")
</script>

让IFRAME框架内的文档的背景透明
<iframe src="about:<body style='background:transparent'>" allowtransparency></iframe>

打开窗口即最大化
<script language="JavaScript">

</script>

文字或图片弹出指定大小的窗口
在body中加入
<script language="JavaScript" type="text/JavaScript">
function MM_openBrWindow(theURL,winName,features) {window.open(theURL,winName,features);}
</script>
弹出代码
<a href="#" 黑吧="_self" onClick="MM_openBrWindow('windows01.htm','','width=550,height=380')" width="550" height="380" border="0">图片或文字</a>

flash按钮加链接
on (press) {
getURL("http://www.******.com","_blank");
}

细线分隔线
<hr noshade size=0 color=#C0C0C0>

消除ie6自动出现的图像工具栏，设置 GALLERYIMG属性为false或no .
<IMG SRC="mypicture.jpg" HEIGHT="100px" WIDTH="100px" GALLERYIMG="no">

禁止页面正文内容被选取
<body οncοntextmenu="return false" οndragstart="return false" onselectstart ="return false" οnselect="document.selection.empty()" οncοpy="document.selection.empty()" onbeforecopy="return
false"οnmοuseup="document.selection.empty()">

不能点右键，不用CTRL+A，不能复制作!
<body οncοntextmenu="window.event.returnValue=false"
οnkeypress="window.event.returnValue=false"
οnkeydοwn="window.event.returnValue=false"
οnkeyup="window.event.returnValue=false"
οndragstart="window.event.returnValue=false"
onselectstart="event.returnValue=false">
</body>

随机变换背景图象（一个可以刷新心情的特效）
<Script Language="JavaScript">
　　 image = new Array(4); //定义image为图片数量的数组
　　 image [0] = 'tu0.gif' //背景图象的路径
　　 image [1] = 'tu1.gif'
　　 image [2] = 'tu2.gif'
　　 image [3] = 'tu3.gif'
　　 image [4] = 'tu4.gif'
　　 number = Math.floor(Math.random() * image.length);
　　 document.write("<BODY BACKGROUND="+image[number]+">");
</Script>

flash载入影片
on (release)
{
loadMovie("1-01.swf", "_root.loaderclip");
}

图片表单按钮
<form id="form1" name="form1" method="post" action="">
<img src="login.gif" width="62" height="22" οnclick="document.form1.submit()" />
</form>

左右阴影背景的CSS定义方法
body {
text-align:center;
background-repeat: repeat-y;
background-position: center;
background-image: url(../images/bg.jpg);
}

如何关闭层
<div id="Layer1"></div>
<a href="#" onClick="Layer1.style.display='none'">关闭层</a>

运行代码框
<script>
function Preview()
{var TestWin=open('');
TestWin.document.write(code.value);}
</script>
<textarea id=code cols=60 rows=15></textarea>
<br>
<button οnclick=Preview() >运行</button>

给表格做链接
<table width="100%" οnclick="window.open('http://www.******.com/', '_blank')" style="CURSOR:hand">
<tr>
<td height="100" bgcolor="f4f4f4"> </td>
</tr>
</table>

CSS文字阴影
.shadowfont{FILTER: dropshadow(color=#666666, offx=1, offy=1, positive=1); FONT-FAMILY: "宋体"; FONT-SIZE: 9pt;COLOR: #ffffff;}

表格透明
style="FILTER: alpha(opacity=72)"

Alt和Title的区别
alt 用来给图片来提示的。Title用来给链接文字或普通文字提示的。

<a href="#" Title="给链接文字提示">文字</a>
<p Title="给链接文字提示">文字</p>

<img src="图片链接" alt="给图片提示">

在同一页面设置不同文字链接效果的样式
<style type="text/css">
.green {COLOR: #309633}
.green A:link {COLOR: #309633; TEXT-DECORATION: none}
.green A:visited {COLOR: #309633; TEXT-DECORATION: none}
.green A:hover {COLOR: #309633; TEXT-DECORATION: underline}
.green A:active {COLOR: #309633; TEXT-DECORATION: none}
</style>
<a href="#" class="green">文字</a>

xiaoyecanfeng

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
HTML特效代码大全

进入主页以后自动播放声音进入主页后自动最大话,省的去在自己单击了 self.moveTo(0,0) self.resizeTo(screen.availWidth,screen.availHeight) 显示现在时间的脚本 document.write now 显示最后修改时间的脚本 document.write(document.las
复制链接

扫一扫