实现网页换肤功能的最优解(带 Cookie 记录功能)

网页换肤是一门老技术了,老的现在都不怎么流行了。但是,有时候有些客户就是想要这个换肤功能。于是就实践做了一下网页换肤,结果遇到了很多问题。

网页换肤的基本原理

基本原理很简单,就是使用 JS 切换对应的 CSS 样式表。例如导航网站 Hao123 的右上方就有网页换肤功能。除了切换 CSS 样式表文件之外,通常的网页换肤还需要通过 Cookie 来记录用户之前更换过的皮肤,这样下次用户访问的时候,就可以自动使用上次用户配置的选项。

那么基本工作流程就出来了:访问网页——JS 读取 Cookie ——如果没有,使用默认皮肤——如果有,使用指定皮肤;用户点击换肤选项——JS 控制替换对应的 CSS 样式表——将皮肤选项写进 Cookie 保存。

网页换肤事先需要的准备

首先你可能要准备多套 CSS 样式表文件,当点击换肤按钮的是,使用 JS 来切换对应的 CSS 样式表。之后,就是在网页上增加一个 ul li 列表,用 CSS 修饰一下做成换肤选项。例如:

网页中的换肤选项

下面我们就来看具体功能代码。

实现点击切换对应 CSS 功能

首先,我们的皮肤选项的 HTML 结构是这样的

<div class="skin">
    <ul>
        <li class="skin1 hover"></li>
        <li class="skin2"></li>
        <li class="skin3"></li>
        <li class="skin4"></li>
    </ul>
</div>

然后在网页的顶部偏下的位置放上一个空的 link 标签,我们将会使用 jQuery 为这个 link 标签赋予不同的 CSS 文件实现切换效果

<link rel="stylesheet" href="" data-href="style-Teal.css" type="text/css" media="screen" class="skincsslittle" />

其中,我自定义了一个 data-href 属性来存放系统默认的皮肤,这样当页面加载完成之后,如果 JS 没有检测到 Cookie 中的皮肤信息,就会把 data-href 中的内容赋值上去。之后就是大家熟悉的 jQuery 代码:

jQuery('.skin li').click(function(){
    var currentClass = jQuery(this).attr('class');
    jQuery(this).siblings().removeClass('hover');
    jQuery(this).addClass('hover');
    var cc = currentClass.substring(0,5);
    cc = convertcsslittle(cc);
    var skincssurl = jQuery('.stylecssurl').attr('href').substring(0,jQuery('.stylecssurl').attr('href').indexOf('style')) + cc;
    jQuery('.skincsslittle').attr("href",skincssurl);

    createCookie('skin',currentClass,365);
});

大体的逻辑就是获取到当前皮肤的 class 然后截取出来 skin* 然后通过一个函数得到其对应的 CSS 文件。skincssurl 记载的是网页的非皮肤 CSS 文件,主要用来获取当前网页的 CSS 目录 URL ,最后将混合好的 CSS 皮肤文件赋值准备好的空 link 中,实现换肤。

这里主要用到两个自定义的函数,用来创建、读取 Cookie 内容。

