html 滑动导航效果,jQuery实现的滑块滑动导航效果示例

本文实例讲述了jQuery实现的滑块滑动导航效果。分享给大家供大家参考，具体如下：

www.jb51.net jquery滑动导航

*{margin: 0;padding: 0;box-sizing: border-box;-moz-box-sizing: border-box;}

body {

font: 16px/20px 'Microsoft yahei,微软雅黑';

color: #AFBBBB;

}

ul {

list-style-type: none;

}

ul li {

float: left;

}

a {

text-decoration: none;

color: #AFBBBB;

}

a:hover {

color: #ffffff;

cursor: pointer;

}

.clearfix:before,.clearfix:after {

content:"";

clear: both;

display: table;

height: 0;

zoom: 1;

overflow: hidden;

}

.nav {

width:519px;

margin: 0 auto;

}

.nav ul {

background: gray;

height: 35px;

line-height: 35px;

position: relative;

padding: 0 5px;

}

.nav ul li {

position: relative;

padding: 0 25px;

}

.nav ul li>a {

position: relative;

z-index: 100; /*将a元素的z-index设置比li大，这样hover效果才不会无效*/

}

.nav ul li:last-child {

width: 98px;

height: 90%;

position: absolute;

z-index: 50;

left: 5px;

bottom: 0;

top: 0;

margin: auto;

background: rgba(152,206,170,0.5);

border-radius: 5px;

}

幼儿园
小学
初中
高中
大学
社会

$(function(){

$("ul li:not(:last)").hover(function(){

$("#huaBlock").stop(); //停止正在运行的动画

var curliWidth=$(this).outerWidth(),curleft=$(this).offset().left-$(this).parent().offset().left; //当前li的偏移量减去当前ul的偏移量就是li距离ul的距离

// alert("curleft:"+curleft);

$("#huaBlock").animate({"width":curliWidth,"left":curleft},500);

},function(){

$("#huaBlock").stop();

$("#huaBlock").animate({"width":98,"left": 5},200);

});

使用在线HTML/CSS/JavaScript代码运行工具 http://tools.jb51.net/code/HtmlJsRun测试运行效果如下：

希望本文所述对大家jQuery程序设计有所帮助。

html 滑动导航效果,jQuery实现的滑块滑动导航效果示例相关推荐

楼梯式导航 html,jQuery仿京东商城楼梯式导航定位菜单|jquery网站楼层导航
jQuery京东浮动网站楼层导航代码是一款仿京东商城网页左侧浮动楼层导航特效代码.具有一定的参考价值,感兴趣的小伙伴们可以参考一下. CSS样式如下: *{ margin:0; padding:0; ...
php下拉框选中效果,jquery模拟select下拉框效果
最近开发一网站的过程中碰到个需求,没有使用传统的select下拉框,而是使用了现代比较美观的一些元素设计了一个下拉框.对于这种东东,第一反应就是使用jquery来模拟了,还好,网上找了下,很快就找到了 ...
html效果浮窗效果,jQuery简单实现中间浮窗效果
本文实例讲述了jQuery简单实现中间浮窗效果.分享给大家供大家参考,具体如下: basic.css: /* * -- 样式说明 -- * 最大优先实现法,全局能实现不用区域,区域能实现不用模板,模板 ...
html轮播鼠标悬停效果,jQuery图片轮播加悬停效果
插件描述:jQuery图片轮播加悬停效果 =======以下内容由会员只看不发了提供============ 使用方法 1.将文档内内部样式表保存到目录css下的style.css文件中,并在页面 ...
js html页面切换效果,jQuery实现切换页面过渡动画效果
这篇文章主要介绍了关于jQuery实现切换页面过渡动画效果,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下这是一款效果非常酷的jQuery和CSS3通过AJAX调用切换页面过渡动画特效 ...
html 网页跳转动画效果,jQuery实现切换页面过渡动画效果_jquery
直接为大家介绍制作过程,希望大家可以喜欢. HTML结构该页面切换特效的HTML结构使用一个元素来作为页面的包裹元素,div.cd-cover-layer用于制作页面切换时的遮罩层,div.cd-l ...
基于jQuery鼠标悬停上下滑动导航条
基于jQuery鼠标悬停上下滑动导航条.这是一款蓝色好看的鼠标响应式网站导航菜单特效.效果图如下: 在线预览源码下载实现的代码. html代码: <div id="menu2 ...
手机html5翻页效果代码,jquery html5手机端翻书效果_手指滑动书本翻页效果代码
特效描述:jquery html5手机端翻书手指滑动书本翻页效果.显现手机端翻书效果,支持手拖动翻页代码结构 1. 引入JS 2. HTML代码 function loadApp() { // ...
在 jQuery 中使用滑入滑出动画效果，实现二级下拉导航菜单的显示与隐藏效果
查看本章节查看作业目录需求说明: 在 jQuery 中使用滑入滑出动画效果,实现二级下拉导航菜单的显示与隐藏效果用户将光标移动到"最新动态页"或"帮助查询" ...

html 滑动导航效果,jQuery实现的滑块滑动导航效果示例

html 滑动导航效果,jQuery实现的滑块滑动导航效果示例相关推荐

最新文章

热门文章