首页

关于

使用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, 导航效果, 导航特效

阅读更多

标签

© Copywrite by gbin1.com, all rights reserved.