jquery 实现斜导航效果

运行后刷新一下,才可以,也可以保存本地直接运行也可。

jquery导航菜单

#menu1 { width:970px;height:45px;}
#menu1,#menu1 a , #menu1 a span{ background-image:url(http://img.jb51.net/demo/images/daohao.gif);}
#menu1 a{ display:block;float:left;height:45px;}
#menu1 a span{ float:right;width:33px; height:45px; background-position:-970px 0;}
#menu1 a span.sj{ background-position:-1003px 0;}
#menu1 a.a1{ width:168px; background-position:0 0;}
#menu1 a.a2{ width:117px; background-position:-168px 0;}
#menu1 a.a3{ width:113px; background-position:-285px 0;}
#menu1 a.a4{ width:114px; background-position:-398px 0;}
#menu1 a.a5{ width:111px; background-position:-512px 0;}
#menu1 a.a6{ width:114px; background-position:-623px 0;}
#menu1 a.a7{ width:113px; background-position:-737px 0;}
#menu1 a.a8{ width:120px; background-position:-850px 0;}
#menu1 a.nowa1{ background-position:0 45px;}
#menu1 a.nowa2{ background-position:-168px 45px;}
#menu1 a.nowa3{ background-position:-285px 45px;}
#menu1 a.nowa4{ background-position:-398px 45px;}
#menu1 a.nowa5{ background-position:-512px 45px;}
#menu1 a.nowa6{ background-position:-623px 45px;}
#menu1 a.nowa7{ background-position:-737px 45px;}
#menu1 a.nowa8{ background-position:-850px 45px;}

function menu(nowa)//nowa 默认是哪个 0 1 2 3 4 5 6 7
{
$(function(){
$("#menu1 a:not(:last)").append('');
$("#menu1 a").each(function(i){
$(this).addClass("a"+(i+1));
if(i!=nowa){
$(this).hover(function(){
$(this).addClass("nowa"+(i+1))
.prev("a").find("span").addClass("sj");
},function(){
$(this).removeClass("nowa"+(i+1))
.prev("a").find("span").removeClass("sj");
});
}
});
$("#menu1 a:eq("+nowa+")").addClass("nowa"+(nowa+1))
.prev("a").find("span").addClass("sj");
});
}
menu(0);

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

(0)

相关推荐

  • jquery 实现斜导航效果

    运行后刷新一下,才可以,也可以保存本地直接运行也可. jquery导航菜单 #menu1 { width:970px;height:45px;} #menu1,#menu1 a , #menu1 a span{ background-image:url(http://img.jb51.net/demo/images/daohao.gif);} #menu1 a{ display:block;float:left;height:45px;} #menu1 a span{ float:right;w

  • jQuery实现菜单栏导航效果

    本文实例为大家分享了jQuery实现菜单栏导航效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{ padding: 0px; margin: 0px; } #top{width: auto;height: 30px;background: #eee;pos

  • JQuery实现电梯导航效果

    本文实例为大家分享了JQuery实现电梯导航效果的具体代码,供大家参考,具体内容如下 分享一个基于JQuery实现的电梯导航效果,效果如下: 以下是代码实现: <!DOCTYPE html> <html lang="en">   <head>     <meta charset="utf-8" />     <title>基于JQuery实现电梯导航特效</title>     <styl

  • jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果

    在网站建设中,特别是做商城和产品网站,通常会用到导航弹出菜单,像是jquery写的仿京东导航菜单,一个经典的左侧多级导航菜单,学会了可以任意改变布局.京东菜单已经有不少JS前端爱好者仿写过,今天蚂蚁网络重新与大家分享一款仿京东商城的商品多级分类菜单,精简版代码 先看下jquery仿京东导航效果: 前端html代码如下: 复制代码 代码如下: <ul> <li><a href="#">baidu</a></li> <div

  • jquery鼠标悬停导航下划线滑出效果

    本文实例为大家分享了jquery鼠标悬停导航下划线滑出效果的具体代码,供大家参考,具体内容如下 <!doctype html> <html> <head> <meta charset="utf-8"> <title>jquery鼠标悬停导航下划线滑出效果</title> <style> *{ margin:0; padding:0; list-style:none;} img{ border:0;} .

  • jQuery实现带滚动线条导航效果的方法

    本文实例讲述了jQuery实现带滚动线条导航效果的方法.分享给大家供大家参考.具体分析如下: 最早见到这种导航是在魅族的官网,当时(去年)觉得挺不错的但自己不会JavaScript,因此那时"可望而不可及".今日去手机QQ for Android官网,又发现类似这样的导航,反正自己也没啥事,所以就尝试用jQuery做出这样的效果. 效果如下: 首页 说说 日志 相册     CSS: body,ul,li{margin:0;padding:0;} #testnav{;height:80

  • jQuery实现带滚动导航效果的全屏滚动相册实例

    本文实例讲述了jQuery实现带滚动导航效果的全屏滚动相册.分享给大家供大家参考.具体如下: 运行效果图如下: 主要代码如下: $(function() { //加载时的图片 var $loader= $('#st_loading'); //获取的ul元素 var $list= $('#st_nav'); //当前显示的图片 var $currImage = $('#st_main').children('img:first'); //加载当前的图片 //同时显示导航的项 $('<img>')

  • jQuery实现背景弹性滚动的导航效果

    本文实例讲述了jQuery实现背景弹性滚动的导航效果.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <

  • jquery实现的横向二级导航效果代码

    本文实例讲述了jquery实现的横向二级导航效果代码.分享给大家供大家参考.具体如下: 这是一款灰色和黑色共同搭配做出的水平横向网站菜单,网页横向菜单代码,包括二级子菜单,使用了几张图片,用的朋友自己顺路径另存为吧.本菜单兼容性不错,而且设计清新.漂亮.简约,鼠标移动到主菜单上,即可下滑出二级子菜单项. 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-black-bg-nav-menu-style-codes/ 具体代码如下:

  • jQuery仿360导航页图标拖动排序效果代码分享

    jquery实现360浏览器导航页图标拖动从新排序特效源码是一款模仿360浏览器导航页网站图标拖动排序的代码.本段代码适应于所有网页使用,有兴趣的朋友们可以学习一下. 运行效果图:                                         ----------------------查看效果 下载源码----------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的360导航页图标拖动排序效果代码如下 <!DOCTYPE

随机推荐