位置: 编程技术 - 正文

jQuery+CSS3实现四种应用广泛的导航条制作实例详解(jquery中的css方法)

编辑:rootadmin

推荐整理分享jQuery+CSS3实现四种应用广泛的导航条制作实例详解(jquery中的css方法),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:jqueryw3c,jquery中的css方法,jquery中的css方法,jquery silbings,jquery silbings,jquery使用css,jquery使用css,jquery silbings,内容如对您有帮助,希望把文章链接给更多的朋友!

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

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

1、高亮显示的导航条

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

效果图如下:

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

css:

jquery:

其中主要的知识点在于如何检测当前网页的网址和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()函数,即在所有动画之前,先停止其他的动画,然后再开始这个动画。

jQuery+CSS3实现四种应用广泛的导航条制作实例详解(jquery中的css方法)

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

我采用了三种方式实现,第一种是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插件的内容,即设置动画的效果。

以上所述是小编给大家介绍的jQuery+CSS3实现四种应用广泛的导航条制作实例详解,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的,在此也非常感谢大家对积木网网站的支持!

jQuery判断是否存在滚动条的简单方法 利用jQuery控制滚动条滚动,再判断滚动条是否有偏移。如果有,则存在滚动条,相反没有滚动就不存在。scripttype="text/javascript"$(function(){$("body").scrollTop(1

jQuery leonaScroll 1.1 自定义滚动条插件(推荐) leonaScroll-1.1最新版leonaScroll-1.1.js欢迎使用leonaScroll-1.1.js,如您在使用过程中发现更多问题,欢迎指正!更新:1.1版本1、修复了前面初始版本中的一些bug

使用JQuery选择HTML遍历函数的方法 使用JQuery,可以很容易的选择THML元素。但在有些时候,HTML结构比较复杂的时候,提炼我们选择的元素就是一件比较麻烦的事情。1、children这个函数得到

标签: jquery中的css方法

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

上一篇:jQuery中常用动画效果函数(日常整理)(jquery中常用动画方法有哪些)

下一篇:jQuery判断是否存在滚动条的简单方法(jquery判断值是否为空)

  • 增值税发票综合服务平台怎么下载
  • 当月红冲发票账务怎么处理
  • 生产车间的办公用品费计入
  • 股东分红需要开股东会决定吗?
  • 投资现金流是负的说明什么
  • 金融债券的利息收入
  • 城建税属于什么税种
  • 待抵扣进项税额和待认证进项税额的区别
  • 融资租赁会计核算的一般原则是什么
  • 企业年金也需要缴纳吗
  • 股息红利所得如何缴纳个人所得税
  • 应付账款不用付怎么处理
  • 自然人能申请破产吗?
  • 何为自然人股东
  • 工程款增值税怎么算
  • 住宿服务住宿服务可以么
  • 自然人股东转让股权如何避税
  • 小规模纳税人需要汇算清缴吗
  • 一般纳税人普通发票要交增值税吗
  • 污水处理增值税征收品目
  • 员工离职补偿金可以税前扣除吗
  • 企业有哪些资金结构
  • 企业为职工缴纳的五险一金占工资总额的多少
  • 购进货物无偿赠送其他单位
  • 应收账款周转率高说明
  • 房屋出租预收租金房产税纳税义务发生时间
  • 成本核算的意义是什么
  • 银行保证金账务处理流程
  • deepin 20 wifi
  • 政府性基金收入来源
  • 内置管理员无法激活
  • 金针菜的养殖方法和技术
  • 材料发票可以抵税吗
  • 对公帐户收款
  • PHP:ftp_delete()的用法_FTP函数
  • php数组函数实现机选双色球
  • 税务发票上的账户是对公账户吗
  • 小茴香的栽培技术
  • php 数据库操作
  • 新西兰南岛西南部
  • 怎么用html做一个收藏夹
  • 在双方发生纠纷时品牌授权书的法律意义
  • 预算会计组成体系不包括
  • 钉钉工资表如何生成工资条?
  • 出口退税方法相关文献
  • 固定资产入账的方式
  • pythonjam怎么用
  • ps橡皮擦工具的作用是什么
  • 境外汇款收款人承担手续费
  • 管理不善的进项税额去了哪里
  • 财务报表年报应怎么做
  • SQL server配置管理器打开TCP/IP后重启不了
  • mysql1290报错
  • 企业固定资产账户核算的固定资产其所有权均属于本企业
  • 含税含运费价格,运费谁出
  • sql中order by的用法
  • 财务费用应付利息
  • 服装租赁费的税率是多少
  • 其他收益会计科目核算什么
  • 接受捐赠做账
  • 固定资产到期后继续使用称为什么
  • 出售固定资产怎样报增值税申报表
  • 债券票面利率与期限成正比
  • 买辆车要交多少税
  • win10快速访问在哪
  • 系统更新win10
  • 只需2招 让Win10运行速度更加迅速
  • perl中的$1
  • cocos2dx小游戏
  • css网站布局实录 pdf
  • linux进程运行的两种方式
  • 你知道python不
  • shell脚本识别十六进制数
  • js设计模型
  • 国家税务系统
  • 四川税务局网上办事大厅
  • 饲料的税收优惠政策
  • 曲靖市国家税务局杨春天
  • 税务人员少征税款
  • 股权转让本人不签字可以吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设