位置: 编程技术 - 正文

各式各样的导航条效果css3结合jquery代码实现(有几种导航)

编辑:rootadmin

推荐整理分享各式各样的导航条效果css3结合jquery代码实现(有几种导航),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:导航的样子,各种导航地图,各式各样的导航图片,导航的样子,导航几种形式,各大导航的特点,各式各样的导航图片,各式各样的导航图片,内容如对您有帮助,希望把文章链接给更多的朋友!

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

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

1、高亮显示的导航条

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

效果图如下:

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

其中主要的知识点在于如何检测当前网页的网址和a标签中的href对应,然后相应地改变样式,在这里用了window.location.href的方法去获取网页当前的网站,用split()切割,最后一部分的内容就是我们想要的。在正常情况下,并不需要完全匹配整个网址,所以在这里用了substr()的方法匹配前几位字母。我在css文件中添加了on类,通过给a标签增加class=“on”,然后通过js中的addClass()方法就完成了功能。

2、中英文切换的导航条

先来看一下效果图:

我采用了两种方式实现,一种用css3,另一种是用jquery实现。

首先说一下用css3如何实现:

html:

css:

红色部分就是这个过程的实现,利用位置的变化,当鼠标移上去的时候,显示中文,也就是将英文移开,值得注意的是,需要利用overflow:hidden属性,将其隐藏。如果想要速度慢一点的话,可以利用transition属性设置变化时间,就可以减慢变化速度。

接着是用jquery实现:

css:

jquery:

实现功能的重点是animate()函数的实现,通过设置margin-top和时间实现,为了防止快速经过时,所有的都会变化(如下图所示),需要在animate()函数前面加上stop()函数,即在所有动画之前,先停止其他的动画,然后再开始这个动画。

3、带有弹性动画的导航条

各式各样的导航条效果css3结合jquery代码实现(有几种导航)

我采用了三种方式实现,第一种是css3,第二种是jquery,第三种是jquery easing实现。效果图如下:

因为三种的布局是一样的,所以就直接附上html的结构代码。

html:

第一种:css3实现

实现方法很简单,即刚开始让下拉的菜单隐藏,然后当鼠标经过的时候,将隐藏的菜单显示即可,具体实现代码如上的红色部分,这里不作详细讲解,代码很简单。

第二种:用jquery实现。 css:

jquery:

实现方法之前也讲过,在仿造百度换肤功能的部分,在这里采用的是slideDown()和slideUp()方法,如果想要设置变化时间,可以直接在括号中填入时间即可。

第三种:用jquery.easing实现。

css的样式跟用jquery实现的样式一样,这里就不增加空间再复制一遍了。

jquery:

使用这种方法实现时记得引进包jquery.easing.1.3.min.js(我用的是这个版本,大家可以自行在网上下载)。在这里重点说一下思路:当鼠标移动的时候, 弹性下拉菜单会跟随着下滑,当鼠标移开的时候,弹性下拉菜单会上滑,同样用到了前面所说的slideDown()和slideUp()方法,唯一不同的是在这里增加了动画,即采用easing实现,它其实就是类似于json的格式,插入duration和easing方式就可以,如果不懂里面的实现过程,可以查一下相关的说明文档,看看就会了。

4、摩擦运动动画跟随的导航条

实现思路就是:将鼠标移动的时候,把横条的位置移动到当前文字的下方。所以需要获取当前鼠标移动到的位置,即top和left,然后将横条的top和left相应地改变就可以实现,具体实现如下。

html:(这里只贴上一个页面的代码)

css:

jquery:

主要说几个方法的作用:

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

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

3)animate()实现动画效果;

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

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

标签: 有几种导航

本文链接地址:https://www.jiuchutong.com/biancheng/381995.html 转载请保留说明!

上一篇:使用Javascript实现选择下拉菜单互移并排序(js如何使用)

下一篇:jQuery实现简单的网页换肤效果示例(jquery简单例子)

  • 吴中区个体户如何办理
  • 进项税跟增值税
  • 防疫物资采购计入什么费用
  • 一般纳税人结转增值税的账务处理
  • 无形资产价值评估收费
  • 高新企业要求研发投入
  • 包装版费怎么计入生产成本
  • 营业外收入是否属于当期损益
  • 单位注册表从哪里获取
  • 固定资产减值必有损益吗
  • 库存盘盈如何入账
  • 劳务关系需要缴社保吗?
  • 库存商品检验合格标准
  • 季度交的企业所得税怎么做账
  • 进口关税发票账务处理如何进行?
  • 增值税普通发票可以抵扣吗
  • 农产品所得税扣除比例
  • 公司自持物业所承担的土地出让金是否可以抵扣呢?
  • 个税按计提申报还是按发放申报
  • 加计扣除10%进项税账务处理 如何填表
  • 转让土地使用权交什么税
  • 简易计税视同销售如何处理?
  • 投资性房地产公允价值模式账务处理
  • 广播影视服务需要交文化事业建设费吗
  • 转结本月工资
  • 文件夹属性没有安全
  • 水土保持补偿费是一次性征收吗
  • 交印花税会计分录怎么写
  • 进项税大于销项税会计分录月末
  • 商事账薄的特征
  • 抵押和质押的区别主要表现在哪些方面
  • 一般纳税人开出普票可以抵扣吗
  • 电脑重装win7系统后无法连接网络
  • ajax不刷新页面
  • 私立医院执行什么会计准则
  • 会计中在建工程与建筑安装工程的区别
  • 房屋租赁进项税
  • 赔偿金要交增值税吗
  • 收到发票后补付什么意思
  • 担保余值包括
  • 安徽4岁男孩户口已解决
  • 企业间合作建房且建成后自用
  • php文件上传用什么请求方法
  • php页面刷新代码
  • 开源项目有什么用
  • ChatGLM-6B:颠覆聊天AI的全新模型
  • vue.js如何安装
  • python 3.4.3 shell
  • 递延收益期限
  • 一般纳税人涉及进项税额转出的有
  • 员工辞退补偿金计算
  • 固定资产盘亏盘盈
  • 企业做账的流程图
  • 融资租赁缴纳什么税
  • 接待客人后的感受和过程
  • 已抵扣发票红冲做进项税转出
  • 实际费用以什么为准
  • 进口产品内销如何交税
  • 损益类账户属于资产还是负债
  • 营业收入和营业总收入一样吗
  • 成本会计做什么工作内容
  • 年初资产总额怎么算
  • 如何正确设置会员账号
  • mmc不能打开文件win10
  • WIN10系统如何彻底永久关闭自动更新?建议收藏!
  • os x 10.11 el capitan中文版上手体验评测
  • win10 u盘写保护
  • 升级win10错误
  • win8系统怎么设置桌面
  • 安装运行windows
  • android中文名
  • [置顶]游戏名 TentacleLocker
  • jquery左右滑动菜单
  • javascript数据结构与算法百度云视频资源
  • 个人出租住房增值税免税政策
  • 责令立即改正和责令限期整改
  • 如何当好一名税务局长
  • 企业税费如何计算
  • 医生兼职取酬违反什么纪律
  • 关于企业所得税的说法
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设