网风空间: May, 2006

网风's profile网风空间PhotosBlogLists

Tools

Help

<< First < Previous Next > Last >>

May 30

js模仿flash幻图片效果

自从ie对flash的显示方式进行改变后，flash这个东西一下子变成了一个鸡肋。
许许多多的网站都撤掉了以前的flash动画，改用一段js程序来实现动画功能.

csdn首页也是如此。。我无聊，自己写了一个，特点如下：

1.对搜索引擎友好
2.对美工友好，因为数据和代码是分开的，完全不懂js的都可以用fontpage修改动画内容

可以把js代码保存为一个文件然后<script src="1.js"></script>,然后无须修改代码一个字母
就可以在多个页面中实现动画了

代码如下:

<div id="g_div" style="width:270px;height:252px"><a
href="#" target=_blank><img
id="g_img" style="FILTER:revealTrans(duration=1,transition=23);width:266px;height:220px;border:1px green solid" src="http://zi.csdn.net/xian.gif">
</a><a
href="http://www.baidu.com/" for="http://zi.csdn.net/xian.gif" target="_blank">1.CSDN程序员</a><a
href="http://www.126.com/" for="http://zi.csdn.net/microsoft280_187.jpg" target="_blank">2.CSDN程序员</a><a
href="http://mp3.baidu.com/" for="http://zi.csdn.net/live.gif" target="_blank">3.CSDN程序员</a><a
href="http://post.baidu.com/" for="http://zi.csdn.net/new-mba.gif" target="_blank">4.CSDN程序员</a><a
href="http://top.baidu.com/" for="http://zi.csdn.net/book.jpg" target="_blank">5.CSDN程序员</a>
</div>

for(var i=1;i<arr_length;i++){
g_items.push({txt:arr[i].innerHTML,
url:arr[i].href,
target:arr[i].target,
img:(function(){var o=new Image;o.src=arr[i].getAttribute("for");return o})()})
arr[i].title=arr[i].innerHTML
arr[i].innerHTML=[i," "].join("")
arr[i].className="b"
arr[i].onclick=function(){
event.returnValue=false;
show_img(event.srcElement.innerText)
}
}
show_img(1)
var t=window.setInterval(show_img,g_sec*1000)
g_img.onmouseover=function(){window.clearInterval(t)}
g_img.onmouseout=function(){t=window.setInterval(show_img,g_sec*1000)}
}

window.attachEvent("onload",f)
</script>

大家别见笑，完全是体力活，没什么技术含量，可能有谁能用得着，拿去用吧。

ps:只通过ie测试，我没有ff浏览器，不过肯定是不兼容ff的，要跨浏览器运行的自己可以修改修改
或者哪位高手有空闲，可以一起来完善兼容ff的部分.

8:51 AM | Add a comment | Permalink | Blog it | web技术

May 24

Beginner's guide to Meta Tags

What are meta tags?

Meta tags are tags that reside in between the <head> and </head> tags of your html. There are two different types of meta tags. One uses the NAME attribute, and the other uses the HTTP-EQUIV.

NAME: The name tags that do not correspond to HTTP headers.
HTTP-EQUIV: These are tags that do correspond to http headers.

Why use meta tags?

The http-equiv tags do not need to be used. In fact, neither do the name tags, except, without name tags, your website cannot be indexed by many search engines. Most search engines use a bot to crawl through the pages of your website, these bots look for certain name tags, that give information such as keywords and a description of the page. That data is then stored in the search engines database. An example of a typical meta name meta tag is:-

<meta name="keywords" content="key,word,about,my,site">
<meta name="description" content="my page is about bla">

At minimum you should put these tags in your pages.

The NAME tags

I have listed a load of name tags that can be used, but only the ones marked with an * actually need to be used.

Description*

This is a short description of what is on the page. Important when the pages is a frameset.

<meta name="description" content="This site is full of code for programmers.">

Keywords*

These are important words that have something to do with the page. Words like the and other insignificant words would be ignored by the spider.

<meta name="keywords" content="c++, code, programming">

Author

