`
weballan001
  • 浏览: 26661 次
  • 性别: Icon_minigender_1
  • 来自: 郑州
最近访客 更多访客>>
社区版块
存档分类
最新评论

jquery练习:菜单文字和图标动画效果

 
阅读更多

这个菜单的灵感来自于一个网站: http://www.pelicanhotel.com/

参考教程:http://www.gbin1.com/technology/jquerytutorial/animatedtextandiconmenu/

 

今天四处闲逛,看到gbin1网站上面有怎么漂亮的一个华丽菜单,就赶紧打开源文件,查看制作思路,一看,完全看不懂,谁让自己是菜鸟呢。琢磨了一会,就开手准备自己下手制作

 

主要的想法是使得某些元素幻灯消失,改变并且动画背景颜色,然后让元素以其它颜色幻灯出现。

 

您可以狠狠地点击这里:菜单文字和图标动画效果

 

制作原理也很简单,主要是改变元素的top位置,具体的方法大家还是看源文件吧。无聊时候的折腾,有不足与不准确之处欢迎指正。一些实现的具体细节等也是非常欢迎提问交流的。

分享到:
评论

相关推荐

    jquery带图标文字标签滑动选项卡文字列表切换

    在网页设计和开发中,jQuery 是一个非常流行的 JavaScript 库,它简化了DOM操作、事件处理、动画制作等任务。"jquery带图标文字标签滑动选项卡文字列表切换"是利用jQuery实现的一种交互式用户界面功能,常用于展示...

    js 小项目练习,jQuery 小例子

    **JavaScript与jQuery基础** JavaScript,通常简称为JS,是一种轻量级的脚本语言,广泛应用于网页和网络应用...通过不断地练习和项目经验积累,你将能够熟练运用jQuery,创造出更多富有创意和用户体验良好的Web应用。

    js树形菜单导航,Jquery实现

    在JavaScript和jQuery的世界里,创建一个树形菜单导航是常见的需求,它可以帮助用户高效地浏览网站的层次结构。本文将详细讲解如何利用...通过不断地练习和调试,你将能更熟练地掌握JS和jQuery实现树形菜单导航的方法。

    jqueryMobile入门练习项目

    2. **触发动画**:框架内嵌了平滑的过渡效果,通过`data-transition`属性可以控制页面切换时的动画类型。 3. **可自定义主题**:jQuery Mobile 提供了一套主题系统,通过`data-theme`属性可以改变组件的视觉样式。 ...

    网页特效——菜单导航篇

    1. QQ式导航:这种导航方式灵感来源于腾讯QQ的界面设计,通常采用简洁明快的图标和文字相结合的方式,通过动画效果增加用户的互动感,如鼠标悬停时的渐变或滑动效果。 2. 菜单变换与拖动:这种特效允许用户通过拖动...

    动画练习--明星资料卡.zip

    本资源“动画练习--明星资料卡.zip”提供了一系列的前端动画示例,特别适用于学习和参考。这些动画效果包括平移、旋转以及鼠标经过时的放大效果,这些都是网页设计中常见的动态交互元素。 平移(Translation)是一...

    淘宝网顶部导航菜单制作

    除了基本的样式和功能,还可以通过微交互提升用户体验,如过渡动画、触摸滑动效果等。 通过以上步骤,我们可以逐步构建出类似淘宝网顶部导航菜单的效果。这个过程中涉及到HTML、CSS、JavaScript的基础知识,以及...

    网页特效手册(500多个特效实例)

    10. CSS3动画:利用CSS3的transition和animation属性创建流畅的动画效果。 11. JavaScript特效:使用JavaScript库如jQuery、Vue.js等实现复杂交互。 12. 背景视频和音频:为网站添加动态背景,提升视觉冲击力。 13. ...

    阿里云主页模拟

    jQuery是一个流行的JavaScript库,它简化了DOM操作、事件处理和动画效果,使得这些功能的实现更为简便。 在模拟阿里云主页时,可能需要实现以下JavaScript/jQuery特效: 1. **导航栏的响应式设计**:当窗口大小变化...

    DIV+CSS 仿QQ首页

    8. **JavaScript与jQuery**:虽然主要讨论的是HTML和CSS,但为了实现动态效果(如下拉菜单、轮播图、动画等),可能需要用到JavaScript和jQuery。它们可以帮助增加用户交互性,使QQ首页更生动。 总的来说,"DIV+CSS...

    HTML期末学生大作业 基于HTML+CSS+JavaScript通用的后台管理系统ui框架模d

    - 使用动画和过渡效果,使页面过渡更加平滑自然。 ### 五、项目评估标准 - **功能性**:是否实现了预期的功能和交互效果。 - **设计质量**:页面布局是否合理,视觉效果是否吸引人。 - **代码质量**:代码是否规范...

    Html网站模版

    3. **JavaScript与jQuery**:一些模板可能包含了JavaScript代码,用于实现动态效果和用户交互,例如滑动菜单、弹出框、轮播图等。jQuery是一个流行的JavaScript库,简化了DOM操作、事件处理和动画制作。新手可以借此...

    网站美工高级培训教程

    - **CSS动画**:如何使用CSS实现平滑的过渡和动画效果。 - **JavaScript动画库**:如jQuery、GreenSock等,为网站添加复杂的交互动画。 - **交互动效设计原则**:理解何时以及如何使用动效以增强用户体验。 7. *...

    xiaomi官网作业(含javascript).zip

    在项目中,jQuery可能被用于优化用户界面,比如实现平滑滚动、下拉菜单、模态框等效果。在js目录下的文件中,可能包含了对jQuery库的引用以及基于jQuery编写的代码。 接下来是css目录,CSS(Cascading Style Sheets...

    王者荣耀攻略页面半成品.rar

    4. **动态效果**:使用CSS3动画和JavaScript库如jQuery,增加悬停效果、滑动过渡等。 5. **响应式设计**:采用媒体查询(media queries)确保页面在手机、平板和桌面设备上的适配性。 总的来说,“王者荣耀攻略页面...

    小米网页仿写

    `jquery-2.1.4.min.js` 是jQuery库,简化了DOM操作、事件处理和动画效果。`index.js` 文件则是项目的自定义JavaScript代码,用于实现小米网站的交互效果,如滑动展示、下拉菜单、弹出窗口等。 4. **响应式设计**:...

    html+css+js实现XP WINDOW界面修改版

    通过JavaScript,可以实现XP系统中的动画效果、事件监听和逻辑处理,使模拟的界面更具真实感。 为了支持不同的浏览器,开发者必须考虑浏览器兼容性问题。IE8是一个较老的浏览器,对现代Web标准的支持有限,而Fire...

    网页课程设计&毕业设计_蓝色宽屏响应式太阳眼镜网上商城整站模板5296.zip

    2. CSS3:了解并应用CSS3的选择器、过渡效果、动画、格栅系统(Grid)和弹性盒模型(Flexbox),以创建响应式布局和美化页面。 3. JavaScript:学习DOM操作、事件处理、AJAX异步请求,以及可能的前端框架(如jQuery...

    网站设计基础与实例教程

    3. JavaScript:作为网站交互的核心,JavaScript允许动态内容的创建,如表单验证、下拉菜单、滑动效果等。学习JavaScript基础语法和DOM操作,以及如何使用JavaScript库和框架(如jQuery、React、Vue或Angular)能极...

Global site tag (gtag.js) - Google Analytics