各式各样的导航条效果css3结合jquery代码实现

前端之家收集整理的这篇文章主要介绍了各式各样的导航条效果css3结合jquery代码实现前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

导航条的使用很广,每个网站都会做出具有自己特色的导航条。最近特地去了解了各种类型的导航条,比如具有高亮显示的导航条,中英文互相切换的导航条,具有弹性动画的导航条,甚至是具有摩擦运动动画的导航条(文字下面有横线)等。每种导航条都有自己的特色,比如高亮显示的导航条看起来比较简单,但是视觉效果还不错,具有动画效果的导航条在视觉上也是有很好的效果

接下来将会一一介绍4种应用比较广的导航条,即:高亮显示的导航条,中英文互相切换的导航条,具有弹性动画的导航条,具有摩擦运动动画的导航条。

1、高亮显示的导航条

这种导航条:当你点击某一个导航时,就让他高亮显示,其他的默认原来的样式,也就是说在不改变菜单CSS代码的情况下,用Js控制菜单的背景,假如该菜单项被点击后,将赋予它一个与众不同的背景颜色或背景图像,这样可以清淅的指引用户下在浏览的网站栏目,简单方便而且效果好。

效果图如下:

html:(这里省略了其他html文件代码,只贴出一个index.html的代码

<Meta charset="UTF-8"> <a href="/tag/shouye/" target="_blank" class="keywords">首页</a>

css:

jquery:

主要说几个方法的作用:

1)outerwidth()获取元素的宽度(因为文字的个数不同,宽度就不一样,为了好看,横条需要适应文字的宽度);

2)position().left获取元素的位置中left的值;

3)animate()实现动画效果

4)duration和easing都是jquery easing插件内容,即设置动画的效果

在这里,所有的分享就结束了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

猜你在找的jQuery相关文章