设计中默认样式的强大威力

默认样式,就是最原生态的样式。就像大家经常用的按钮或者蓝色有下划线的超链接。本文,潜行者 m 将从两个元素来讨论默认样式在设计中的应用。

超链接的默认样式

超链接的默认样式 超链接是网页中最常用最基础的元素,可以说是必不可少的。我们设置超链接,也是希望人们去点击,去使用它。那么我们拿什么让人们知道,这是一个超链接呢?你可以在旁边说,这里有个超链接,快来点击我。但是,当人们看到这几个字的时候,是需要思考的,实际情况下,人们是不想思考的。所以,我们设计的目的,就是让人们一看上去,就觉得这是一个可以点击的超链接。这里几个超链接,我分别为他们加上了样式,请看下图:

请你告诉我,这里面究竟哪一个才是可以点击的超链接?很显然,第一个超链接是默认样式,这种蓝色下划线的样式,已经深入人心,任何一个经常上网的朋友,看到这个就知道它是一个可以点击的超链接。但是有个非常明显的问题,这种蓝色下划线的样式实在是太丑了。而且和我的设计风格不相似。那么,我们就可能会考虑后面三种。

现在,我们的任务就变成了,如何让后面的这三个超链接,变得让人以为这是一个可以点击的超链接。这时,我们需要结合具体的文境来说。请看下面这张图,我已经把上面这三个超链接加入了文章中:

这是比较常见的文章环境,当超链接在文章中时,我们就会发现一些东西。现在请你告诉我,这四个链接的位置以及究竟哪一个链接可以点击?很显然,第一个下划线的可以点击。然后红色、蓝色链接也可以轻易找到,但是黑色的却不见了。因为它的样式和文章的一样。

当我们抛开第一个,请你再告诉我,究竟哪个是可以点击的超链接?很显然,是红色后面的蓝色超链接,因为蓝色是超链接的默认颜色,是标志性的颜色,所以我们会认为蓝色是可以点击超链接。如果排除蓝色链接,你还会点击什么?这时候,你会发现文中突然黑字里面出现了一个红色超链接。这是你的大脑会进行短暂的思考,这个红色超链接是什么,为什么别的都是黑色的,它是红色的?它是不是有特殊的功能,是不是可以点击?要不我把鼠标移动上去,看看吧。

当我们把鼠标移动上去之后,发现鼠标变成了小手状,红色还变了色,而且还加了下划线。OK,这个就是可以点击的超链接了。

至于黑色超链接,潜行者 m 就直接找不到了,碰巧鼠标移动到什么,可能会变成小手。但是一般人是无法注意到了。

通过这个案例,我们可以分析出,超链接应当如何定义:

  1. 尽可能的使用默认的蓝色,甚至加上下划线。如果与风格不符,请使用与其他文字差别较大的色彩来表示,这是一段与众不同的文字,它有特殊的含义。
  2. 当鼠标移动上去的时候,请定义:hover,让其进行变色,并且加上下划线,因为这是一个超链接默认的样式,经过这样处理之后,能够让人深信不疑的认为这是一个超链接。
  3. 如果你无法合理的配色或者你的作品无法使用多种色彩,请尝试让字体变大或者变小或者倾斜,让超链接变得与众不同,这样就会让人产生疑问。
  4. 如果你无法比较合理的完成上面三条,请不要使用默认样式。

按钮的默认样式

按钮也是使用比较广泛的网页元素,通常用于表单提交,或者其他需要点击的地方。通常有以下三种形式的定义

第一种就是默认情况下的,而第二种只是简单的个边框,使其去掉默认样式平面化,第三中则可以代表使用图片背景的自定义按钮。

当你第一眼看到这三个按钮的时候,很显然,第一个是最想按钮,并且可以让人产生点击欲望的按钮。除了第一个之外的后面两个呢?这里需要注意一下,第三个是有一个变色处理的,当鼠标移动到上面,会变成这样:

默认的按钮样式以及满足不了我们网站的风格,所以我们目前的任务,就是让后面两个按钮,变得像可以点击的按钮。我们主要来分析一下,为什么后面两个按钮不像前面那个可以点击的按钮,有什么特点和区别。

1,外观要像一个按钮,其中第三个要比第二个更像按钮,因为它是圆角、椭圆形的,它要比直来直去的方框更容易给人以按钮的感觉。

2,要有 3d 突出感,按钮是一个突出的东西,给人一种 3d 突出的感觉更让人容易相信这是一个可以点击的按钮,例如淘宝购买按钮

可以通过添加阴影或者渐变等,制造这种突出的效果。

3,要有变换特效,及时的和浏览者沟通,告诉他们,这是一个可以点击的按钮。

4,如果你的设计,无法很好的完成上面说的三点,请使用默认样式。

ThinkSAAS 常用数据表结构

本文仅列出开发ThinkSAAS app比较常用的数据表结构,这样,可以方便构造sql语句,对数据库的信息进行操作。

ts_article =>文章列表

+—————+————+——+—–+———————+—————-+
| Field | Type | Null | Key | Default | Extra |
+—————+————+——+—–+———————+—————-+
| articleid | int(11) | NO | PRI | NULL | auto_increment |
| userid | int(11) | NO | | 0 | |
| cateid | int(11) | NO | | 0 | |
| title | char(64) | NO | | | |
| content | text | NO | | NULL ||
| path | char(32) | NO | | | |
| photo | char(32) | NO | | | |
| isaudit | tinyint(1) | NO | | 0 | |
| isrecommend | tinyint(1) | NO | | 0 | |
| count_comment | int(11) | NO | | 0 | |
| addtime | datetime | NO | | 0000-00-00 00:00:00 | |
| isrecommend | tinyint(1) | NO | | 0 ||
| count_comment | int(11) | NO | | 0 ||
|addtime | datetime | NO | | 0000-00-00 00:00:00 |
+—————+————+——+—–+———————+—————-+

ts_article_cate =>文章目录

+———-+———-+——+—–+———+—————-+
| Field | Type | Null | Key | Default | Extra |
+———-+———-+——+—–+———+—————-+
| cateid | int(11) | NO | PRI | NULL | auto_increment |
| catename | char(16) | NO | | | |
| orderid | int(11) | NO | | 0 | |
+———-+———-+——+—–+———+—————-+

ts_article_comment =>文章评论

+———–+———+——+—–+———+—————-+
| Field | Type | Null | Key | Default | Extra |
+———–+———+——+—–+———+—————-+
| commentid | int(11) | NO | PRI | NULL | auto_increment |
| articleid | int(11) | NO | | 0 | |
| userid | int(11) | NO | | 0 | |
| content | text | NO | | NULL | |
| addtime | int(11) | NO | | 0 | |
+———–+———+——+—–+———+—————-+

