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

日期：2012-9-6  来源：GBin1.com

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

在线演示  本地下载

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

相关插件：

  • jQuery background-position

主要思路

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

......

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

你可能感兴趣的:(background)

  • uniapp使用内置地图选择插件，实现地址选择并在地图上标点 神夜大侠 Uniappvue.jsuniapp
    uniapp使用内置地图选择插件，实现地址选择并在地图上标点代码如下：page{background:#F4F5F6;}::-webkit-scrollbar{width:0;height:0;color:transparent;}page{height:100%;width:100%;font-size:24rpx;}image,view,input,textarea,label,text,na
  • 8 冰鈊夢
    transition动画transform.box{width:200px;height:200px;background-color:gold;margin:50pxauto0;transition:all1sease;}.box:hover{transform:translate(50px,50px);}.box2{width:200px;height:200px;background-col
  • css2中的透明 琪33
    .out{width:400px;height:400px;background-color:blue;margin:100pxauto;border:1pxsolid#000;opacity:0.6;}.in{width:200px;height:200px;background-color:red;margin:100pxauto;}
  • HTML中"bgcolor"与"background-color"的区别 Sardar_ html
    bgcolor只是标签属性，而backgroud更多作为css的样式属性。它们俩大多数情况下效果完全相同。但在标签下效果不同。不支持bgcolor属性，只能用style标签添加CSS样式。作为table的属性而言：HelloWorld!和HelloWorld!效果完全相同。作为body属性而言：效果完全相同。不过个人推荐统一用CSS样式进行控制，把style统一放到.css文件中。backgrou
  • Swift4.0: 利用图形上下文画基础图? Dayu大鱼
    步骤:开启图片上下文获取上下文配置上下文3.1填充颜色cgColor3.2填充尺寸从图形上下文中获取图片关闭上下文返回图片importFoundationimportUIKitextensionUIImage{///画一个白色背景的图片classfuncimageWithWhiteBackGroundColor()->UIImage{//开始图形上下文UIGraphicsBeginImageCon
  • html ul点击删除,用原生实现点击删除点击的li weixin_39993454 htmlul点击删除
    简单的实现方式#button{display:inline-block;}ul{list-style:none;}li{background-color:red;display:inline-block;width:20px;padding:10px;margin-left:3px;color:white;}window.onload=function(){varoBtn1=document.ge
  • ros2中使用launch.xml启动时，怎么在命令行里设置参数，或者加载参数文件（params.yaml） code . Autoware自动驾驶ROS2xmlRos2自动驾驶机器人
    在ROS2中使用launch.xml启动时，可以通过命令行设置参数或加载参数文件（如params.yaml）。以下是具体的方法：1.在命令行中设置参数你可以在运行ros2launch命令时直接设置参数，使用key:=value的语法。例如：ros2launchparam_name:=param_value例如，如果你有一个参数background_r，你可以这样设置：ros2launchmy_pa
  • CSS中如何实现鼠标悬停效果？ 神明木佑 css前端
    在CSS中，您可以使用:hover伪类来实现鼠标悬停效果。:hover伪类会在用户将鼠标悬停在选择器所匹配的元素上时应用指定的样式。下面是一个简单的例子，展示了如何在鼠标悬停时改变文本颜色和背景颜色：MouseHoverExample.hover-effect{color:black;background-color:white;padding:10px;text-align:center;}.h
  • css3实现鼠标放到图标上自动切换图标 黄丫丫07 csscss3html
    作业div{font-family:'icomoon';width:1217px;height:1217px;background:url(images/1.jpg)no-repeat00;transition:all.2s;}div:hover{background:url(images/1.jpg)no-repeat-1200px0;}
  • uniapp H5 关掉全部头部header qq_39016177 uni-app
    uniappH5关掉全部头部header1.进入pages.json文件"globalStyle":{//"navigationStyle":"custom","navigationBarTextStyle":"black","navigationBarTitleText":"","navigationBarBackgroundColor":"#F8F8F8","backgroundColor":
  • elementuiPlus取消el-input的边框 qq_39016177 elementui
    elementuiPlus取消el-input的边框1.通常取消边框的方法设置border为none2.还有其他类似边框的例如outlinebox-shadow这两个属性都是会产生边框效果3.el-input需要更改的话–如下需要修改box-shadow为空即可上代码:deep(.el-input__wrapper){align-items:center;background-color:#F7F
  • html ios 滚动条隐藏,CSS溢出滚动和隐藏滚动条（iOS） 社长从来不假装 htmlios滚动条隐藏
    6个答案:答案0:(得分：5)我只是玩了这个codepen(https://codepen.io/devstreak/pen/dMYgeO)，看来如果你为下面的所有三个属性设置background-color到transparent，滚动(在这个例子中)同时删除box-shadows)，根本看不到滚动条：#style-1::-webkit-scrollbar-track{//-webkit-box
  • transform-origin设置变形中心点 每一天，每一步 HTML/CSShtmlcsscss3
    HTML代码：CSS代码：.box{width:100px;height:100px;background-color:purple;margin-left:150px;transition:all.5s;/*transform-origin:center;默认盒子的正中心为旋转中心点*//*transform-origin:left;设置左边线中心点为旋转中心点*//*transform-ori
  • div盒子垂直居中的3种方法 每一天，每一步 HTML/CSShtmlcss
    初始HTML代码如下：初始CSS代码如下：.father{width:300px;height:300px;background-color:pink;margin:20pxauto;}.son{width:100px;height:100px;background-color:blue;}初始效果图如下：垂直居中方法如下：使用子盒子与父盒子的外边距margin控制垂直方向位置.father{ov
  • 基于react native的锚点 miao_zz Reactreact-nativereactnativeandroidreact.js
    基于reactnative的锚点效果示例图示例代码效果示例图示例代码/*eslint-disablereact-native/no-inline-styles*/importReact,{useEffect,useRef,useState}from'react';import{Image,ImageBackground,ScrollView,StyleSheet,Text,TouchableOpa
  • C# WPF中的GUI多线程技巧详解 zls365365 c#wpf开发语言
    1.使用BackgroundWorker组件代码示例：publicpartialclassMainWindow:Window{privateBackgroundWorkerbackgroundWorker=newBackgroundWorker();publicMainWindow(){InitializeComponent();backgroundWorker.DoWork+=Backgroun
  • 异步任务处理：FastAPI结合Celery的实战典范 赖蓉旖Marlon
    异步任务处理：FastAPI结合Celery的实战典范fastapi-celeryExampleofhowtohandlebackgroundprocesseswithFastAPI,Celery,andDocker项目地址:https://gitcode.com/gh_mirrors/fas/fastapi-celery在现代Web开发中，异步处理和后台任务调度成为了提高应用性能与响应速度的关键
  • 第一章习题 2401_87136665 前端html5
    1.网页标题为”网页学习“，在浏览器窗口中显示“欢迎大家一起开始学习网页制作”。代码及完成效果如下图所示。其中网页所以文字的颜色为blue，背景颜色为#99ffff；水平分割线粗细为5，颜色为#ff3333。网页学习body{background-color:#99ffff;color:blue;}hr{height:5px;background-color:#ff3333;border:none
  • 当背景为两种颜色交替出现时？用重复性渐变实现 痛心凉
    重复性渐变cssdiv{background-image:linear-gradient(0deg,rgba(255,255,255,.2)50%,transparent50%,transparent);background-size:37px37px;background-color:#EBEBEB;//按需要改动背景色}
  • javascript网页设计案例1 2301_79698214 javascript
    javascript网页设计案例1以下是一个简单的JavaScript网页设计案例：JavaScript网页设计案例#container{width:300px;height:200px;background-color:#f2f2f2;text-align:center;padding:20px;}点击按钮显示文本显示文本functiondisplayText(){vartext=documen
  • Qscrollarea去除边框的办法 莫毅忆 qt
    1.代码去除QScrollArea是派生于QFrame，如果设置QFrame的FrameShape值为NoFrame那么就可以实现边框去除ui->scrollArea->setFrameShape(QFrame::NoFrame);2.样式去除QScrollArea{color:#c3f8ff;font-family:"等线";font-size:15px;background-color:tra
  • BACKGROUND ON THE ISSUE Reiko丶
    问题背景想想几个一般的标题，在这个标题下这个问题可能的分类。例如，如果问题涉及刑事调查，标题可能是“犯罪”、“犯罪学”、“警察”和一种或多种特定类型的犯罪，如“入室盗窃”。然后查阅好的百科全书的索引卷中的这些标题，如美国百科全书或大英百科全书。（美国有一个单独的索引卷。《大英百科全书》分为两组：大百科全书组和小百科全书组，大百科全书组包含关于有限数量的主题的详细文章，小百科全书组包含关于大量主题的
  • 31岁了，转行 YueTan
    background经常看到提问，27了学编程晚了吗，28转行来得及吗？我确在31岁的时候开始了一段新的旅途。毕业后一直在外企世界50强工作，论舒服的话真的是很舒服，办公室环境，工作压力，出国出差都是很诱惑的，现在离开了才感受到另一个重要的是品牌的认同感吧，那种一提起公司所有人都知道的品牌那种感觉。experience说起来确是一波三折。前前后后找新工作已经一年了，赶上这两年行业环境一年比一年差。
  • Javascript(基础) 笔记16 不修×蝙蝠 javascript笔记前端html
    dom操作①document②object③model一、查找1.getElementById()根据id值获取元素，返回符合的第一个元素（只会返回第一个）varx=document.getElementById("a");console.log(x);console.dir(x);//以对象形式打印x.style.background="red";x.style.color="yellow";x
  • HTML 图片 一壶浊酒.. 前端开发html前端
    在HTML中，我们可以使用img标签来显示一张图片。对于img标签，我们只需要掌握它的三个属性：src、alt和title。alt属性用于描述图片，这个描述文字是给搜索引擎看的，并且当图片无法显示时，页面会显示alt中的文字。title属性也用于描述图片，不过这个描述文字是给用户看的，并且当鼠标指针移到图片上时，会显示title中的文字。colspan属性body{background-color
  • 微信小程序入门【三】：实现简单登录退出和个人信息页面 山岫 微信小程序微信小程序小程序
    效果图预览这个框很是惆怅，但是真机调试没出现过，这个bug下次再解决吧。这次说说登录。效果图：附上代码：home.wxml-->-->-->-->Hi游客{{userInfo.nickName}}-->退出登录@技术支持：江阔jk921home.wxss/*pages/scroll/scroll.wxss*/.top{width:100%;height:400rpx;background-colo
  • @antv/x6 填充一个背景图片，并让其显示出来。 花花鱼 @antv/x6Vue3vue.js
    1、填充背景色的时候，开始不显示背景图片，只显示背景颜色。2、开始是放在assets/images目录下：constgraph=newGraph({container:document.getElementById("container")asHTMLElement,width:widthPx,height:heightPx,background:{color:"#F2F7FA",position
  • jQuery选择器 VaporGas 前端jquery前端javascript学习
    jQuery选择器jQuery选择器类似于CSS选择器，用来选取网页中的元素$("h3").css("background","#09F");代码分析：获取并设置网页中所有元素的背景“h3”为选择器语法，必须放在$()中$(“h3”)返回jQuery对象.css()是为jQuery对象设置样式的方法jQuery选择器分类jQuery选择器功能强大，种类也很多，分类如下：类CSS选择器基本选择器层次
  • html animation 属性,css3学习--css3动画详解一(animation属性） 蜗牛老湿 htmlanimation属性
    ***介绍的属性并不完全，写的都是我认为容易混淆的难点属性，所以属性会在最后综合案例展示~Keyframes介绍：Keyframes被称为关键帧，其类似于Flash中的关键帧。在CSS3中其主要以“@keyframes”开头，后面紧跟着是动画名称加上一对花括号“{…}”，括号中就是一些不同时间段样式规则。@keyframeschangecolor{0%{background:red;}100%{b
  • 3. Fabric 基本使用 Lanwarf-前端开发 Fabricfabric前端javascript
    1.画正方形letcanvas=newfabric.Canvas('canvas',{backgroundColor:'grey'})//画正方形letrect=newfabric.Rect({left:100,top:100,fill:'red',width:20,height:20,angle:45})canvas.add(rect)2.画圆letcanvas=newfabric.Canvas
  • 二分查找排序算法 周凡杨 java二分查找排序算法折半
    一：概念 二分查找又称 折半查找（ 折半搜索/ 二分搜索），优点是比较次数少，查找速度快，平均性能好；其缺点是要求待查表为有序表，且插入删除困难。因此，折半查找方法适用于不经常变动而 查找频繁的有序列表。首先，假设表中元素是按升序排列，将表中间位置记录的关键字与查找关键字比较，如果两者相等，则查找成功；否则利用中间位置记录将表 分成前、后两个子表，如果中间位置记录的关键字大于查找关键字，则进一步
  • java中的BigDecimal bijian1013 javaBigDecimal
            在项目开发过程中出现精度丢失问题，查资料用BigDecimal解决，并发现如下这篇BigDecimal的解决问题的思路和方法很值得学习，特转载。         原文地址：http://blog.csdn.net/ugg/article/de
  • Shell echo命令详解 daizj echoshell
    Shell echo命令 Shell 的 echo 指令与 PHP 的 echo 指令类似，都是用于字符串的输出。命令格式： echo string 您可以使用echo实现更复杂的输出格式控制。 1.显示普通字符串: echo "It is a test" 这里的双引号完全可以省略，以下命令与上面实例效果一致： echo Itis a test 2.显示转义
  • Oracle DBA 简单操作 周凡杨 oracle dba sql
    --执行次数多的SQL select sql_text,executions from (      select sql_text,executions from v$sqlarea order by executions desc      ) where rownum<81;  &nb
  • 画图重绘 朱辉辉33 游戏
      我第一次接触重绘是编写五子棋小游戏的时候，因为游戏里的棋盘是用线绘制的，而这些东西并不在系统自带的重绘里，所以在移动窗体时，棋盘并不会重绘出来。所以我们要重写系统的重绘方法。   在重写系统重绘方法时，我们要注意一定要调用父类的重绘方法，即加上super.paint(g)，因为如果不调用父类的重绘方式，重写后会把父类的重绘覆盖掉，而父类的重绘方法是绘制画布，这样就导致我们
  • 线程之初体验 西蜀石兰 线程
    一直觉得多线程是学Java的一个分水岭，懂多线程才算入门。 之前看《编程思想》的多线程章节，看的云里雾里，知道线程类有哪几个方法，却依旧不知道线程到底是什么？书上都写线程是进程的模块，共享线程的资源，可是这跟多线程编程有毛线的关系，呜呜。。。 线程其实也是用户自定义的任务，不要过多的强调线程的属性，而忽略了线程最基本的属性。 你可以在线程类的run()方法中定义自己的任务，就跟正常的Ja
  • linux集群互相免登陆配置 林鹤霄 linux
    配置ssh免登陆 1、生成秘钥和公钥    ssh-keygen -t rsa 2、提示让你输入，什么都不输，三次回车之后会在~下面的.ssh文件夹中多出两个文件id_rsa 和 id_rsa.pub    其中id_rsa为秘钥，id_rsa.pub为公钥，使用公钥加密的数据只有私钥才能对这些数据解密    c
  • mysql : Lock wait timeout exceeded; try restarting transaction aigo mysql
    原文：http://www.cnblogs.com/freeliver54/archive/2010/09/30/1839042.html   原因是你使用的InnoDB   表类型的时候, 默认参数:innodb_lock_wait_timeout设置锁等待的时间是50s, 因为有的锁等待超过了这个时间,所以抱错.   你可以把这个时间加长,或者优化存储
  • Socket编程 基本的聊天实现。 alleni123 socket
    public class Server { //用来存储所有连接上来的客户 private List<ServerThread> clients; public static void main(String[] args) { Server s = new Server(); s.startServer(9988); } publi
  • 多线程监听器事件模式(一个简单的例子) 百合不是茶 线程监听模式
        多线程的事件监听器模式   监听器时间模式经常与多线程使用,在多线程中如何知道我的线程正在执行那什么内容,可以通过时间监听器模式得到        创建多线程的事件监听器模式 思路:    1, 创建线程并启动,在创建线程的位置设置一个标记     2,创建队
  • spring InitializingBean接口 bijian1013 javaspring
    spring的事务的TransactionTemplate，其源码如下： public class TransactionTemplate extends DefaultTransactionDefinition implements TransactionOperations, InitializingBean{ ... } TransactionTemplate继承了DefaultT
  • Oracle中询表的权限被授予给了哪些用户 bijian1013 oracle数据库权限
            Oracle查询表将权限赋给了哪些用户的SQL，以备查用。 select t.table_name as "表名", t.grantee as "被授权的属组", t.owner as "对象所在的属组"
  • 【Struts2五】Struts2 参数传值 bit1129 struts2
    Struts2中参数传值的3种情况 1.请求参数绑定到Action的实例字段上 2.Action将值传递到转发的视图上 3.Action将值传递到重定向的视图上   一、请求参数绑定到Action的实例字段上以及Action将值传递到转发的视图上 Struts可以自动将请求URL中的请求参数或者表单提交的参数绑定到Action定义的实例字段上，绑定的规则使用ognl表达式语言
  • 【Kafka十四】关于auto.offset.reset[Q/A] bit1129 kafka
    I got serveral questions about  auto.offset.reset. This configuration parameter governs how  consumer read the message from  Kafka when  there is no initial offset in ZooKeeper or
  • nginx gzip压缩配置 ronin47 nginx gzip 压缩范例
    nginx gzip压缩配置 更多 0 nginx gzip 配置   随着nginx的发展，越来越多的网站使用nginx，因此nginx的优化变得越来越重要，今天我们来看看nginx的gzip压缩到底是怎么压缩的呢？ gzip(GNU-ZIP)是一种压缩技术。经过gzip压缩后页面大小可以变为原来的30%甚至更小，这样，用
  • java-13.输入一个单向链表，输出该链表中倒数第 k 个节点 bylijinnan java
    two cursors. Make the first cursor go K steps first. /* * 第 13 题：题目：输入一个单向链表，输出该链表中倒数第 k 个节点 */ public void displayKthItemsBackWard(ListNode head,int k){ ListNode p1=head,p2=head;
  • Spring源码学习-JdbcTemplate queryForObject bylijinnan javaspring
    JdbcTemplate中有两个可能会混淆的queryForObject方法： 1. Object queryForObject(String sql, Object[] args, Class requiredType) 2. Object queryForObject(String sql, Object[] args, RowMapper rowMapper) 第1个方法是只查
  • [冰川时代]在冰川时代,我们需要什么样的技术? comsci 技术
         看美国那边的气候情况....我有个感觉...是不是要进入小冰期了?      那么在小冰期里面...我们的户外活动肯定会出现很多问题...在室内呆着的情况会非常多...怎么在室内呆着而不发闷...怎么用最低的电力保证室内的温度.....这都需要技术手段...   &nb
  • js 获取浏览器型号 cuityang js浏览器
    根据浏览器获取iphone和apk的下载地址 <!DOCTYPE html> <html> <head>     <meta charset="utf-8" content="text/html"/>     <meta name=
  • C# socks5详解 转 dalan_123 socketC#
    http://www.cnblogs.com/zhujiechang/archive/2008/10/21/1316308.html  这里主要讲的是用.NET实现基于Socket5下面的代理协议进行客户端的通讯，Socket4的实现是类似的，注意的事，这里不是讲用C#实现一个代理服务器，因为实现一个代理服务器需要实现很多协议，头大，而且现在市面上有很多现成的代理服务器用，性能又好，
  • 运维 Centos问题汇总 dcj3sjt126com 云主机
    一、sh 脚本不执行的原因 sh脚本不执行的原因 只有2个 1.权限不够 2.sh脚本里路径没写完整。   二、解决You have new mail in /var/spool/mail/root 修改/usr/share/logwatch/default.conf/logwatch.conf配置文件 MailTo = MailFrom   三、查询连接数
  • Yii防注入攻击笔记 dcj3sjt126com sqlWEB安全yii
    网站表单有注入漏洞须对所有用户输入的内容进行个过滤和检查，可以使用正则表达式或者直接输入字符判断，大部分是只允许输入字母和数字的，其它字符度不允许；对于内容复杂表单的内容，应该对html和script的符号进行转义替换：尤其是<,>,',"",&这几个符号 这里有个转义对照表： http://blog.csdn.net/xinzhu1990/articl
  • MongoDB简介[一] eksliang mongodbMongoDB简介
    MongoDB简介 转载请出自出处：http://eksliang.iteye.com/blog/2173288 1.1易于使用        MongoDB是一个面向文档的数据库，而不是关系型数据库。与关系型数据库相比，面向文档的数据库不再有行的概念，取而代之的是更为灵活的“文档”模型。        另外，不
  • zookeeper windows 入门安装和测试 greemranqq zookeeper安装分布式
    一、序言       以下是我对zookeeper 的一些理解：      zookeeper 作为一个服务注册信息存储的管理工具，好吧，这样说得很抽象，我们举个“栗子”。       栗子1号：       假设我是一家KTV的老板，我同时拥有5家KTV，我肯定得时刻监视
  • Spring之使用事务缘由(2-注解实现) ihuning spring
      Spring事务注解实现   1. 依赖包：     1.1 spring包：           spring-beans-4.0.0.RELEASE.jar           spring-context-4.0.0.
  • iOS App Launch Option 啸笑天 option
    iOS 程序启动时总会调用application:didFinishLaunchingWithOptions:，其中第二个参数launchOptions为NSDictionary类型的对象，里面存储有此程序启动的原因。   launchOptions中的可能键值见UIApplication Class Reference的Launch Options Keys节 。 1、若用户直接
  • jdk与jre的区别（_） macroli javajvmjdk
    简单的说JDK是面向开发人员使用的SDK，它提供了Java的开发环境和运行环境。SDK是Software Development Kit 一般指软件开发包，可以包括函数库、编译程序等。  JDK就是Java Development Kit JRE是Java Runtime Enviroment是指Java的运行环境，是面向Java程序的使用者，而不是开发者。 如果安装了JDK，会发同你
  • Updates were rejected because the tip of your current branch is behind qiaolevip 学习永无止境每天进步一点点众观千象git
    $ git push joe prod-2295-1 To [email protected]:joe.le/dr-frontend.git ! [rejected] prod-2295-1 -> prod-2295-1 (non-fast-forward) error: failed to push some refs to '[email protected]
  • [一起学Hive]之十四-Hive的元数据表结构详解 superlxw1234 hivehive元数据结构
    关键字：Hive元数据、Hive元数据表结构   之前在 “[一起学Hive]之一–Hive概述，Hive是什么”中介绍过，Hive自己维护了一套元数据，用户通过HQL查询时候，Hive首先需要结合元数据，将HQL翻译成MapReduce去执行。 本文介绍一下Hive元数据中重要的一些表结构及用途，以Hive0.13为例。   文章最后面，会以一个示例来全面了解一下，
  • Spring 3.2.14，4.1.7，4.2.RC2发布 wiselyman Spring 3
      Spring 3.2.14、4.1.7及4.2.RC2于6月30日发布。   其中Spring 3.2.1是一个维护版本(维护周期到2016-12-31截止)，后续会继续根据需求和bug发布维护版本。此时，Spring官方强烈建议升级Spring框架至4.1.7 或者将要发布的4.2 。   其中Spring 4.1.7主要包含这些更新内容。
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他