`

js实现菜单展开和收缩,兼容多种浏览器【原创】

阅读更多

菜单从上到下排列,要在上下实现展开和收缩,思路如下:

用递归setInterval函数来改变可见度和高度,从而实现润滑出现的效果,最终目的,是动态的改变其高度!

setinterval函数里面递归的调用改变高度的另一个函数,每一次改变一点高度,然后根据时间间隔的设置,就可以模拟出展开和收缩快或慢的效果,连起来,就像是滑动一样。

以下是用到的几个函数的说明:

setTimeout(表达式,延时时间)
在执行时,是在载入后延迟指定时间后,去执行一次表达式,记住,次数是一次 。setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。
提示:setTimeout() 只执行 code 一次。如果要多次调用,请使用 setInterval() 或者让 code 自身再次调用 setTimeout()。


clearTimeout() 方法可取消由 setTimeout() 方法设置的 timeout。clearTimeout(id_of_settimeout)
setTimeout() 返回的 ID 值。该值标识要取消的延迟执行代码块

setInterval(表达式,交互时间) 则不一样,它从载入后,每隔指定的时间就执行一次表达式

clearInterval() 方法可取消由 setInterval() 设置的 timeout。
clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。

关于css样式表里面的收获:*{ 样式内容}

在样式文件里面看到有这样的样式命名~
*{ }
这是表示所有元素都遵循花括号里的样式,很占资源的.
里面是不是margin:0;padding:0.
因为不同浏览器对各个元素的margin,padding默认值不一样
使下面的样式更好写一些
类似于兼容的效果

 

1
2
分享到:
评论

相关推荐

    js代码 播放列表收缩展开 播放列表 左侧二级菜单 兼容主流浏览器

    本项目主要涉及的是使用JavaScript实现播放列表的收缩与展开功能,同时包含左侧二级菜单的设计,且整个解决方案兼容主流浏览器,如Chrome、Firefox、Safari、Edge等。 首先,`global.css`是全局样式表文件,它负责...

    js导航菜单左侧竖纵向二级导航菜单可点击展开与收缩子菜单

    3. **CSS样式控制**:为了实现展开和收缩的效果,我们通常会使用CSS(Cascading Style Sheets)来改变子菜单的`display`属性。默认情况下,子菜单可能是隐藏的(`display:none`),点击父菜单项后,子菜单的`display...

    CSS3 3D层叠菜单展开收缩动画特效

    总结起来,"CSS3 3D层叠菜单展开收缩动画特效"是一种巧妙地结合了CSS3 3D变换、过渡效果、JavaScript交互的创新设计,它为网页增加了丰富的视觉层次和互动性。通过理解和掌握这些技术,开发者能够创造出更多引人入胜...

    js实现收缩菜单

    ### js实现收缩菜单的知识点详解 #### 一、概述 在现代Web开发中,特别是企业级应用中,收缩菜单(也称作折叠菜单)是一种非常实用且常见的UI设计模式。它能够有效地节省屏幕空间,特别是在小屏幕设备上,提供更...

    jQuery css3酷炫圆形菜单动画展开收缩特效

    在本文中,我们将深入探讨如何使用jQuery和CSS3来创建一个酷炫的圆形菜单,该菜单具有动态展开和收缩的动画效果。这个效果是通过结合jQuery的事件处理和CSS3的过渡与变换特性实现的,使得用户交互时的视觉体验更加...

    js树形导航菜单制作点击展开收缩二级菜单

    在JavaScript编程中,树形导航菜单是一种常见的网页交互元素,尤其在网站的侧...同时,为了适应不同的浏览器和设备,应确保代码的兼容性和响应性。通过不断学习和实践,你可以创建出更加复杂且用户友好的树形导航菜单。

    支持多种浏览器的纯CSS下拉菜单

    首先,理解“纯CSS”意味着我们不依赖JavaScript或者其他外部库来实现下拉菜单的功能,而是完全利用CSS(层叠样式表)来控制菜单的样式、布局和动态行为。这样做的好处包括减少页面加载时间,提高可访问性,并且对于...

    垂直多级导航菜单展开收缩效果.zip

    本资源“垂直多级导航菜单展开收缩效果”提供了一种实现这一功能的方法,它主要涉及到JavaScript(JS)编程和前端网页开发的知识点。 1. **JavaScript基础**:JavaScript是一种广泛用于网页和应用程序的脚本语言,...

    jQuery左上角圆形菜单展开收缩特效.zip

    在本文中,我们将深入探讨如何实现一个基于jQuery的左上角圆形菜单的展开与收缩特效。这个特效结合了CSS、HTML5以及JavaScript技术,为网页交互带来独特且吸引人的用户体验。我们将从以下几个方面来详细讲解这个特效...

    js实现侧边隐藏菜单收缩特效代码.zip

    这个"js实现侧边隐藏菜单收缩特效代码.zip"压缩包显然包含了使用JavaScript编写的代码,用于创建一个具有侧边隐藏菜单收缩效果的网页元素。这种效果通常应用于响应式设计,使得在移动设备或小屏幕设备上,菜单可以更...

    jquery展开收缩手风琴菜单.zip

    在实现过程中,我们还需要考虑一些细节,比如添加合适的类名来区分展开和收缩状态,或者处理初次加载时默认展开的菜单项。我们还可以利用jQuery的`.data()`方法来存储和检索元素的状态信息,避免不必要的DOM遍历。 ...

    各种兼容FF和IE的JS下拉菜单!!

    本资源包“各种兼容FF和IE的JS下拉菜单”集合了多种适用于Firefox(FF)和Internet Explorer(IE)浏览器的JavaScript下拉菜单实现,旨在帮助开发者在不同浏览器间实现兼容性。 1. **跨浏览器兼容性**:在Web开发中...

    菜单收缩(放在menu下)jsp

    根据提供的文件信息,我们可以分析出该段代码是用于在JSP页面中实现菜单收缩功能的。这段代码通过JavaScript实现,并且特别注意到了浏览器兼容性问题,主要针对Internet Explorer(IE)进行了一些特定处理。下面我们...

    jQuery+CSS3实现的支持多菜单展开手风琴下拉菜单效果源码.zip

    例如,使用`transition`属性可以定义当菜单状态改变时过渡的效果,`transform`属性则可以改变元素的大小和位置,实现下拉菜单的展开和收缩。 具体实现过程中,可能包含以下步骤: 1. HTML结构:创建一个多级菜单的...

    jQuery点击展开收缩树形菜单.zip

    在这个"jQuery点击展开收缩树形菜单"项目中,我们主要探讨如何利用jQuery实现一个响应式的、多级展开与收缩的菜单导航系统。 首先,我们需要理解jQuery的基本概念。jQuery简化了JavaScript中的DOM操作、事件处理、...

    jQuery可展开收缩三级下拉菜单代码.zip

    "jQuery可展开收缩三级下拉菜单代码.zip" 提供了一个利用jQuery库实现的三级下拉菜单解决方案。这个代码示例旨在帮助开发者构建一个高效、响应式的菜单系统,让用户能够方便地浏览多层次的网页结构。 首先,jQuery...

    JS下拉有动画效果的可收缩菜单

    本教程将详细讲解如何使用JavaScript(JS)创建一个具有动画效果的可收缩下拉菜单,该菜单已通过IE6、IE7以及Firefox等主流浏览器的测试。 首先,我们需要理解JavaScript的基本概念。JavaScript是一种轻量级的解释...

    javascript经典特效---右侧立体展开菜单.rar

    而JavaScript部分则负责为这些元素添加事件监听器,当用户交互时执行相应的菜单展开和收缩动画。 此外,CSS(Cascading Style Sheets)在实现这一特效中同样扮演着关键角色。开发者可能使用CSS来定义菜单的初始样式...

    JS左侧无限级菜单导航

    本项目“JS左侧无限级菜单导航”就是针对这一需求而设计的,它采用JavaScript语言实现,兼容各大浏览器,确保了在各种环境下都能提供稳定且流畅的用户体验。 1. **无限级导航**: 无限级菜单指的是菜单项可以...

    jQuery点击展开收缩手风琴代码.zip

    - **动画效果**: `slideToggle()`函数是实现手风琴效果的关键,它会平滑地改变元素的高度,达到展开和收缩的效果。 4. **代码结构** - HTML: 创建包含问题和答案的结构,通常是一个个可以折叠的容器,如`<div>`,...

Global site tag (gtag.js) - Google Analytics