CSS和jQuery的五个实用技巧

Sponsor

CSS3和JavaScript技巧有很多，创建独特的互动式网站比以往任何时候都容易。在这篇文章中，我们会了解五个你很快可以上手的互动式技巧：

1. 生动的文本效果。

2. 不使用GIF的动态图像。

3. 更吸引人的下拉菜单。

4. 幻灯导航。

5. 悬停状态的动态图标。

在学习如何完成这些特定技巧的同时，你会学着运用CSS和jQuery小窍门创建自己的互动式技巧。

1. 突出式文本效果

David DeSandro的网站页脚在鼠标经过时会出现突出式文本效果。这种互动式文本效果可以用最快的方式为网站带来亮点。只需要几行CSS3代码，就可以让页面文本显示出立体效果。

http://desandro.com/

首先，让我们设置一个文本（代码是从原网页复制过来的）：

样本链接（http://jonraasch.com/demo/extrude-on-hover）

添加一些基本的风格：

这里，我们应用了基本风格并添加了text-shaow。 不过这个文本阴影并不会呈现立体效果；为了实现凸显效果，我们还要添加更多阴影：

我们为文本添加了三种不同的文本阴影，三个重叠在一起来呈现立体效果。

悬停状态的风格设置

下一步，我们为悬停状态添加更大阴影：

这里添加了另外三种文本阴影增加凸显深度。为了使其更立体并出现动态效果，还需进行以下处理：

动态转变

添加CSS3实现变色和突出效果：

这可以在鼠标悬停时出发不同动态效果。但不一定适用于所有浏览器。

2. 动态背景图

虽然我们可以用几行代码轻松实现动态文本，但是动态图片则需要更多元素，如动态gif图，Flash或HTML5视频。虽然复杂的动画要依赖于这些技术，但我们可以仅用CSS创建动态错觉。

Love Nonsense使用悬停效果来替换网页图像颜色。技巧是使用带有背景色的透明PNG。PNG的颜色应与背景色相称，这样当背景色填充满后， PNG中的透明区域会显示出来。因此，PNG应该包含图片的阴性空间。

样本效果：

（http://coding.smashingmagazine.com/2011/06/16/five-useful-interactive-css-jquery-techniques-deconstruted/）

代码

样本效果：

（http://coding.smashingmagazine.com/2011/06/16/five-useful-interactive-css-jquery-techniques-deconstruted/）

首先，让我们做一些基本的mark-up：

然后，设置一些静态风格：

现在，看一下悬停效果：

当我们悬停在标题或图像上时，二者都会变色。可以再添加一点动态变化：

这里，我们为图像和标题都添加了CSS3变化，可以让变色看起来更自然。遗憾的是IE9不支持此功 能。尽管如此，变色还是有的只是没了动态效果不够自然。可以提供jQuery版本的动态变化效果来弥补这一点。jQuery的anomate() 方法不支持变色，所以应使用颜色插件。

将所有CSS放在一起就是：

3. Mega下拉菜单

下拉菜单常见的设计难题是它们通常都包含了大量项目。与其在单一的长列表中显示所有项目，不如学Bohemia Design使用一个多栏目的下拉菜单。样本效果（http://jonraasch.com/demo/huge-dropdown-menu）

创建标签

首先使用一个简单的mark-up :

使用nav li a, nav > li 或nav li对导航中的列表项目的风格设置。IE6不支持Child选择器，而由于下拉菜单的内容区域有额外的LI，所以nav li会出现故障。如果你的用户群里有IE6用户，可以使用下面的代码：

然后，对五个标签设置风格：

首先，我们对整个标签区域的长宽都进行了定义，而且匹配了五个标签的所有长和宽，这样我们可以准确地放置下拉菜单。下一步，对标签墙纸定义了position:relative，这样就可以准确定位下拉菜单。

再向列表墙纸中添加list-style:none，再将display:inline添加到每个列表项目，来消除列表风格。最后，将所有标签链接到左边。

创建下拉菜单

现在，让我们在标签墙纸中创建一个下拉mark-up ：

对下拉菜单进行风格设置：

在所有栏目墙纸桑设置display: table-cell，这样就会一个接一个显示出来。不过IE6或7不支持table-cell，所以我们使用attribute hack作为替代。于是用float: left就可以供不支持的IE使用了，还可以用display: table-cell，浮动要素的高度若不匹配，栏目边界看起来会不整齐。

增加互动

用jQuery添加一个类来隐藏或显示下拉菜单：

将hover listener添加到每个项目就移除了main-nav-item-active类。不要把这个添加到标签本身而应该是列表项目，否则用户移动鼠标到标签或菜单区域的时候，菜单会消失。使用这个类来隐藏和显示下拉菜单：

使用active类对激活标签定义风格：

定位下拉菜单

准确定位还需要使用下列代码：

jQuery的position()方法在当前标签中获得left offset。使用这个值将下拉菜单准确定位到标签合适位置。但是还可能出现下拉菜单伸出标签区域的情况，可以用JavaScript对其进行修复：

4. 动态幻灯导航

JavaScript幻灯技巧有很多，不过Mckinney网站的动态导航很新颖很精致。

样本效果（http://jonraasch.com/demo/fancy-slideshow-navigation）

基础jQuery幻灯

先用mark-up做好基础幻灯：

此处，我们设置了六个幻灯。然后再设置一些CSS来水平显示幻灯。

基础幻灯动画

下面要添加一些jQuery来实现幻灯动态变化效果：

左右导航

下一步，用mark-up在幻灯中创建左右箭头：

简便起见，我们在HTML源代码中添加了mark-up。将其加入jQuery中不失为一个好方法，可以确保该控件只在访客使用的时候出现。用CSS对箭头设置风格：

在示例中，我们使用了CSS 三角形技巧对箭头进行风格设置，如果你需要其他图像也可使用其他图像。最后在JavaScript中创建互动。

底部导航动态效果

下面是创建动态效果的jQuery代码

5. 动态图标

用户鼠标经过图标的时候，CSS可以在其页脚制造简洁大方的效果。颜色变化的同时，还会增加一个图标，这个效果支持变换风格的浏览器中是动态呈现的，所以看起来就像是图标滑了出来。

样本效果（http://jonraasch.com/demo/animated-icons）

先用mark-up创建类似效果：

注意这个mark-up中的要素中有block要素，这更符合语义要求，但仅在使用HTML5 的文件中有效。

按钮风格设置

先创建基础CSS对block进行风格设置（非悬停状态）：

添加静态悬停效果来变色和添加阴影：

最后，添加要出现在悬停位置的背景图像：

动态变化

添加变换：

最后，将所有风格设置放在一起：

总结

这篇文章介绍了几种增加网页风格和创意的互动式技巧。使用得当的话，它们可以改进网页，带来更佳的用户体验。不过，这些精妙的互动式装饰并非网站的基本功能。网页的最主要功能仍然是提供有价值的内容。

来源:e800.com.cn

赞助商链接

喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。
版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。