ts_group =>小组列表

+——————-+————+——+—–+———+—————-+
| Field | Type | Null | Key | Default | Extra |
+——————-+————+——+—–+———+—————-+
| groupid | int(11) | NO | PRI | NULL | auto_increment |
| userid | int(11) | NO | MUL | 0 | |
| cateid | int(11) | NO | MUL | 0 | |
| cateid2 | int(11) | NO | | 0 | |
| cateid3 | int(11) | NO | | 0 | |
| groupname | char(32) | NO | MUL | | |
| groupname_en | char(32) | NO | | | |
| groupdesc | text | NO | | NULL | |
| path | char(32) | NO | | | |
| groupicon | char(32) | NO | | | |
| count_topic | int(11) | NO | | 0 | |
| count_topic_today | int(11) | NO | | 0 | |
| count_user | int(11) | NO | | 0 | |
| count_topic_audit | int(11) | NO | | 0 | |
| joinway | tinyint(1) | NO | | 0 | |
| role_leader | char(32) | NO | | ?? | |
| role_admin | char(32) | NO | | ??? | |
| role_user | char(32) | NO | | ?? | |
| addtime | int(11) | YES | | 0 | |
| isrecommend | tinyint(1) | NO | | 0 | |
| isopen | tinyint(1) | NO | | 0 | |
| isaudit | tinyint(1) | NO | | 0 | |
| ispost | tinyint(1) | NO | | 0 | |
| isshow | tinyint(1) | NO | MUL | 0 | |
| ispostaudit | tinyint(1) | NO | | 0 | |
| uptime | int(11) | NO | | 0 | |
+——————-+————+——+—–+———+—————-+

ts_group_cates =>小组分类

+————-+———-+——+—–+———+—————-+
| Field | Type | Null | Key | Default | Extra |
+————-+———-+——+—–+———+—————-+
| cateid | int(11) | NO | PRI | NULL | auto_increment |
| catename | char(32) | NO | | | |
| referid | int(11) | NO | MUL | 0 | |
| count_group | int(11) | NO | | 0 | |
| uptime | int(11) | NO | | 0 | |
+————-+———-+——+—–+———+—————-+

ts_group_options =>小组配置

+————-+———–+——+—–+———+——-+
| Field | Type | Null | Key | Default | Extra |
+————-+———–+——+—–+———+——-+
| optionname | char(12) | NO | PRI | | |
| optionvalue | char(255) | NO | | | |
+————-+———–+——+—–+———+——-+

ts_group_topics =>小组帖子

+—————+————–+——+—–+———+—————-+
| Field | Type | Null | Key | Default | Extra |
+—————+————–+——+—–+———+—————-+
| topicid | int(11) | NO | PRI | NULL | auto_increment |
| typeid | int(11) | NO | MUL | 0 | |
| groupid | int(11) | NO | MUL | 0 | |
| userid | int(11) | NO | MUL | 0 | |
| appkey | char(32) | NO | | group | |
| appname | char(32) | NO | | ?? | |
| appaction | char(32) | NO | | topic | |
| appid | int(11) | NO | | 0 | |
| title | char(64) | NO | MUL | | |
| content | text | NO | | NULL | |
| thread_type | char(16) | NO | | | |
| path | char(32) | NO | | | |
| photo | char(32) | NO | | | |
| photoshow | tinyint(1) | NO | | 0 | |
| attach | char(32) | NO | | | |
| attachname | char(64) | NO | | | |
| attachshow | tinyint(1) | NO | | 0 | |
| attachscore | int(11) | NO | | 0 | |
| music | varchar(512) | NO | | | |
| video | varchar(512) | NO | | | |
| count_comment | int(11) | NO | | 0 | |
| count_view | int(11) | NO | | 0 | |
| count_love | int(11) | NO | | 0 | |
| istop | tinyint(1) | NO | | 0 | |
| isshow | tinyint(1) | NO | | 0 | |
| isclose | int(4) | NO | | 0 | |
| color | int(4) | NO | | 0 | |
| iscomment | tinyint(1) | NO | | 0 | |
| isposts | tinyint(1) | NO | | 0 | |
| isaudit | tinyint(1) | NO | | 0 | |
| addtime | int(11) | YES | | 0 | |
| uptime | int(11) | NO | | 0 | |
+—————+————–+——+—–+———+—————-+

ts_group_topics_comments =>小组主题评论

+————+———-+——+—–+———+—————-+
| Field | Type | Null | Key | Default | Extra |
+————+———-+——+—–+———+—————-+
| commentid | int(11) | NO | PRI | NULL | auto_increment |
| referid | int(11) | NO | MUL | 0 | |
| topicid | int(11) | NO | MUL | 0 | |
| userid | int(11) | NO | MUL | 0 | |
| content | text | NO | | NULL | |
| path | char(32) | NO | | | |
| photo | char(32) | NO | | | |
| attach | char(32) | NO | | | |
| attachname | char(64) | NO | | | |
| addtime | int(11) | YES | | 0 | |
+————+———-+——+—–+———+—————-+

ts_group_users =>小组成员

+———–+————+——+—–+———+——-+
| Field | Type | Null | Key | Default | Extra |
+———–+————+——+—–+———+——-+
| userid | int(11) | NO | PRI | 0 | |
| groupid | int(11) | NO | PRI | 0 | |
| isadmin | int(11) | NO | | 0 | |
| isfounder | tinyint(1) | NO | | 0 | |
| addtime | int(11) | NO | | 0 | |
+———–+————+——+—–+———+——-+

ts_photo =>照片列表

+————-+————+——+—–+———+—————-+
| Field | Type | Null | Key | Default | Extra |
+————-+————+——+—–+———+—————-+
| photoid | int(11) | NO | PRI | NULL | auto_increment |
| albumid | int(11) | NO | | 0 | |
| userid | int(11) | NO | | 0 | |
| photoname | char(64) | NO | | | |
| phototype | char(32) | NO | | | |
| path | char(32) | NO | | | |
| photourl | char(120) | NO | | | |
| photosize | char(32) | NO | | | |
| photodesc | char(120) | NO | | | |
| count_view | int(11) | NO | | 0 | |
| isrecommend | tinyint(1) | NO | | 0 | |
| addtime | int(11) | NO | | 0 | |
+————-+————+——+—–+———+—————-+

ts_photo_album =>相册列表

+————-+————–+——+—–+———+—————-+
| Field | Type | Null | Key | Default | Extra |
+————-+————–+——+—–+———+—————-+
| albumid | int(11) | NO | PRI | NULL | auto_increment |
| userid | int(11) | NO | MUL | 0 | |
| path | char(32) | NO | | | |
| albumface | char(64) | NO | | | |
| albumname | char(64) | NO | | | |
| albumdesc | varchar(400) | NO | | | |
| count_photo | int(11) | NO | | 0 | |
| count_view | int(11) | NO | | 0 | |
| isrecommend | tinyint(1) | NO | MUL | 0 | |
| addtime | int(11) | NO | | 0 | |
| uptime | int(11) | NO | | 0 | |
+————-+————–+——+—–+———+—————-+

