首页

关于

使用jQuery开发超酷带有背景波浪动画的单页面网站导航菜单

使用jQuery开发超酷带有背景波浪动画效果的单页面网站导航菜单

在线演示  本地下载

在今天的教程中,我们将使用jQuery开发一个单页面的网站,并且添加超酷的波浪动画背景效果到导航菜单上,希望大家能够喜欢!

主要开发使用插件:

  • jQuery one page nav:用来生成单页面网站典型的滚动效果
  • jQuery scrollTo.js:单页面插件依赖类库
  • jQuery background position:用来生成动画背景效果
  • jquery.animate-shadow-min.js:用来生成背景阴影效果
  • jQuery easing 1.3.js:用来添加更多生成动画效果 
  • Cufon-yui.js:cufon类库,用来生成更加漂亮的字体
  • fixie.js:用来辅助自动生成网站中的文字

本篇文章最后将生成一个单页面的网站设计,并且生成漂亮的动态导航按钮,调试环境firefox和Chrome,如果你使用其它的浏览器,可能无法工作。请自己调试。

如何生成按钮的背景波浪动画特效?

在这里,我们将使用动画背景图片来生成波浪的动画效果,在之前的"使用jQuery…

标签: 波浪动画, 单页面导航, 网站设计, 动画背景导航, navigation, one page, jQuery, jQuery plugin

阅读更多

使用jQuery background-position插件来创建超酷的导航条效果

使用jQuery background-position插件来创建超酷的导航条效果

在线演示  本地下载

在过去的web开发和设计中,大家往往使用flash来创建炫酷的菜单效果,随着js和web技术的发展,现在大家可以使用简单的javascript代码生成同样漂亮的菜单效果,在今天的这个简单教程中,我们将带领大家使用jQuery的background-position插件来开发漂亮的导航条效果,希望大家喜欢!

相关插件:

  • jQuery background-position

主要思路

在这个特效中,我们使用jQuery的background-position插件来动画背景的位置来达到背景变化的特效。你可以使用正负的背景图片坐标位置来定义动画的过程,注意这里你需要自己创建一个合适的背景图片来加强这种动画效果。这里我们使用如下几张图片:

使用jQuery background-position插件来创建超酷的导航条效果

使用jQuery background-position插件来创建超酷的导航条效果

使用jQuery background-position插件来创建超酷的导航条效果

当我们动态的移动背景图片位置的时候,可以产生波浪或者淡入淡出,或者倾斜移动效果。

HTML代码

html代码很简单,用ul生成导航菜单的框架,如下:

 <ul…

标签: jquery, jquery plugin, background-position, navigation, 导航效果, 导航特效

阅读更多

分享6款键盘导航的jQuery插件

日期:2012/01/10  来源:GBin1.com

键盘导航是我们常常忽略的功能。是不是应该让浏览器处理?有些开发人员可能会自己使用javascript去开发自定义的键盘导航功能来提高用户使用体验。如果你对于键盘导航使用有需求的话,今天我们介绍的这些插件肯定会让你喜欢!

jquery.hotkeys

jQuery hotkeys是一个插件允许你简单的添加和移出键盘相关事件,几乎支持所有的键盘组合

分享6款键盘导航的jQuery插件 gbin1.com

Keyboard JS

keyboardJS是一个用来帮定关键字的类库。可以使用单独的类库或者AMD模块

分享6款键盘导航的jQuery插件 gbin1.com

jwerty

是一个JS类库允许你针对元素和事件来绑定,触发键盘组合。

分享6款键盘导航的jQuery插件 gbin1.com

jKey

jkey可以和jQuery一起工作,你可以选择任何可以应用的元素来设置键盘命令。基本来说,任何元素可以都被focus,例如,input和textarea都可以添加一个快捷键

分享6款键盘导航的jQuery插件 gbin1.com

mapkey

一个简单的jQuery插件很容易将快捷键应用到链接和功能

分享6款键盘导航的jQuery插件 gbin1.com

标签: jquery, plugin, keyboard, navigation, 键盘导航插件, 快捷键插件, js快捷键插件, jquery键盘插件

阅读更多

下一页

标签

© Copywrite by gbin1.com, all rights reserved.