This is the name of the author of the page.

<meta name="author" content="chris maunder">

Generator

Usually the name and version number of the tool used to make the page. With most programs, this is added to pages automatically. Possibly used by the application vendors, to discover market penetration.

Copyright

This is who the copyright for the page belongs to.

<meta name="copyright" content="chris maunder">

Robots

Controls how a spider indexes that page.

NOINDEX - tells the spider not to index anything on the page.
NOFOLLOW - tells the spider not to follow links on the page, and index those as well.
NOIMAGEINDEX - tells the spider not to index images on the page.
NOIMAGECLICK - tells the spider not to link directly to the image, but to the page it is on instead.
[Google Only (I think)] NOARCHIVE - tells the spider not to cache the page.

<meta name="robots" content="NOINDEX">

The HTTP-EQUIV tags

Expires

This is used when the content on the page would expire. If a spider detects this, it would either delete the page from the search engine database, or re-index the page on the expiry date.

<META HTTP-EQUIV="expires" CONTENT="Thu, 27 Jun 2002 10:56:57 GMT">

Cache-Control

Tells the browser how to handle its caching of that page.

PUBLIC - may be cached in publicly shared caches.
PRIVATE - cached only in a private cache.
NO-CACHE - do not cache the page.
NO-STORE - may be cached but not archived.

<META HTTP-EQUIV="cache-control" CONTENT="no-cache">

Content-Type

This causes the browser to load the correct character set before loading the page.

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">

Content-Style-Type

This is how styles are defined in the page.

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

Content-Language

This of course, is the language the page is in.

<META HTTP-EQUIV="Content-Language" CONTENT="EN-GB">

Refresh

This tag causes the page to refresh and load the specified page after a specified amount of time. The delay is in seconds.

<META HTTP-EQUIV="Refresh" CONTENT="10; http://www.codeproject.com">

Set-Cookie

This allows the page to set a cookie to expire on a certain date.

<META HTTP-EQUIV="Set-Cookie" CONTENT="cookievalue=cp; expires=Thu, 27 Jun 2002 10:56:57 GMT; path=/">

9:36 AM | Add a comment | Permalink | Blog it | web技术

<meta http-equiv>用法简介

1.定义语言

　　格式：
　　〈meta http－equiv=″Content－Type″ content=″text/html; charset=gb2312″〉
　　这是META最常见的用法,在制作网页时,在纯HTML代码下都会看到它,它起的作用是定义你网页的语言,当访客浏览你的网页时,浏览器会自动识别并设置网页

中的语言,如果你网页设置的是GB码,而访客没有安装GB码,这时网页只会呈现访客人所设置的浏览器默认语言。同样的,如果该网页是英语,那么charset=en。

　　2.描述网页
　　格式:
　　〈meta name=″Keywords″ CONTENT=″china,enterprise,business,net″〉
　　META也常用来描述网页,以供某些搜索站台机器人的使用。大家知道,搜索站台分为两大类,一类为完全人工登录,比如Yahoo；另一类为机器人搜索,以机器人

搜索的搜索站台会包含更多的内容。机器人会搜索网页META标签中所设置的描述关键字,把它们加入到搜索数据库中,用来索引你的网页。而这个标签很少有人注

意到。在格式中,Content列出了你所设置的关键字,这其中的内容可以自行设置,其间用逗号相隔。这里有个技巧,你可以重复某一个单词,这样可以提高自己网站的

排行位置,如：
　　〈meta name=″Keywords″ CONTENT=″china,china,china,china〉

　　3.自动刷新页面

　　格式:

　　〈meta HTTP－EQUIV=″refresh″ CONTENT=″8; URL=http://c98.yeah.net″〉

　　大家在浏览某一个网页时,会发现有些页在数秒后自动转到另外一页,这就是META的刷新作用,在CONTENT中,8代表设置的秒数,而URL就是过8秒后自动连接

的网页地址。

　　4.网页定级评价

　　格式:

　　〈META http－equiv=″PICS－Label″