ts_photo_comment =>照片评论

+———–+———–+——+—–+———+—————-+
| Field | Type | Null | Key | Default | Extra |
+———–+———–+——+—–+———+—————-+
| commentid | int(11) | NO | PRI | NULL | auto_increment |
| referid | int(11) | NO | MUL | 0 | |
| photoid | int(11) | NO | MUL | 0 | |
| userid | int(11) | NO | MUL | 0 | |
| content | char(255) | NO | | | |
| addtime | int(11) | YES | | 0 | |
+———–+———–+——+—–+———+—————-+

ts_tag =>标签列表

+—————+————+——+—–+———+—————-+
| Field | Type | Null | Key | Default | Extra |
+—————+————+——+—–+———+—————-+
| tagid | int(11) | NO | PRI | NULL | auto_increment |
| tagname | char(16) | NO | UNI | | |
| count_user | int(11) | NO | | 0 | |
| count_group | int(11) | NO | | 0 | |
| count_topic | int(11) | NO | | 0 | |
| count_bang | int(11) | NO | | 0 | |
| count_article | int(11) | NO | | 0 | |
| count_photo | int(11) | NO | | 0 | |
| isenable | tinyint(1) | NO | | 0 | |
| uptime | int(11) | NO | | 0 | |
+—————+————+——+—–+———+—————-+

ts_system_options =>系统配置

+————-+———–+——+—–+———+——-+
| Field | Type | Null | Key | Default | Extra |
+————-+———–+——+—–+———+——-+
| optionname | char(32) | NO | PRI | | |
| optionvalue | char(255) | NO | | | |
+————-+———–+——+—–+———+——-+

ts_user =>用户列表

+———-+———-+——+—–+———+—————-+
| Field | Type | Null | Key | Default | Extra |
+———-+———-+——+—–+———+—————-+
| userid | int(11) | NO | PRI | NULL | auto_increment |
| pwd | char(32) | NO | MUL | | |
| salt | char(32) | NO | | | |
| email | char(32) | NO | UNI | | |
| resetpwd | char(32) | NO | | | |
+———-+———-+——+—–+———+—————-+

ts_user_gb =>用户留言

+———-+—————+——+—–+———————+—————-+
| Field | Type | Null | Key | Default | Extra |
+———-+—————+——+—–+———————+—————-+
| id | int(11) | NO | PRI | NULL | auto_increment |
| reid | int(11) | NO | | 0 | |
| userid | int(11) | NO | MUL | 0 | |
| touserid | int(11) | NO | MUL | 0 | |
| content | varchar(2000) | NO | | | |
| addtime | datetime | NO | | 0000-00-00 00:00:00 | |
+———-+—————+——+—–+———————+—————-+

ts_user_info =>用户信息

+—————–+————-+——+—–+———+——-+
| Field | Type | Null | Key | Default | Extra |
+—————–+————-+——+—–+———+——-+
| userid | int(11) | NO | UNI | 0 | |
| ucid | int(11) | NO | MUL | 0 | |
| fuserid | int(11) | NO | MUL | 0 | |
| username | char(32) | NO | UNI | | |
| email | char(32) | NO | PRI | | |
| sex | tinyint(1) | NO | | 0 | |
| phone | char(16) | NO | | | |
| roleid | int(11) | NO | | 1 | |
| province | int(11) | NO | | 0 | |
| city | int(11) | NO | | 0 | |
| area | int(11) | NO | | 0 | |
| areaid | int(11) | NO | | 0 | |
| path | char(32) | NO | | | |
| face | char(64) | NO | | | |
| signed | char(64) | NO | | | |
| blog | char(32) | NO | | | |
| about | char(255) | NO | | | |
| ip | varchar(16) | NO | | | |
| address | char(64) | NO | | | |
| qq_openid | char(32) | NO | MUL | | |
| qq_access_token | char(32) | NO | | | |
| count_score | int(11) | NO | | 0 | |
| count_follow | int(11) | NO | | 0 | |
| count_followed | int(11) | NO | | 0 | |
| isadmin | tinyint(1) | NO | | 0 | |
| isenable | tinyint(1) | NO | | 0 | |
| isverify | tinyint(1) | NO | | 0 | |
| verifycode | char(11) | NO | | | |
| thems_other | tinyint(1) | NO | | 0 | |
| addtime | int(11) | NO | | 0 | |
| uptime | int(11) | YES | | 0 | |
+—————–+————-+——+—–+———+——-+

ts_user_options =>用户选项

+————-+———–+——+—–+———+——-+
| Field | Type | Null | Key | Default | Extra |
+————-+———–+——+—–+———+——-+
| optionname | char(12) | NO | PRI | | |
| optionvalue | char(255) | NO | | | |
+————-+———–+——+—–+———+——-+

这里只包含常用的数据表结构,至于其他的数据表请看这里ThinkSAAS 数据库结构 -> 数据表结构

至于本文中未列出的数据表,请在mysql命令行,使用describe命令查看。

Style.css文件生成工具

此工具正在升级,暂时无法使用看到,待升级完毕,会新发一篇文章!

工具地址:http://labs.qianxingzhem.com/app/csscreater

开发时间:2012-8-10

作者:潜行者m

在制作wordpress主题的时候,我们需要css文件,在标准的wordpress主题中,官方推荐将css文件命名为style.css

在使用主题的时候,我们可以上传安装主题,也可以在线安装。当我们安装好主题的时候,我们会发现会有作者、作者地址、模板介绍等等信息。这些信息是写在style.css文件里面的。只有按照正确的格式,写进style.css文件,我们才能把主题压缩成zip直接上传安装。

本工具的功能就是为了简化这个流程。你只需要填写一个表单,就可以自动生成带有正确格式信息的style.css文件。

当然,不仅仅是输出你输入的wordpress主题版权信息,在style.css文件里面,还附带了一段非常成熟的CSS reset 代码,将元素在不同浏览器中的不同表现一律抹平。如果你不知道为什么使用CSS reset,可以看一下潜行者m的这篇文章:网页设计为什么要使用css reset

同时,还附带了本人常用的css原子类,使用原子类,可以非常容易的进行布局等。关于为什么要使用原子类,可以看一下潜行者m的这篇文章:网页设计中构建并使用原子类

当然,还帮你整理好了结构,因为本人患有代码整理强迫症 ^_^

