页面特效

最新推荐文章于 2022-02-16 18:16:02 发布

xiaoyi1214

最新推荐文章于 2022-02-16 18:16:02 发布

阅读量1k

点赞数

分类专栏： HTML 文章标签： javascript 搜索引擎 null 脚本 timer html

HTML 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

1.网页自动跳转
<META HTTP-EQUIV="Refresh" CONTENT="5;URL=http://www.yahoo.com">

说明：Refresh是刷新网页,Content="5"是５秒后跳转执行，Url是要跳转的目标地址（网址／路径)．

2.鼠标触发背景图象
οnmοuseοver="background='images/about_3_1.jpg'" οnmοuseοut="background='images/about_3.jpg'"

说明：把上面的代码加在相应的表格，行，单元格等相应的标记里头即可触发背景图象的更改．

3.鼠标触发对象背景
οnmοuseοver="this.style.background='#505050'" οnmοuseοut="this.style.background='#ff3300'"

说明：把上面的代码加在相应的表格，行，单元格等相应的标记里头即可触发．

4.关闭弹出窗口
"javascript:;window.close()"

说明：把以上脚本加在“关闭窗口”标记里面即可实现．

5.日期星期+走动的时间
<script language=JavaScript>
today=new Date();
function initArray(){
this.length=initArray.arguments.length
for(var i=0;i<this.length;i++)
this[i+1]=initArray.arguments[i] }
document.write("<font color=black>",today.getYear(),"<font color=black>年","<font color=black>",today.getMonth()+1,"<font color=black>月","<font color=black>",today.getDate(),"<font color=black>日 </FONT>");
var d=new initArray("<font color=RED>星期日","<font color=black>星期一","<font color=black>星期二","<font color=black>星期三","<font color=black>星期四","<font color=black>星期五","<font color=red>星期六");
</script>
</p></td>
</tr>
<tr>
<td width="100" height=25 valign=bottom> <p align=center>
<script
language=javascript>document.write(d[today.getDay()+1]);</script>
</p></td>
</tr>
<tr>
<td width="100" height=27> <p align=center> <span id="liveclock" style"=width: 109px; height: 15px"></span>
<script language=javascript>
function www_helpor_net()
{
var Digital=new Date()
var hours=Digital.getHours()
var minutes=Digital.getMinutes()
var seconds=Digital.getSeconds()
if(minutes<=9)
minutes="0"+minutes
if(seconds<=9)
seconds="0"+seconds
myclock=hours+":"+minutes+":"+seconds
if(document.layers){document.layers.liveclock.document.write(myclock)
document.layers.liveclock.document.close()
}else if(document.all)
liveclock.innerHTML=myclock
setTimeout("www_helpor_net()",1000)
}
www_helpor_net();
//-->
</script>

6.网页中的背景音乐
<bgsound src="音乐.mid" loop=-1 value="音量">

说明：其中loop="循环次数" value="0-100" 的数值为音量大小，等于-1为无限循环音乐文件．

7.网页中任意位置调用框架
<iframe border=0 frameborder=0 framespacing=0 height=251 marginheight=0 marginwidth=0 name=new_date noResize scrolling=yes src="on.htm" width=100% vspale="0"></iframe>

8.网页全屏显示
<SCRIPT LANGUAGE="JavaScript">

</script>

9.文本文字阴影
<style type="text/css">

</style>

说明：可根据需要改动color的颜色．

10.禁止另存网页
<noscript>
<iframe src="*.htm"></iframe>
</noscript>

11.不显示网页上的滚动条
scroll="no" 或者 scrolling="no"

说明：把以上脚本加在<body>标记里面即可实现．

12.禁止选择网页文本
onselectstart="return false;"

说明：把以上脚本加在<body>标记里面即可实现．

13.禁止网页右键
οncοntextmenu="return false;"

说明：把以上脚本加在<body>标记里面即可实现．

