位置: 编程技术 - 正文

基于jquery实现百度新闻导航菜单滑动动画(如何用jquery)

编辑:rootadmin

推荐整理分享基于jquery实现百度新闻导航菜单滑动动画(如何用jquery),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:使用jquery,jquery教程 csdn,jquery100例,使用jquery实现的项目,使用jquery实现的项目,jquery100例,jquery的实现原理,jquery100例,内容如对您有帮助,希望把文章链接给更多的朋友!

本文实例为大家分享jquery实现百度新闻导航菜单滑动动画,供大家参考,具体内容如下

思路与步骤1.利用UL创建简单横向导航;

2.添加一个脱离层的div,命名div-hover,用于菜单滑动动画,设置CSS样式;

3.添加菜单项的滑动事件,计算div-hover的滑动要素,左,上边距以及宽度;

效果预览

从预览效果可以看出,div-hover的定位是有问题的,div-hover应该以父级元素绝对定位,所以修改代码(注释部分为修改点)如下:

虽然解决了定位问题,但是背景图片还是浮于文字上方,所以调整代码,将文字浮动于红色div之上:

效果预览

4.添加菜单点击,以及加载页面默认菜单选中;

效果预览

5.添加鼠标移出范围,自动定位当前激活元素功能;

在做此功能之前,先理下思路,鼠标移出操作,我们可以想到mouseout,mouseleave事件,那么随之就会有以下几个疑问:

①这地方选用哪个事件可以满足这个条件呢?

②那选择的事件又定位在哪个元素呢?

③移出鼠标之后又如何知道当前激活的是哪个元素呢?

④如何知道div-hover的左边距和width等值呢?

实践出真知,那就实践一下:

基于jquery实现百度新闻导航菜单滑动动画(如何用jquery)

首先,以mouseout为例,第一个问题自然就解决了;

其次,事件定位在哪个元素?通过上面GIF图,分析,如果定位在A标签或Li标签,那么鼠标移出操作在A标签或Li标签之间切换也会触发自动定位到激活元素(假设自动定位已做),就会出现如下图所示情况:

所以不能定位在A或Li标签上,再想一下,鼠标应该是移出整个导航的范围才可以,那么定位在哪个元素就很容易出来了,应该定位在UL或者UL的父级元素,他们两个的大小范围均是一致的,所以两个元素均可以,若两个元素大小不一致,就应该定位在UL上面了。于是就有了类似如下代码:

然后,如何知道当前激活为何元素呢,可以在点击事件时,用隐藏域或者其他display方式存储当前点击的元素宽度和左边距,待鼠标移出操作,重新读取存储的数据,进而进行animate定位;从而解决以上③④问题;部分代码如下:

(当然,想知道菜单激活元素,也可以用class为active的方式来查找,不过这种方式,相对来说麻烦一些,首先获得active的元素,然后通过遍历li,重新计算一遍宽度和左边距,最后进行赋值和添加滑动定位;此处暂用隐藏域方式处理,原因是方便简单,群友如有兴趣可以用active方式试验)

效果展示:

看图发现依旧出现之前类似定位在A或Li的问题,出现这种情况的原因:

jquery中mouseout如果定位在一个元素上,例如div,那么此div之下的元素都会具有mouseout事件,也就是常说的,事件冒泡机制;与此类似的事件如mousedown,mouseover等,那么是不是阻止事件冒泡就行了呢&#; 理论上是这样的。通常阻止冒泡有两种方式: event.stopPropagation();和return false;当然他们之间也是有区别的。

相关代码修改如下:

无论何种阻止方式,都没有卵用,依旧阻止不了冒泡,效果可想而知,与上面Gif图所示无异;

由此证明,mouseover在实现此功能方面是有问题的;

那换mouseleave呢,除了将mouseover修改为mouseleave和去除冒泡代码外,其他代码不做改动,实验效果如下:

从上图可以看出,效果与百度新闻导航滑动基本无异,至此大功告成;

完整代码

总结和关键点1.背景滑动由某个块状元素(此处用的div)来实现,而非本元素的hover改变背景颜色;

2.注意元素定位(滑动块状元素以谁来绝对定位或者相对定位,左边距的计算和自身宽度的计算;滑动块状元素div-hover和li之间的相对定位,以及层级大小);

3.滑动动画事件animate和记录激活菜单,鼠标移出区域自定定位到激活菜单;

