HTML & CSS » CSS和jQuery的五个实用技巧

CSS和jQuery的五个实用技巧

发表于: HTML & CSS. 评论
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

推荐:查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com
交流:为设计新人提供的设计交流群,请加入UI设计交流群,分享经验、接单、求职、聊设计。
赞助商链接
赞助商链接
设计达人微信交流社区:shejidaren888
喜欢这篇文章吗?欢迎分享到你的微博、QQ群,并关注我们的微博,谢谢支持。
版权:除非注明,本站文章均为原创文章,转载请联系我们授权,否则禁止转载。

{ 发表评论 }