此外,这个工具也不仅仅可以用于wordpress,你在设计网页的时候,也需要在css文件里面,声明你的作品版权,这个工具就是为了帮助你省略这些工序。

全代码打造简洁美观回到顶部按钮

这次,潜行者m带来一个jquery的比较实用的教程,就是为你的网站添加一个纯代码画出来的、简洁美观的回到顶部按钮。这个按钮的效果就是,当页面滑动一段距离之后,就会浮现出来这个按钮,点击这个按钮之后,就自动滚动到顶部。具体效果如下:

点击之后就会跳转到顶部,然后这个按钮平滑消失。与网上的相比,潜行者m版的是纯代码,加载速度更快,效果色彩控制好;代码精简,只有数条而已,拒绝大坨大坨的代码。废话不多说,下面就开始制作。

html结构

我使用了a标签作为这个结构,可能不太标准,但是比较方便。在a标签中,内置了一个span标签,用来显示三角号。具体代码如下:

<a id=”gotop” href=”#”>
<span class=”gotop-shang”>▲</span>
</a>

对,你没看错,就这么简单的一句代码,直接在a标签中,填写一个三角号。剩下的就是使用css进行样式控制。

css代码

a[id=”gotop”]{
display:block;
width:60px;
height:60px;
position:fixed;
bottom:50px;
right:40px;
border-radius:10px 10px 10px 10px;
text-decoration:none;
display:none;
background-color:#999999;
}

上面这段代码,定义了a标签的外观样式,定义display为block,这样,我们才能指定它的width和height。定义position为fixed,让它固定在右下角。同时为它指定圆角,就是使用border-radius属性,定于半径为10px的圆角。

span{
display:block;
width:60px;
color:#dddddd;
}
span:hover{
color:#cccccc;
}
span[class=”gotop-shang”]{
font-size:40px;
text-align:center;
margin-top:4px;
}

上面这一段,就是定义了span标签里面的三角号,如果你不会打三角号,可以看本人的这篇文章:亲自打造属于自己网站风格的工具边栏,里面有提到这个。这几句代码意思很简单,就是定义了三角号的外观样式,同时制定了颜色变化,这是为了用户体验。最下面的margin-top:4px,则是用来准确定位三角号,让它居中显示。

jquery代码

具体的javascript代码如下,解析已经写在注释里面了:

$(function(){

$(window).scroll(function(){  //只要窗口滚动,就触发下面代码
    var scrollt = document.documentElement.scrollTop + document.body.scrollTop; //获取滚动后的高度
    if( scrollt &gt;200 ){  //判断滚动后高度超过200px,就显示
        $("#gotop").fadeIn(400); //淡出
    }else{
            $("#gotop").stop().fadeOut(400); //如果返回或者没有超过,就淡入.必须加上stop()停止之前动画,否则会出现闪动
    }
});</pre>


$(“#gotop”).click(function(){ //当点击标签的时候,使用animate在200毫秒的时间内,滚到顶部
$(“html,body”).animate({scrollTop:”0px”},200);
});
});

怎么样,简单吧?就用这几句代码而已,就可以出现这个功能,而且可以方便的修改颜色、形状、大小等。当然缺点也是有的,就是在IE6等过时的浏览器中,可能不会兼容,无法实现。

 

人们究竟怎么去看你博客里的文章

这篇文章是我建博一年多以来一个观察和总结。阅读本文章,你也可以根据你博客的实际情况,对你博客的内容排版等做出调整,更有利于发挥你博客的能力。

首先要说明一点,这里说的博客,并不是生活记录类的博客。因为那类的博客,看的大多是朋友或者家人。这里说的是像潜行者m博客那样的,具有一定方向的博客,写的文章具有一定的应用价值的博客。因为这种博客,才能吸引大量网络上的有这方面需求的人来看。

从网址直接进入

浏览者的想法分析

从网址直接进入的朋友,可以能是记住了,或者是添加到了收藏夹里,也有可能是通过评论,回访进来的。但是就本人的博客而言,首页仅仅显示八篇文章,剩下的就需要继续翻页或者点击标签、目录分类才可以看到。通过这种方式进来的人,通常只会看第一页,仅仅是看到首页里面的八篇文章,而懒的继续点击看其他文章。也有个特例,如果访问者看到你首页的文章质量非常不错,可能就会收藏网站以便下次继续访问,也有可能会点击自己感兴趣的分类,查看更多文章。

解决方法:

  1. 设置醒目的目录链接等,吸引有兴趣的用户点击,这样可以看到更多的相关文章。
  2. 提高文章质量是重中之重,浏览者来看了,但只有文章质量提升上去了,浏览者才会留下来,之后继续观看。
  3. 在文章中增加相关性较强的文章链接,当浏览者观看文章的时候,可以继续看自己感兴趣的文章。

通过搜索引擎进入

浏览者的想法分析

这种方法得到的浏览者质量最好,但是要求博客文章的质量也要好。这一点比较适用于技术类博客,大家在搜索某个函数或者某个插件的时候,前面几个往往是独立博客,针对这个插件的介绍和使用方法等。一般不会有人去搜索某某心情,然后看到你博客上面,写你最近的心情如何。但是,浏览者往往看完文章,学到知识就走人了,而不会去看其他文章。

解决方法:

  1. 在文章的底部等,添加相关文章显示,浏览者可能会发现有很多他喜欢的文章,而继续看下去或者收藏一下。
  2. 提高文章质量,让浏览者明白,你的博客是一个质量非常高的博客,在你博客里,可以学到很多有用的知识。

从外链进入

浏览者的想法分析

这种外链进入,并非是上面说的第一条,这里的外链,主要是指在其他地方发表文章留下的版权链接、他人转载文章留下的原文链接、他人在文章中引用文章留下的链接等。这中方式进入的和第二条,通过搜索引擎进入的有异曲同工之妙。浏览者往往是为了好奇或者是扩充知识等,来到你的文章,但是一旦看完,就觉得没有什么必要继续看下去。

解决方法:

  1. 同第二条的解决方法。

实际应用

理论永远只是理论,能实践的理论才是好理论。现在就说一下本人的实际应用方案。

  1. 首先要提高整体的博客文章质量和素质,文章要是给别人看的,如果写的没有质量和水平,谁去看。
  2. 由于那次robots文件事件,导致百度收录全清,结果完全没有搜索引擎的流量。加强一了下SEO,现在百度每天一收。
  3. 在之前的文章中,仍然有很多精品文章,但由于百度收录没有,如果想要别人看到,则要在新写的文章中,不时地提一下之前写的文章,给出一个连接,让浏览者可以点击查看之前的精品文章。
  4. 为了增加对以前文章的收录,潜行者m还整理了一下以前的精品文章,加上原文链接,将其转载到其他博客或者网站上,这样,百度可以收录较早的文章,而其他博客平台或者网站上的用户,也可以看到之前的精品文章。
    计划就是这些,希望本文能给你一些启示和帮助。