function readCookie(name) {
  var nameEQ = name + "=";
  var ca = document.cookie.split(';');
  for(var i=0;i < ca.length;i++) {
    var c = ca[i];
    while (c.charAt(0)==' ') c = c.substring(1,c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
  }
  return false;
}

function createCookie(name,value,days) {
    if (days) {
        var date = new Date();
        date.setTime(date.getTime()+(days*24*60*60*1000));
        var expires = "; expires="+date.toGMTString();
    }
    else expires = "";
    document.cookie = name+"="+value+expires+"; path=/";
}

你只需要把这两个函数复制到 JS 代码区域即可。在 jQuery 点击换肤的功能代码中,最后一句就创建了一个 Cookie,等网页加载完成之后,我们需要使用 JS 读取 Cookie 内容,然后使用 if 判断:

var cccc = readCookie("skin");

if (cccc){
    cccc = cccc.substring(0,5);
    jQuery('.'+cccc).addClass('hover').siblings().removeClass('hover');
    ccc = convertcsslittle(cccc);
    var skincssurl = jQuery('.stylecssurl').attr('href').substring(0,jQuery('.stylecssurl').attr('href').indexOf('style')) + ccc;
    jQuery('.skincsslittle').attr("href",skincssurl);
}else{
    var currentcss = jQuery('.skincsslittle').attr("data-href");
    var currentcssname = currentcss.substring(currentcss.indexOf('style'),currentcss.length);
    currentcssname = defaulttoclass(currentcssname);
    jQuery('.'+currentcssname).addClass('hover').siblings().removeClass('hover');
    jQuery('.skincsslittle').attr("href",jQuery('.skincsslittle').attr("data-href"));
}

不要被这么乱的代码吓晕了,实际上逻辑很简单,先获取 Cookie 的皮肤值,如果有就为对应的皮肤选项高亮并且转换得到对应的 CSS 皮肤文件赋值。如果没有 Cookie 内容,就将 data-href 属性中记录的值赋值进去。

网页换肤的闪烁问题和不完美解决方案

网页换肤中,会遇到闪烁的问题。就是当点击切换按钮的时候,更换颜色或者图片会闪烁一下。或者使用 Cookie 记录之后,用户使用了非默认的皮肤,也会闪烁一下,先出现默认的样式然后再闪烁切换成用户自己选择的样式。

这种影响用户体验的现象肯定要彻底消灭,但是一直没有找到完美的解决方法。因为浏览器默认的是优先渲染 CSS 之后再加载 JS,特别是使用 Cookie 记录的皮肤,先渲染现有的 CSS 之后,JS 才能读取然后切换到皮肤。原理是这样的,跟客户协商之后,客户给出了一个“无闪烁”的换肤效果示例,是 MG12 很早的一款主题。同样的 Cookie 记录等,但是他的作品确实没有闪烁情况。

于是我就查看了他的 JS 代码,没有发现特殊之处,后来才想明白,这种闪烁问题,在图片比较多的网页中效果尤其明显,因为切换的 CSS 需要加载图片需要更多时间。而 MG12 那款主题中,切换的 CSS 文件只是改变了几个 background 颜色,加载速度快到你眼球反应不过来就造成了不闪烁的假象。

不完美解决方案也是有的,点击切换按钮之后的闪烁情况,也是因为要加载图片等,那么我们可以在访问网页的时候,使用预加载技术将其他皮肤图片预加载或者使用 CSS Sprite 技术做成一张大图片。

至于 Cookie 记录闪烁的问题,这是浏览器渲染的硬伤,只能尽量减少换肤需要改变的地方,尽量压缩图片减小体积。然后优先加载没有任何皮肤的基础样式,之后使用 JS 加载默认样式或者读取 Cookie 获取的皮肤选项。这样处理,访问网页的时候会先显示白色或者无颜色,之后直接切换成之前选择的皮肤的颜色,而不会从默认的颜色闪烁变成另一种颜色从而提升一定的用户体验。

如果你在这方面有经验,知道更好的解决闪烁问题的方法,麻烦跟我说一下哈,先谢过了!

在页面中添加滚动一定距离后跟随滚动模块的方法和注意事项

现在在网页中,经常可以看到一些滚动跟随模块。比较常见的两种场景:

  1. 页面滚动到了导航条位置,然后导航条就固定到页面顶端,跟随滚动
  2. 边栏高度不如正文高,滚动到边栏末端,出现一个跟随页面的滚动的边栏模块
    本文就是来介绍如何实现这个效果,并且解决这个效果带来的一些问题。

实现的基本原理

固定到页面的某个位置,并且跟随页面滚动,实际上就是用到了一个 CSS 中的 position 属性值 fixed。对 HTML 对象指定 position 属性为 fixed 之后,这个对象就会保证位置不变,跟随页面滚动。但是这个属性在早期的 IE 浏览器中是不支持的,有很多 hack 方法,在这里不再赘述。

那么,要想实现 滚动一定距离 之后,某个模块跟随页面滚动,要做的就是用 Javascript 来监控页面的滚动事件,判断滚动距离是否达到目标位置,然后对要跟随滚动的模块修改 position 属性为 fixed。当然,也可以提前做好一个滚动跟随模块,用 display 属性隐藏起来,等滚动到了一定距离,取消显示。至于怎么出现和出现什么内容,就看你自己的需求了。用 jQuery 监控方法如下:

$(window).scroll(function(){
if ($(window).scrollTop()>64){
$(“#menu”).css({position:”fixed”,left:”0px”,top:”0px”});
}else{
$(“#menu”).css({position: “relative”});
}
});

这里,对 window 对象使用 jQuery 的 scroll 方法,用来监控滚动事件。当页面滚动的时候,就会触发定义的函数。函数的功能也比较简单,使用 scrollTop 方法来获取当前网页滚动的位置距离页面顶部多高(单位 px),然后用 if 语句判断,当滚动距离页面顶端超过 64px 之后,就对 id 为 menu 的模块修改 CSS 样式,让它跟随页面滚动。当小于这个高度的时候,再修改回去。

虽然功能比较简陋,但大体的原理就是这样,更多具体的效果,请自由发挥。

两个跟随滚动插件

神说,这么好的效果应该做成插件,于是就有了插件。这里简单的介绍两款基于 jQuery 的插件:Sidebar FollowScroll Follow

这是 mg12 写的一个小插件,代码比较少,功能也比较简单,所以使用起来就比较方便。看名字就可以知道,主要用于边栏模块的跟随滚动。代码页比较少,有兴趣的同学可以看一下。

Sidebar Follow官方主页和使用说明

Scroll Follow

这是个比较老功能比较强大的插件,可以实现各种你想要的跟随滚动效果。具体的下载地址和使用方法,也不再赘述了。

Scroll Follow官方主页和使用说明

添加跟随滚动模块的注意事项

本文介绍的技术其实没有什么技术含量,写本文的最主要的目的,是想介绍下面这两个注意事项。

尽量少的使用

再好的功能,也要适度使用。屏幕的空间本来就有限,加上一个很高的导航条,再加上左下角、右下角的广告,右边再来个边栏跟随,这样的页面你如何才能专注的看正文内容?所以要尽量多的留出浏览者阅读的空间,适度的补充内容,尽量保证页面的整洁。才能有一个比较好的用户体验。

设置合理的结构防止页面塌陷

这个问题才是本文的重点,网上很多采用这个效果的页面都中了这个问题。先来看看问题演示 demo

塌陷的具体问题效果很明显,就是下面的内容突然跑上去了,产生了回流(reflow)。回流简单的说,就是当你页面中某个部分突然消失了,浏览器就需要重新渲染网页的内容。潜行者M的 Demo 页面由于结构比较简单,所以具体效果只是内容突然上去而已。但是对于结构比较复杂、代码比较多的网站来说,一旦出现回流,浏览器就要重新计算渲染,页面就会卡一下子。如果浏览者的电脑配置比较低,甚至会卡一下电脑。如果浏览者的浏览器版本比较低,可能会导致页面错乱。

事关用户体验的问题,是不能容忍的。问题的原因,就是突然改变了相关结构的 CSS 属性导致。就本例而言,原来的导航条 position 属性是 relative ,在页面中占据一定空间。突然改成了 fixed 脱离了文档流,自然浏览器要把原来位置补上,重新渲染。

所以,在设计页面跟随滚动模块之前,一定要考虑到这个细节。最好设置比较好的 HTML 结构,撑起来。也可以在要滚动的模块外面包裹一层结构,用来占位。也可以在一开始,就让滚动模块脱离文档流。潜行者M的建议是,最好专门设置一个用来滚动的模块,先隐藏,然后触发显示。

用 jQuery 制作一个简单的遮罩弹窗效果教程

客户的网站上突然需要一个遮罩弹窗效果,也可以称作暗箱之类的,具体效果就是网页中背景变成半透明,然后在屏幕中间出现一个菜单之类的东西。这种效果在网上很常见,例如:QQ空间浏览相册等。这种效果的好处就是,可以让用户聚焦到弹出的菜单中。

神说,有代码的文章,应该有个 Demo ,于是就有了 Demo

HTML 结构

首先先来分析一下这个过程:触发某个事件(例如点击按钮),然后出现一个背景遮罩上面还有一个内容层。触发的按钮,我在这里用 div 来代替,并且使用 click 点击事件来演示。那么我们的 HTML 结构就很明确了。

 <div class="click">点击这里</div>
 <div class="click1">效果增强版的</div>
 <div class="bg"></div>
 <div class="content">这里是正文内容</div>

CSS 代码

对于遮罩效果的 CSS 代码是最关键的。遮罩用到了两个 div ,一个作为背景,要覆盖整个网页,另一个是内容显示层,通常要居中处理。

.bg{display:none;position:fixed;width:100%;height:100%;background:#000;z-index:2;top:0;left:0;opacity:0.7;}
.content{display:none;width:500px;height:300px;position:fixed;top:50%;margin-top:-150px;background:#fff;z-index:3;left:50%;margin-left:-250px;}

简单解释一下,首先要隐藏起来,之后用 jQuery 触发显示。之后指定 position 的属性为 fixed,因为这样,才能激活 top 、left 、bottom 、right 、z-index这些属性,同时可以设置 width 、height 为 100% 来实现覆盖整个网页。通常情况下,一般用 absolute 属性值来实现这种效果,因为它的兼容性更好。但是在实际应用当中,当页面很长,往下滚动的时候,使用 absolute 遮罩层也会跟随滚动。对于内容层来说,比较简单,指定宽度和高度用负边距来使其居中显示。

特别要注意一点,背景层的半透明使用的是 opacity 属性,因为使用这个属性可以更好的用 jQuery 来控制。但是 fixed 、opacity 都是早期 IE 浏览器不支持的。

jQuery 代码

分析一下遮罩的交互操作,无非就是点击弹出,然后点击一下遮罩,消失。那么就直接对 CSS 进行操作即可。

   $(function(){
$(‘.click’).click(function(){
$(‘.bg’).css({‘display’:’block’});
$(‘.content’).css({‘display’:’block’});
});
$(‘.bg’).click(function(){
$(‘.bg’).css({‘display’:’none’});
$(‘.content’).css({‘display’:’none’});
});
});

这里直接使用 CSS 方法,当点击的时候改变 display 属性,此外还有很多实现方法,不再赘述。完成这些,当我们点击“点击这里”之后,就可以看到效果了。

更多技巧和方法

更平缓的显示

点击之后,突然出现并不是一个好方法。所以我又增加了一个按钮,点击之后通过 fadeIn、fadeOut 方法来控制渐隐。

 $(‘.click1’).click(function(){
$(‘.bg’).fadeIn(200);
$(‘.content’).fadeIn(400);
});
$(‘.bg’).click(function(){
$(‘.bg’).fadeOut(800);
$(‘.content’).fadeOut(800);
});

这样简单的方法,就增强了用户体验。当然,还有一些更高级的效果可以实现。

其他的实现方法

现在的方法确实足够简单,但是兼容性不够好,对于早期的 IE 浏览器不兼容。通常的做法是这样的:用 Javascript 获取整个网页的高度、宽度,赋值给遮罩层,这样即使打开遮罩滚动网页,也不会出现没有遮罩的地方。具体的代码和实现方式,请看这篇文章:简单的jQuery弹出遮罩层

差不多就是这样吧,至于内容层的展示之类的,就靠你根据具体内容自由发挥了。

网页中代码的顺序是不可忽略的细节

仿佛奇怪的问题总是喜欢找上那些初学者。当我在学习制作网页的时候,经常遇到一些很特别的问题。例如:刚刚添加的样式不起作用、jQuery的代码老是不起作用等等。这往往是不关注细节导致的。而今天我要谈的这个细节,就是关于网页中代码的顺序。没错,代码也是有顺序的,顺序不对有可能会出现一些意外的情况。

HTML 相关的代码顺序

下面先来介绍 HTML 中的代码顺序。

HTML 代码的排序原理

排序原理很简单,因为当浏览器访问一个网页的时候,要下载这个网页。现在的网速,对于一个几百K的网页来说,很快就能下载完。但是如果网页比较大或者网速比较卡,网页下载就会需要一定的时间。这样的话,浏览器显示网页的过程就很明显了。从 HTML 代码的上到下,依次下载。重要的内容要优先加载,所以就产生了 HTML 代码排序的问题。

head 里面的元素排序

HTML 中的 head 元素里面,通常放置着文档的描述信息。一般有:网页编码、title标题、meta 描述网页关键字、link 引入 CSS 文件、script 引入 Javascript 文件等等。下面就这几个内容进行一个讨论(以 HTML5 为例):

首先,先是标准的 DOCTYPE 声明、HTML 结构那一套。

<!DOCTYPE html>
<html>
<head></head>
<body></body>
</html>
其次,编写网页编码,我个人认为编码是网页中最重要的,因为它决定浏览器采用什么编码来解析你的网页,如果编码没有设置好的话,网页显示出来就是一整个乱码。关于网页编码的更详细的文章,可以看一下 [潜行者m](http://www.qianxingzhem.com) 写的 [网页编码就是那点事](http://www.qianxingzhem.com/post-1499.html) 。编码写完之后,应该让浏览器立刻显示出网页的标题,这时候就应该写出 title 标题了。
<meta charset="utf-8" />
<title>标题</title>
接下来,就应该是声明文档的各种信息,例如 关键词、描述、作者等等信息。之后就要加载 CSS 样式表。让浏览器先下载好 CSS 样式表,之后下载的网页内容,就会立刻加上 CSS 的样式效果,谁也不希望打开网页的时候,是没有样式的,然后加载完内容之后才出现正常的页面。这也就是为什么 CSS 引用要写在 head 里面。
<meta name="keywords" content="潜行者m,网站建设,前端设计,Web开发" />
<meta name="description" content="潜行者m 博客,是由 潜行者m 个人设计制作,完全原创写作,关注网站建设/前端设计/Web开发相关的独立博客。欢迎各位观看学习,并且与本人交流!!" />

<link rel="stylesheet" type="text/css" media="screen" href="http://www.qianxingzhem.com/wp-content/themes/qetro/style.css"/>
关于 JavaScript 的位置一直比较有争议。因为 JavaScript 比较灵活,可以添加在页面的任何位置。通常推荐的是加在页面的最底部。因为JavaScript 文件通常比较大,浏览器下载比较费时间,由于 JavaScript 可能会影响到当前页面的结构内容,所以浏览器通常会先下载完JavaScript 代码,“运行” 之后,再下载网页的正文内容。这就导致了加载速度比较慢,因为要先加载 JavaScript 代码才会显示网页内容。所以要放在页面底部。这样浏览器会先下载网页的内容显示出来,然后再下载 JavaScript 对当前的网页进行处理。 ### body 主体内容的排序 前面说过浏览器先依次下载网页然后显示,那么网页主体内容的排版布局就很明显了:**重要的内容排在前面**。 例如一个博客类型的网页,最重要的内容肯定是 文章 。所以文章的内容要尽量放在网页的顶部。虽然它可能要显示在下面,但是也要放在代码的上面,然后通过 CSS 布局等放在下面。当网速很卡的时候,排版合理的博客很明显就可以看到,先显示出来头部、文章主体内容,之后再显示 边栏、底部 内容。这就是为了让用户最快的看到他们想要看的内容,即使网速很卡下载很慢,内容出来了边栏等都下载不下来,用户也会得到他需要的内容。这就是 body 元素里面的代码排序原则。 ## CSS 代码的排序 CSS中有很多排序的小细节需要注意,不注意的话很有可能就出现一些意外情况。 ### 顺序解决样式冲突问题 当你对一个元素赋予了 background-color 属性,你在其他地方,忘了之前的设置,又对这个元素赋予了一个属性值与之前不同的 background-color 属性。那么浏览器究竟会对这个元素渲染哪一个背景颜色呢?答案是代码排在后面的属性值。冲突的内容,后面的属性值就会覆盖前面的属性值。因此要注意,一些 [CSS reset](http://www.qianxingzhem.com/post-610.html) 等要先加载,然后在后面加载自己写的属性值。例如:CSS reset 通常会取消 strong 的加粗,但有时我们的网页作品中,要 strong 显示成加粗效果,所以我们要设置 strong{font-weight:bold;} 这样的样式。但如果 CSS reset 代码放在后面,它之前对 strong 的取消加粗属性就会覆盖掉你的 加粗效果。所以无论刷新网页多少遍,你的 strong 标签里面的内容,还没有加粗。 如果有时候,你真的无法修改加载文件的顺序,那么面对这种情况,你可以使用 CSS 中的 !important 语法,告诉浏览器要使用这个属性解决冲突。 ### 链接的交互排序 一个超链接,默认是蓝色的,当我们把鼠标移动上去,会变色,点击的过程也会变色,访问过后回来一看,通常也不会是原来的蓝色了。控制这些颜色的,分别是 CSS 中的 :link 、:visited 、:hover、:active 这四个伪类选择器,从名称就可以看出,控制的状态分别是:默认显示、访问过后、鼠标移动上去、点击激活。有时候会出现一些意外情况,例如:同时设置了 :visited 和 :hover 的样式,但一旦超链接访问后,hover 的样式就不出现了等。这是因为,这四个伪类选择器对 a 元素定义的时候,是有一个顺序的。如果不按照这个顺序,就会出现一些意外情况。 这个顺序有一个很好记的方法,那就是:love hate,即 l(link)ov(visited)e h(hover )a(active)te。
a:link{color:#666666; text-decoration:none;}
a:visited{color:#666666; text-decoration:none;}
a:hover{color:#666666; text-decoration:underline;}
a:active{color:#666666; text-decoration:none;}

属性值的顺序

CSS 中,有的属性既可以分开写,也可以合并起来写。例如 margin 属性,你可以分别制定 margin-left 、margin-right、margin-top、margin-bottom 的值,也可以直接写成 margin:top right bottom left; 也可以写两个参数,分别代表上下和左右的外边距。这样的写法简练而且灵活,但是对不熟练的新手来说,比较容易搞混。当类似 margin 、 padding 这样的属性,写四个参数的时候,以 top 开始,顺时针旋转。

除此之外,还有类似 font、background 这样的属性,它的属性值也要有顺序(虽然对顺序要求不严格),它们的参数有缺省值,所以不需要全部定义,只需要定义自己需要的样式即可。但是 border 这样的属性,就必须严格的按照语法编写属性值的顺序。例如:border :1px solid #ccc;如果 1px solid #ccc 这三个值的顺序出问题了,那么浏览器就可能无法解读这段 CSS 的样式。

JavaScript 代码的顺序

JavaScript 文件加载顺序

jQuery 是一个比较常用的 JavaScript 库,通常我们还要配合它强大的插件使用。对于新手来说,经常会遇到没有产生相应效果的问题。就是说,代码没有检查出问题,但就是没有执行显示应有的效果。原因就出在加载顺序上面。你编写的 JavaScript 代码以及调用的 jQuery 插件,都需要基于 jQuery 库,所以应该在所有 JavaScript 代码之前,先引入 jQuery 库。浏览器先把库下载完了,才会识别后面的依赖这个库的代码实现相应的功能。同样的,激活使用某个插件的代码,也需要放在插件的后面才会有效。

<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery/jquery.lazyload.js"></script>
<script type="text/javascript" src="jquery/插件.js"></script>
<script type="text/javascript" src="自己编写的js/js.js"></script>

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

这次,潜行者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 介绍一下自创的名词“工具边栏”。现在大家在浏览网站的时候,经常会发现一些浮动的条状栏,通常具有向上向下的功能,当你点击一下,就可以方便的回到顶部或者前往底部。其实打造这样一个工具边栏,并不是很难,使用 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

使用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