14.弹出窗口在中间
<script>
window.open(" http://www.cctv.com","","width=400,height=240,
top="+(screen.availHeight-240)/2+",left="+(screen.availWidth-400)/2);
</script>

15.为首页添加收藏
<a HREF="#" ONCLICK="this.style.behavior=
'url(#default#homepage)';this.setHomePage
(' http://www.diaozhen.org');">设为首页</a>

<ahref="javascript:window.external.AddFavorite
(' http://www.diaozhen.org', '::::::易步数码:::::::')">添加收藏</a>

说明：把以上黄色部分改为相应的即可实现．

16.淡入淡出鼠标提示
<script language="JavaScript" type="text/JavaScript">

</script>

说明：把以上脚本加在<head></head>之间，然后在有链接的文字上调用里面的函数，例子：
<a href="#" alt="这里就是鼠标提示，谢谢。" οnmοuseοver="showPopupText()">鼠标提示</a>

17.META标签的应用
网页设计思考系列已经写到第十篇了。继首页的版面布局，色彩搭配，字体设置和表格嵌套讨论之后，今天我们继续探讨首页设计的第五个方面---meat标签的奥妙。
META标签，是HTML语言head区的一个辅助性标签。在几乎所有的page里，我们都可以看到类似下面这段html代码：

-----------------------------------------------
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
-----------------------------------------------

这就是meta标签的典型运用。meta标签有多少参数，有什么作用，为什么我们要特别重视它呢？让我们一起来发掘meta标签的奥妙!

根据HTML语言标准注释：meta标签是对网站发展非常重要的标签，它可以用于鉴别作者，设定页面格式，标注内容提要和关键字，以及刷新页面等等。

meta标签分两大部分：HTTP-EQUIV和NAME变量。

●HTTP-EQUIV类似于HTTP的头部协议，它回应给浏览器一些有用的信息，以帮助正确和精确地显示网页内容。常用的HTTP-EQUIV类型有：

1.expires(期限)
说明：可以用于设定网页的到期时间。一旦网页过期，必须到服务器上重新调阅。
用法：<META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">
注意：必须使用GMT的时间格式。

2.Pragma(cach模式)
说明：禁止浏览器从本地机的缓存中调阅页面内容。
用法：<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
注意：这样设定，访问者将无法脱机浏览。

3.Refresh(刷新)
说明：需要定时让网页自动链接到其它网页的话，就用这句了。
用法：<META HTTP-EQUIV="Refresh" CONTENT="5;URL=http://www.yahoo.com">
注意：其中的5是指停留5秒钟后自动刷新到URL网址。

4.Set-Cookie(cookie设定)
说明：如果网页过期，那么存盘的cookie将被删除。
用法：<META HTTP-EQUIV="Set-Cookie" CONTENT="cookievalue=xxx;
expires=Wednesday, 21-Oct-98 16:14:21 GMT; path=/">
注意：必须使用GMT的时间格式。

5.Window-target(显示窗口的设定)
说明：强制页面在当前窗口以独立页面显示。
用法：<META HTTP-EQUIV="Window-target" CONTENT="_top">
注意：用来防止别人在框架里调用你的页面。

5.Content-Type(显示字符集的设定)
说明：设定页面使用的字符集。(我们在前面字体设计中已经介绍过它的作用)
用法：<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

●meat标签的NAME变量语法格式是：
<META NAME="xxx" CONTENT="xxxxxxxxxxxxxxxxxx">
其中xxx主要有下面几种参数：

1.Keywords(关键字)
说明：keywords用来告诉搜索引擎你网页的关键字是什么。
举例：<META NAME ="keywords" CONTENT="life, universe, mankind, plants,
relationships, the meaning of life, science">

2.description(简介)
说明：description用来告诉搜索引擎你的网站主要内容。
举例：<META NAME="description" CONTENT="This page is about the meaning of
life, the universe, mankind and plants.">

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

4.author(作者)
说明：标注网页的作者
举例：<META name="AUTHOR" content="ajie,ajie@netease.com">

以上是meta标签的一些基本用法，其中最重要的就是:Keywords和description的设定。

为什么呢？道理很简单，这两个语句可以让搜索引擎能准确的发现你，吸引更多的人访问你的站点!

根据现在流行搜索引擎(Lycos，AltaVista等)的工作原理,搜索引擎首先派出机器人自动在www上搜索，当发现新的网站时，便检索页面中的keywords和decription，并将其加入到自己的数据库，然后再根据关键词的密度将网站排序。

也就是说：
1. 如果你的页面中根本没有Keywords和description的meta标签，那么机器人是无法将你的站点加入数据库，网友也就不可能搜索到你的站点。

2. 如果你的关键字选的不好，关键字的密度不高，被排列在几十甚至几百万个站点的后面被点击的可能性也是非常小的。

所以,我们必须记住添加keywords和description的meta标签，并尽可能写好关键字和简介。写keywords的禁忌是：
1.不要用常见词汇。例如www,homepage,net,web等。
2.不要用形容词，副词。例如最好的，最大的等。
3.不要用笼统的词汇，要尽量精确。例如不用"摩托罗拉手机",改用"V998"等

寻找合适的关键词的一个技巧是：到lycos,Alta,infoseek等搜索引擎，搜索与你内容相仿的网站，查看排名前十位的网站的meta关键字，copy下来用到自己的站点上。

这里，我们举一段微软多媒体网站的关键字供你参考：
<meta name="keywords" content="joke, music, MP3, media, audio,
joke of the day, downloads, free music, horoscope, radio, video,
music downloads, movies, radio station, media player, free,
download, weather, horoscopes, windows media technologies,
online, radio station guide, free download">

小资源:人们最常用的一些搜索词(即关键词)可以到
http://www.baidu.com/
http://www.google.com/
两个网址一看，那里有每个月网上最流行搜索词的排行榜.

另外为了提高搜索点击率，这里还有一些"邪门歪道"：
1.为了增加关键词的密度，将关键字隐藏在页面里(将文字颜色定义成与背景颜色一样)。
2.在图象的alt注释语句中加入关键字。
如：<IMG SRC="xxx.gif" Alt="keywords">
3.利用HTML的注释语句，在页面代码里加入大量关键字。
用法： 

说明：以上相关内容均应用在<head></head>之间．

18.带滚动条的表格
<div style="overflow:auto;height:150;">
请在这里输入内容请在这里输入内容请在这里输入内容请在这里输入内容请在这里输入内容请在这里输入内容请在这里输入内容请在这里输入内容请在这里输入内容请在这里输入内容请在这里输入内容请在这里输入内容请在这里输入内容请在这里输入内容请在这里输入内容请在这里输入内容请在这里输入内容请在这里输入内容请在这里输入内容请在这里输入内容请在这里输入内容请在这里输入内容请在这里输入内容请在这里输入内容请在这里输入内容请在这里输入内容请在这里输入内容请在这里输入内容请在这里输入内容请在这里输入
</div>

说明：加在网页代码的相应位置中即可实现，通常加在<td></td>里面应用的较多．

19.网页跳转菜单
<form target=_blank>
<td class="w7">
<div align="center">
<select onChange=SelectYqlj(this.form) name=yqlj>
<option value="">*****友情链接*****</option>
<option value=" http://www.sina.com.cn">菜单项目</option>
<option value=" http://www.sina.com.cn/">菜单项目</option>
<option value=" http://www.sina.com.cn/">更菜单项目</option>
</select>
<script type="text/javascript">
function SelectYqlj(f)
{
if (f.yqlj.value != "")
{
f.action = f.yqlj.options[f.yqlj.selectedIndex].value;
f.submit()
}

}
</script>
</div>
</td></form>

20.定时关闭弹出窗口

<body onLoad="setTimeout(window.close, 3000)">
3秒种后关闭此窗口

说明：加在网页代码的<body>里面即可实现．

21.双击自动滚屏
<SCRIPT language=JavaScript>
var currentpos,timer;

function initialize()
{
timer=setInterval("scrollwindow()",10);
}
function sc(){
clearInterval(timer);
}
function scrollwindow()
{
currentpos=document.body.scrollTop;
window.scroll(0,++currentpos);
if (currentpos != document.body.scrollTop)
sc();
}
document.οnmοusedοwn=sc
document.οndblclick=initialize
</script>

说明：加在网页代码的<body></body>里面即可实现．效果是双击自动滚屏，单击停止.

xiaoyi1214

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
页面特效

1.网页自动跳转说明：Refresh是刷新网页,Content="5"是５秒后跳转执行，Url是要跳转的目标地址（网址／路径)． 2.鼠标触发背景图象onmouseover="background=images/about_3_1.jpg" onmouseout="background=images/about_3.jpg" 说明：把上面的代码加在相应的表格，行，单元格等相应的标记里头即
复制链接

扫一扫