亲自打造属于自己网站风格的工具边栏

首先请允许潜行者 m 介绍一下自创的名词“工具边栏”。现在大家在浏览网站的时候,经常会发现一些浮动的条状栏,通常具有向上向下的功能,当你点击一下,就可以方便的回到顶部或者前往底部。其实打造这样一个工具边栏,并不是很难,使用 jquery 很容易就可以做出来。下面,你跟随我的步骤,一步一步的做一下,就可以做出来了,然后你可以根据这个代码,进行一些修改,自定义一些东西。

废话不多说,先说一下我做的这个工具边栏。这个工具边栏是符合我自己做的模板“Q21”,Q21 模板的特点是黑白对比,所以这个工具边栏要突出黑白变化。经过构思之后,我决定这个边栏的样式是这样的:

当鼠标移动到“分享”按钮上之后,会自动滑出一个黑条,然后黑条上是各个分享按钮。具体的演示效果,你可以下载最后代码包查看。下面我们来开始动手一步一步的制作。

建立 html 结构

用 span 标签也行,不过我还是喜欢用 div,所以就用 div 来建立 html 结构。结构很明确了吧,一个大 div 包含三个小 div,分别是上中下三个按钮,其中分享按钮中,还需要再包含一个 div,用来滑出分享按钮。好了,结构就建好了。

<div id="tooltip" >
    <div id="toolt">▲</div>
    <div id="toolc" >
        <div id="sharetxt">分享</div>
        <div id="shareit" class="none">这里是分享代码</div>
    </div>
    <div id="toolb">▼</div>
</div>

注意,向上向下按钮,我使用的是字符,而不是图片。如果是图片的话,需要加载,而且动态变化,需要替换图片更加的不方便。至于如何打出这个上下两个三角号,就靠你的搜狗输入法了,如下图:

好了,有了 html 结构,我们再来定义一些 css。

CSS 代码

首先定义全局的字体

:root{font-family:"5FAE8F6F96C59ED1",helvetica,Arial;}

经测试,这个边栏,在微软雅黑的字体下效果最好,所以要规定网页使用微软雅黑。上面这句代码,:root 表示选择 html 根,对所有文档中的元素生效,其中 5FAE8F6F96C59ED1 表示的就是微软雅黑,至于为什么这样写而不写成“微软雅黑”,如果用户电脑是英文的,那肯定找不到微软雅黑这个字体,这样写法,只要有微软雅黑字体,就可以使用。

定位工具条位置

div[id="tooltip"]{
    width:40px;
    height:120px;
    position:fixed;
    bottom:50%;
    right:20px;
    }

这几句 css 定义了工具边栏的高度和宽度,同时 position:fixed 表示让它固定在页面中,不会根据滚动条的滚动而移动。bottom:50%,让它保持在页面中部位置,right:20px 表示让它距离右边 20 个像素。

响应操作

div[id^="tool"]{
    font-size:38px;
    cursor:pointer;
    color:#000000;
    }
div[id^="tool"]:hover{
    color:#999999;
    }

响应操作可以让工具更加人性化,例如上图效果,当我们把鼠标移动到箭头的时候,它会变成灰色,表示你已经把箭头移动到上面了。在这里,我使用了新型的选择器 div[id^=”tool”]它的意思是,选取所有以 tool 开头的 div 标签。定义字体大小为 38px,调整三角形成为合适大小。设定 cursor:pointer 属性,当你鼠标移动到上面的时候,会显示成手指形状,让你误以为是一个可以点击的链接。下面的语句,当你鼠标移动到上面的时候,颜色变成#999999。这是响应操作,提高用户体验。

中部 CSS 代码

div[id="toolc"]{
    font-size:22px;
    float:right;
    width:40px;
    height:70px;
    overflow:hidden;
     }

div[id="sharetxt"]{
    width:26px;
    margin-right:8px;
     float:right;
     height:70px;
     display:inline;
    margin-top:4px;
    }
div[id="shareit"]{
    width:304px;
    height:62px;
    float:right;
    height:30px;
    margin:15px 0px;
    }
.none{
    display:none;
    }
.inline{
    display:inline;
    }

比较简单,没有什么亮点,自己看看就行了。重点在于如何实现滑动出现分享按钮。我采用的方法是,定义两个 div,浮动放置,其中分享按钮那个 div 默认是隐藏的,只有鼠标移动上去触发之后,它才会显示出来。

Jquery 代码

在添加 jquery 代码之前,我们需要彻底理清滑出分享按钮的实现方式。jquery 并没有提供横向滑动出现的方法,那要怎么实现呢?可以这样实现,先把底色变成黑色,让装载分享按钮的 div 框出现,但是这时候由于宽度不够显示分享按钮 div,所以你暂时看不到。使用 jquery 的 animate 方法,让宽度逐渐变宽,直到完全显示分享按钮 div。这样就会造成一个假象,黑色滑出,然后出现分享按钮。

具体的实现代码如下

$(function(){
    $("#toolc").mouseenter(function(){  //这里使用mouseenter方法来触发,当鼠标移动上去之后,触发这个方法
        $("#toolc").css({"color":"#ffffff","backgroundColor":"#000000"}); //先对中部添加背景,并且把文字变成白色
        $("#shareit").removeClass("none").addClass("inline"); //去掉shareit的none,让它显示出来,但由于宽度不够,无法显示
        $("#toolc").animate({width:"350px"},200); //使用animate方法,动态的改变宽度,直到显示出来分享按钮
    }).mouseleave(function(){ //当鼠标从目标区域中移走,就触发下面这个事件
        $("#toolc").css({"color":"#000000","backgroundColor":"#ffffff"}); //同反
        $("#shareit").removeClass("inline").addClass("none"); //同反
        $("#toolc").animate({width:"40px"},200); //同反,你懂的
    });
    $("#toolt").click(function(){
        $("html,body").animate({scrollTop:"-=900px"},200); //每点击一下,就向上滑动900px
    });
    $("#toolb").click(function(){
        $("html,body").animate({scrollTop:"+=900px"},200); //每点击一下,就向下滑动900px
    });
});

注释我已经写在上面代码中了,仔细耐心看一下。这里,我想说的是向上向下滑动 900px。我并没有让它点击直接到顶部或者底部。因为我觉得,如果文章比较长,浏览者并不一定想直接滑动到底部,而是想看看下面的内容。如果他真想滑动到底部,也只需要点两次或者三次按钮即可。这也是一个用户体验的细节。

当然,你还需要申请分享代码

可以去 bshare jiathis 百度分享那里,申请一下代码,粘贴到 shareit div 中就可以了。怎么样,其实原理也非常简单,动一下脑子就可以了。