4.jquery中mouseover,mouseout以及mouseenter,mouseleave关于冒泡机制的区别;(前两个未做冒泡机制的限制,后两个冒泡已经经过处理,事件只针对注册元素本身,而不会对子元素起作用,mouseenter和mouseleave用在一个元素标签上可以用hover事件代替,本身hover就是这两者的封装,如果事件在不同元素标签上,最好分开调用mouseenter和mouseleave事件)

5.所有关键点以及作用都已经在代码各处加上注释,各位可以看看。

希望本文对大家学习jquery程序设计有所帮助。

Jquery技巧(必须掌握) 检查jQuery是否加载在使用jQuery进行任何操作之前,你需要先确认它已经加载:if(typeofjQuery=='undefined'){console.log('jQueryhasn'tloaded');}else{console.log('jQueryhasloade

基于jQuery Tipso插件实现消息提示框特效 基于jQueryTipso插件实现消息提示框的特点是可以定义提示框的显示位置,以及动态改变提示框的提示内容,应该说是一款相当灵活的jQuery消息提示框插件

jQuery实现放大镜效果实例代码 在没给大家做详细文字说明之前,先给大家分享一段简单的jquery实现放大镜效果代码,需要的朋友可以直接拿去代码。$(function(){varmouseX=0;//鼠标移动的

标签: 如何用jquery

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

上一篇:一步步教大家编写酷炫的导航栏js+css实现(怎样编?)

下一篇:Jquery技巧(必须掌握)(不用jquery用什么)

  • 生产企业出口货物劳务免抵退税申报明细表
  • 空壳公司如何报税
  • 市政道路工程建筑包括什么
  • 外购商品发给员工增值税要怎么算
  • 不同月份的发票能抵扣吗
  • 国外公司税号查询
  • 劳务所得报酬
  • 企业的两金是哪两金
  • 小微企业的增值税怎么算
  • 工会经费征税吗
  • 广告费收入是不是非税收入
  • 报关单金额大于合同金额
  • 境内货代公司之间付美金
  • 融资租赁购入固定资产开票吗
  • 无票收入确认收入
  • 发票丢失登报声明怎么写
  • 做买卖交税
  • 怎么访问海康硬盘录像机
  • internet笔记
  • 公司有长期挂账的说法吗
  • 销售商品尚未发出会计分录
  • opera software
  • win10右键失灵解决办法
  • 计提减值时注意什么
  • 应付债券到期偿还
  • 创建自定义对象主要哪几种方法,并写出基本语法结构?
  • 不动产出租要交什么税
  • 异地成立分公司的流程和要求
  • 销售商品的会计分录已收到钱
  • 鹤顶兰的养殖方法和管理
  • vue实现鼠标悬浮 显示全部内容
  • 使用灭火器人要站在上风口还是下风口
  • php实现数据库创建题库
  • 浅析论文题目
  • 电子发票有哪些种类
  • 进项税额转出会造成增值税应纳税额
  • 其他免税销售额>0时,免税性质代码不能为空是什么意思
  • jquery教程chm
  • 面试题集锦
  • 工资直接计入管理费用了怎么办
  • 航天金税税控盘运行环境
  • 跨区预缴增值税申报表查不到怎么回事
  • 微信小程序实现支付功能
  • 进项税转出的会计分录
  • 员工宿舍水电费计入什么会计科目
  • 财务人员如何做一个合格的党员
  • 延期缴纳土地使用税怎么办理
  • 公司注销公章的处理
  • sql 文件存储
  • 税后利润分配还要交税
  • 银行承兑汇票由谁出票
  • 母公司无偿借款给子公司
  • 发票开错是不是可以作废?
  • 企业中的消费环境分析
  • 未发货先开发票
  • 个人所得税会计分录怎么做
  • 收到是怎么写
  • 系统32位和64位的区别 Windows系统32位和64位的区别在哪里
  • windows vista build
  • 解决Windows Server远程断开后自动
  • windows8 如何关机
  • win10内置杀毒
  • win8切换输入法无效
  • win10系统开机自动还原
  • dosbox批处理
  • JavaScript事件处理的方式(三种)
  • shell脚本转码
  • Linux base shell重定向详解
  • 超实用的八个开车技巧
  • shell编程教程
  • 简介生成
  • jquery .find()
  • Express + Session 实现登录验证功能
  • 基于python的
  • android DefaultHttpClient设置setCookieStore
  • 税务系统跨区调动
  • 湖北省税务局网站授权
  • 消费税的税收筹划案例分析
  • 农转非和非农
  • 税务局拒开发票
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设