　　content=′(PICS－1.1 ″http://www.rsac.org/ratingsv01.html″

　　 l gen true comment ″RSACi North America Server″

　　 for ″http://www.rsac.org″

　　 on ″1996.04.16T08:15－0500″

　　 r (n 0 s 0 v 0 l 0))′〉

　　在Internet Explorer 4.0浏览器Internet选项中有一个内容设置,它可以防止浏览一些受限制的网站,而之所以浏览器会自动识别某些网站是否受限制,就是

因为在网站META标签中已经设置好了该网站的级别,而该级别的评定是由美国RSAC,即娱乐委员会的评级机构评定的,如果你需要评价自己的网站,可以连接到网站

http://www.rsac.org/,按要求提交表格,那么RSAC会提供一段META代码给你,复制到自己网页里就可以了。

　　5.控制页面缓冲

　　格式:

　　〈meta HTTP－EQUIV=″expires″ CONTENT=″TUE,11.NOV 1998 00:00 GMT″〉
　　META可以设置网页到期的时间,也就是说,当你在Internet Explorer 4.0浏览器中设置浏览网页时首先查看本地缓冲里的页面,那么当浏览某一网页,而本地

缓冲又有时,那么浏览器会自动浏览缓冲区里的页面,直到META中设置的时间到期,这时候,浏览器才会去取得新页面。

　　6.META的属性
　　HTTP－EQUIV=″....″ HTTP响应的标题头；
　　name=″.....″ META信息的名称；
　　content=″....″ META信息的具体内容；
　　scheme=″...″ META信息的图解。
---------------------------------------------------------------------------------------
<META content="C#视频教材,xyBBS系统" name="description">
<Meta name="Author" Content="清风，fastait@gmail.com">
<Meta name="Copyright" Content="本站版权归小雨第二课堂所有。All Rights Reserved">
---------------------------------------------------------------------------------------
1、<meta http-equiv= "Content-Type"contect="text/html";charset=gb_2312-80">和 <meta http-equiv="Content-Language"

contect="zh-CN">用以说明主页制作所使用的文字以及语言；又如英文是ISO-8859-1字符集，还有BIG5、utf-8、shift-Jis、Euc、Koi8-2等字符集；

2、<meta http-equiv="Refresh" content="n; url= http://yourlink";;>
定时让网页在指定的时间n秒内，跳转到页面http://yourlink；

3、<meta http-equiv="Expires" contect="Mon,12 May 2001 00:20:00 GMT">可以用于设定网页的到期时间，一旦过期则必须到服务器上重新调用。需

要注意的是必须使用GMT时间格式；

4、<meta http-equiv="Pragma" contect="no-cache">是用于设定禁止浏览器从本地机的缓存中调阅页面内容，设定后一旦离开网页就无法从Cache中再调

出；

5、<meta http-equiv="set-cookie" contect="Mon,12 May 2004 00:20:00 GMT">cookie设定，如果网页过期，存盘的cookie将被删除。需要注意的也

是必须使用GMT时间格式；

6、<meta http-equiv="Pics-label" contect="">网页等级评定，在IE的internet选项中有一项内容设置，可以防止浏览一些受限制的网站，而网站的限制级别

就是通过meta属性来设置的；

7、<meta http-equiv="windows-Target" contect="_top">强制页面在当前窗口中以独立页面显示，可以防止自己的网页被别人当作一个frame页调用；

9:31 AM | Add a comment | Permalink | Blog it | web技术

页面渐变背景色特效

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<SCRIPT Language="JavaScript">

function BgColor()
{
var x = 0, step = 1
while( x <= 0xffffff)
{
  document.bgColor = x;
  x += step;
  step <<= 8;
  if( step >= 0x1000000) step = 1;
}
}
</Script>
</head>

9:10 AM | Add a comment | Permalink | Blog it | web技术

页面过渡特效

过渡的特效为：（header.htm）
<meta http-equiv="Page-Enter" content="blendTrans(Duration=0.5)">
<meta http-equiv="Page-Exit" content="blendTrans(Duration=0.5)">

9:03 AM | Add a comment | Permalink | Blog it | web技术