Jquery.lazyload.js究竟要怎么使用

Jquery.lazyload.js 这个jquery插件,是用来缓冲加载图片的插件。如果一篇文章很长有很多图片的话,下载图片就需要很多时间。而这款插件,会检测你的滚动情况,只有你要看到那个图片的时候,它才会从后台请求下载图片,然后显示出来。使用这个插件,可以在需要显示图片的时候,才下载图片,所以可以减少服务器的压力,避免不必要的资源下载。一个简单的例子,如果一个人不看下面的图片,那加载下面的图片就是一种浪费。

但是现在,很多javascript大牛分析得出,这个插件其实并没有真正的缓加载效果。确实,官方也已经给出了说明和解决方法了。

插件原理:修改目标的src属性为orginal属性,从而中断图片的加载。检测滚动状态,然后把视野中的目标src属性还原,制造缓冲加载的效果。
原因:在新版的浏览器中,即使你删除了javascript控制的src属性,浏览器仍然会去加载这个图像。
解决方法:修改html的结构,在img标签中添加新的属性,把src属性的值指向占位图片,添加data-original属性,让其指向真正的图像地址。
例如:<img data-original=“img/example.jpg” src=“img/grey.gif”>
这样我们就需要判断一下,我们究竟还要不要使用这个插件。 ## 使用: 1. 必须按照这种结构才有实际作用,需要对输出进行定义。 2. 可以节约服务器资源,并且有较好的用户体验。 3. 如果图片很大,当用户滚动到目标位置,需要较长时间下载。 ## 不使用: 1. 增加服务器压力,浪费系统资源。 究竟使用不使用,还是要看你自己的实际需求。如果你图片比较少,就不必使用了,如果你图片比较多,可以考虑一下。但是,使用的话,你可能需要把每一个img标签上自己加上这个属性,会稍微麻烦一点。潜行者m博客上,就用了这个插件,不过没用使用官方说的那种结构,要的只是一个缓冲加载的效果。 ## 如何使用: 如何使用这个插件呢? 第一步:加载相关文件。 很明显,你要加载jquery和这个插件。你可以使用以下代码,加载这几个文件:
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.lazyload.js" type="text/javascript"></script>
第二步:定义图片结构。 按照官方的建议,定义你的img结构:
<img class="lazy" src="img/grey.gif" data-original="img/example.jpg" width="640" heigh="480">
第三步:触发这个插件,生效。 激活以下,你就可以在目标中使用了。
 $("img.lazy").lazyload();

高级使用方法:

更周全的做法

我们不得不思考这样一个问题。我们定义了这样一个结构,那么网页中,就不会加载源图像了。只有当javascript执行,才会显示这个源图像。如果用户的浏览器不支持或者用户关掉了支持javascript的选项,那么我们的这个图像就无法显示出来。也就是说,没有javascript的支持,我们的图像就无法显示出来。

应对这个问题,我们需要引入noscript标签。大体思路如下:用noscript包含真实的图像位置,当浏览器不支持javascript,直接显示图像。对现有图像,隐藏处理,使用show()方法触发显示。这样,如果浏览器不支持javascript,我们自定义的img就不会出现,而显示noscript里面的图像。具体实现代码如下:

<img class="lazy" src="img/grey.gif" data-original="img/example.jpg"  width="640" heigh="480">
<noscript><img src="img/example.jpg" width="640" heigh="480"></noscript>
.lazy {
  display: none;
}
$("img.lazy").show().lazyload();

提前加载

默认的情况是,当你滚动到图片位置的时候,插件开始加载。这样,用户可能首先看到的是一个空白图像,然后再缓慢出现。如果你想在用户滚动之前,提前加载这个图像,你可以配置一下参数。

$("img.lazy").lazyload({ threshold : 200 });
threshold这个参数,就是用来提前加载的。上面这个语句的意思是,当距离图片还有200像素的时候,就开始加载图片。 ### 自定义触发事件 默认的触发事件,是滚动,当你滚动的时候,就会检查然后加载。你可以使用event属性,设置你自己的加载事件,之后你可以自定义触发这个事件的条件,然后去加载图像。
$("img.lazy").lazyload({ 
    event : "click"
});

自定义显示效果

默认的图片实现效果,就是没有效果,下载完成之后,直接显示出来。这样的用户体验并不好,你可以设置effect属性,来控制显示图片的效果。例如

$("img.lazy").lazyload({ 
    effect : "fadeIn"
});
fadeIn的效果就是,改变图片的透明度,渐现的方式出现。效果: [effect demo page](http://www.appelsiini.net/projects/lazyload/enabled_fadein.html) ### 把图像插入某个容器 大家如果使用智能手机的话,经常去应用网站下载应用,他们通常使用一个横着的容器,放一些手机截图。使用container属性,能很轻松在容器中实现缓冲加载。首先,我们需要用css定义这个容器,然后用这个插件进行加载。效果: [vertical](http://www.appelsiini.net/projects/lazyload/enabled_wide_container.html)
#container {
    height: 600px;
    overflow: scroll;
}
$("img.lazy").lazyload({         
     container: $("#container")
});

加载不可见图像

有部分图像是不可见的,我们对其加上类似display:none等属性的图像。默认的情况下,这个插件是不会加载隐藏的不可见图像。如果我们需要它加载不可见图像,我们需要使用skip_invisible属性,对其赋予false

$(“img.lazy”).lazyload({
skip_invisible : false
});

官方说明:http://www.appelsiini.net/projects/lazyload

如何高度自定义 QQ 邮件列表外观样式

2012/12/10 日补充: 这种方法目前已经失效,由于腾讯采用了某些方法,导致 nid 的值是动态变换的,使用这种方法,无法正确的订阅你的频道。具体的解决方法,正在测试中,暂时不要使用下面这种方式。

首先先来了解一下 QQ 邮件列表是什么。

QQ**邮件列表是一项免费的群发邮件服务。通过它,您可以在网站上加入订阅入口,来获取您的订户用户订阅后,就能方便的给他们群发邮件了。如果你写博客,它能自动将最新的博客文章发给读者。如果你开网店,可以用它批量通知顾客店铺的最新优惠。 如果你正管理一个组织**,通过它,能快速向组织成员发布公告。使用 QQ 邮件列表,让您的邮件发得更多、更快、更准!
总之,这是一个让帅哥更帅,让美女更美,让垃圾邮件正常群发的腾讯唯一几个免费的服务。很多网站上,都有 QQ 列表,你可以输入邮箱来订阅网站内容,站长就可以发一些资讯到你的邮箱里。

我们知道,添加这个服务,就需要申请代码,然后把代码放到网站上。但是,它生成的外观样式,并不一定符合我们网站的风格样式,本文潜行者 m 就要跟大家一起分析一下他们的代码,然后进行自定义修改,来符合自己网站的风格。获取代码有两种形式,一种是图片的形式,另一种是一个文本输入框,直接填写上邮箱提交。下面潜行者 m 一一分析。

图片形式:

图片形式,他们允许定义一些简单的参数:

我们看一下生成的代码

<!--QQ邮件列表订阅嵌入代码--><a target="_blank" href="http://list.qq.com/cgi-bin/qf_invite?id=55c8d4cfd86c2322b0da011d72769e61e8a471a03fa52b74">
<img alt="填写您的邮件地址,订阅我们的精彩内容:" border="0" src="http://rescdn.list.qq.com/zh_CN/htmledition/images/qunfa/manage/picMode_light_l.png"/></a>

从代码中,就可以看出,很简单的两个标签。使用了一个 a 标签,包裹了一个 img。而这个 img 指向的图片地址就是http://rescdn.list.qq.com/zh_CN/htmledition/images/qunfa/manage/picMode_light_l.png。这样,我们修改这个图片地址成我们自己准备好的地址就可以了。同时我们还可以加上一些css代码等等。只需要a标签中的href属性为http://list.qq.com/cgi-bin/qf_invite?id=55c8d4cfd86c2322b0da011d72769e61e8a471a03fa52b74即可,因为这个地址是我们订阅的填写页面。

代码方式:

代码方式要稍微麻烦一点,但是省下很多功夫,因为用户不用再打开一个页面去填写邮箱了。

我们再来看看代码:

<!--QQ邮件列表订阅嵌入代码-->
<script >
var nId = "3105746ef562384a0ffbc67926fa2810b331ea5d6a5eb435",nWidth="auto",sColor="light",sText="填写您的邮件地址,订阅我们的精彩内容:" ;;
</script>
<script src="http://list.qq.com/zh_CN/htmledition/js/qf/page/qfcode.js" charset="gb18030"></script>

这段代码里,上面那一句是定义了几个参数,其中 nID 参数,是你这个订阅频道独有的,要传输到下面的 qfcode.js 使用。那这个 qfcode.js 文件的内容是什么呢?直接打开http://list.qq.com/zh_CN/htmledition/js/qf/page/qfcode.js这个文件看一下就知道了。由于代码比较多,我把关键代码提出来:

"<div class="rssbook ",sColor,
" " style="width:",nWidth," "><p class="info">",sText,"</p>",
"<div class="mailInput">",
"<form action="http://list.qq.com/cgi-bin/qf_compose_send" target='_blank' method='post'>",
"<input type="hidden" name="t" value="qf_booked_feedback">",
"<input type="hidden" name="id" value="",nId,"">",
"<input  id="to" name="to" type="text" class="rsstxt" value=""/>",
"<div class="rssbutton"><input type="submit" value="订阅"></div>",
"</form>",
"</div></div>"].join(""));

这些代码的意思,就是说,在页面中输出了一个表单(form),它提交的地址就是http://list.qq.com/cgi-bin/qf_compose_send,表单里面有三个input元素,其中两个是隐藏的,用来发送参数的,有一个是发送填写的邮箱的。这两个隐藏表单中发送的内容,就是你的nID等。

好,弄清楚了这个,我们就按照自己的风格,动手做一个表单,然后根据它的这个表单,填写上参数,进行提交就可以了。目前,从这个代码中,潜行者 m 提取出以下几个信息:nID 3105746ef562384a0ffbc67926fa2810b331ea5d6a5eb435 、 POST http://list.qq.com/cgi-bin/qf_compose_send。那现在我们自己写一个提交表单。

<form action="http://list.qq.com/cgi-bin/qf_compose_send" target="_blank" method="post">
<input type="hidden" name="t" value="qf_booked_feedback" />
<input type="hidden" name="id" value="3105746ef562384a0ffbc67926fa2810b331ea5d6a5eb435" />
<input type="text" id="to" name="to" value="" placeholder="输入你的邮箱" />
<input type="submit" value="订阅" /></form>

这样就可以了,我们只要填写上,点击订阅,就会订阅了。我们自己写出了这个表单,然后再对其应用 css 修改它的样式,来符合我们网站的风格,这样就大功告成了。

近期入手K450,记录一下感受

学校的枯燥生活,有点音乐会更美。

有了音乐,还需要有个好耳机才更完美。

这半年来,从刚开始40块的漫步者h180,我第一次感受到好耳机与普通耳机的区别。后来有买了一个声籁EM300,也是40块左右,但是便携式的耳机,比耳塞要大很多,低音也更好。但是一分钱一分货,它的音质在同等价位最好,但是线材太细,用了大约三个月,接口处的外皮已经磨烂了,里面的金属丝都露出来了,不过还能用,就是摘耳机的时候,会划一下脸。不过现在再用,右耳朵有点电磁声。

后来就开始认真的关注耳机,变成了一个耳机准发烧友。一直看着K420不错,因为不是太贵。那次,赚了人生中第一个300块钱,打算出手买一个,结果那天中国银行短信系统抽风,验证短信怎么也收不到。当然,幸亏那次抽风,否则现在我可能就没有K450了。

再后来几天,在京东上看到akg的k314p降价70,只卖130。看到之后,二话不说就买下了。其实我从来不知道这个耳机,但是看在降70只是130,又缺个耳机子,就买上了。后来又搜了一下,京东搞促销之前,果然都是提很多价格。不过这个价格也算是最低了,X猫上一般都140,还要邮费。

K314P有个致命伤,就是直接没有低音效果,耳塞嘛,毕竟不如耳机听起来效果好。又开始盼望着K420、K450。

之前K450是不敢想的,毕竟600多块钱,一个月的生活费。但是K420的话,已经有个K314p了,音质好一点的话,就有点重复了。然而,看评论K450音质比K420提升了很多,肯定,价格也贵了一倍。

迟迟不敢下手,打算等到个促销之类的。但是,这个价格不想联想产品那么水,几个月了都是固定在658不变。

后来在天猫买了台电脑,赶上活动,返了300块。这300可以随便花。再然后就是老一套,向老妈硬磨软泡,最终申请下来了400块钱梦想基金^_^。找了一家,VIP价格只有620还包邮,送礼包,果断入手。

然后两天就来了。初听,声音好浑浊啊,低音低的太吓人了。再听,已经好了很多了。还送了煲机碟,不过我没打算怎么煲,直接小音量听就行了。要是耳机非得煲鸡多少个小时才好,那么厂家早就把耳机先煲它个几百小时,再包装出来卖了。

这有几天了,音质也之间好多了,低音比较好,细节比较清晰,当然需要ape无损格式咯。我妈也要听,听了一会就不行了,说听得头晕。。

这个耳机子,可以坚持我用一年多了吧,下次再升级,就要靠自己赚的钱咯。

 

使用jquery插件coin-slider轻松打造幻灯片教程

今天为了做一个模板,来收集幻灯片插件,最终确定了两款比较合适的。coin-slider和nivoslider,为此,研究了一下午,从各个方面来实验这两款插件,究竟哪款比较适合、比较好。

当然,聪明的你看题目就已经知道了。我必须要吐槽一下nivoslider这个jquery插件。这两款插件,在看官方的demo时,这个插件的效果要比coin-slider好一些。看了一下教程,可以自定义的参数较多,貌似功能要更强大一下。于是我就首先研究了一下这款插件的使用方法。由于网上教程比较少,大部分都是直接复制的官方教程,我就直接拿官方的demo代码来看了。这一看,直接晕死。加载了N个css文件,以及各种图片文件,当场晕死。demo里面的代码,也是很多很乱,不是怕多、乱的代码,就怕引用的各种文件各种效果的叠加,分析起来累死个人。

干脆自己按照步骤,自己写个小demo,看一下这款插件的易用性怎么样。按照官方的步骤,写好了图片链接,加载了需要的javascript文件等。打开一看,立刻没有了官方demo的美观和强大,上面的翻页等,都是需要css定义,这个暂时没有管理,所以难看就难看吧。图片切换也算正常,不正常的地方就是,在某个地方,出现了下一张图片的一大堆图片块。这种切换的原理很简单,生成很多div,每个div用css中的background-position属性,把整体的图片切成块,然后对每块进行透明度等的变化,显示的效果就是你看到的那种。但是现在,在旁边出现了一堆块都是乱的,直接无语。具体什么情况,我已经删了,也不截图了。估计是某块css没有定义好,当我打开官方demo的css时,又怵头了,这么多,这么乱的代码。功能的强大,必定面临使用的难度提升,估计这个是给专家级用户使用的,我等小白还是趁早溜走吧。研究了两三个小时,无疾而终。转身向coin-slider走去。

先在网上搜索一下相关资料,某前辈已经写出了一个教程,并且自己做了一个demo,下载下来看了下,效果挺好,代码挺少。同时也下载了官方的demo,打开官方demo,下面的说明,说的清清楚楚的。简而言之就是:加载必备组件=》你自己写图片链接=》执行那个操作。实事也是如此,可能我之前研究nivoslider,而coin-slider和它的原理和操作类似,所以我很快就上手并且做出了自己想要的效果。下面来依次讲解:

1,加载必备组件

这个coin-slider是jquery的一个插件,当然离不开jquery了。所以我们要加载三个项目:jquery、coin-slider和coin-slider-styles.css这三个。后面两个就是这个插件包,最后的那个css文件,是用来格式化幻灯片的相关样式。我估计nivoslider就是因为缺少了一个这个,所以才导致的乱,也有可能是我没有发现这个东西。代码如下:

<script type=”text/javascript” src=”jquery.js”></script>
<script type=”text/javascript” src=”coin-slider.min.js”></script>
<link rel=”stylesheet” href=”coin-slider-styles.css” type=”text/css” />

2,编写你的图片链接

我们首先需要指定一个带有id的div标签,这样在第三步执行的时候,插件才能找到我们想要播出的图片。它的图片的写法,也有几个特点,就是如果你想点击图片跳转到某链接,在外面加上a标签;在img标签后面,新建一个span标签,里面的内容,将会作为图片的说明文字出现。直接看代码:

<div id=”coin-slider”>
<a href=”#” >
<img src=”images/walle.jpg” >
<span>
Description for nem<br />oDescription for nemoDescription for nemoDescription for nemoDescription for nemoDescription for nemoDescription for nemoDescription for nemoDescription for nemoDescription for nemo
</span>
</a>
<a href=”#111”>
<img src=’images/nemo.jpg’ > //加载的图片
<span> //图片对应的说明
Description for nemo
</span>
</a>
</div>

这个代码的大体框架,是我从官方的demo中提取出来的,这里我又要吐槽一下了,官方的demo文件,写的实在是太不规范了,html标签都用的是大写,而且从上面的img的src就可以看出来,他们竟然用了单引号!css文件里也是这样,患有代码强迫症的潜行者m,花了好几分钟,才把大部分代码变成小写,添加合适的换号,真无语。看了一下开发时间,2010年的作品,那时候xhtml应该普及了,为什么还用大写的写法,无语了。

3,执行操作

确保上面两个步骤完成之后,就需要触发它的方法,来实现幻灯片的功能了。方法当然是

    $(document).ready(function() {
$(‘#coin-slider’).coinslider({ height:248 }); //使用各种参数配置来扩充他的功能
});

当然,你也可以使用window.onload,那样可以确保幻灯片图片被完全下载下来之后,再出现幻灯片。

很显然,还可以配置很多参数,让幻灯片的功能更加强大。在上面的代码中,我添加了一个参数height:248,因为我的照片高度是248px。下面介绍一下其他参数,我在官方注释后面,小小的翻译了一下,不准确的话,还望见谅。

width: 565, // width of slider panel 幻灯片的宽度
height: 290, // height of slider panel 幻灯片的高度
spw: 7, // squares per width 幻灯片切出小方框的宽度
sph: 5, // squares per height 幻灯片切出小方框的高度
delay: 3000, // delay between images in ms 切换图片的时间,毫秒单位
sDelay: 30, // delay beetwen squares in ms 小方框变化的时间,毫秒单位(这两个尽量不要改,官方说改了容易出现过度问题)
opacity: 0.7, // opacity of title and navigation 图片下面的说明文字背景的透明度
titleSpeed: 500, // speed of title appereance in ms 标题消失的速度,毫秒单位
effect: ‘’, // random, swirl, rain, straight 变换样式,随机,漩涡,下雨,连续(自己试试就知道效果)
navigation: true, // prev next and buttons 是否显示前个、后个按钮
links : true, // show images as links 是否把图片当做一个链接
hoverPause: true // pause on hover 你把鼠标放上去的时候,图片是否继续变化

我们只需要像这样,填上自己定义的参数即可:

$(‘#coin-slider’).coinslider({ width: 900, navigation: false, delay: 5000 });

4,高级用法

在具体的使用过程中,它的默认样式,肯定不符合我的模板需求,所以我需要对它进行更加细致的修正。那就是通过css,官方的css文件里,你可以直接修改,你也可以新建css文件,对它进行定义。在火狐浏览器中,可以方便观看这个插件生成了些什么div标签,以及相应的id和class。既然你是高级用户,当然难不倒你,我只是在这里提一个思路,具体的就要靠你自己去修改了。

最后,打包一下本教程的资源,放上来。点击下载:coin-slider