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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery实现导航滑动</title>
<style type="text/css">
.navlist
{
position: absolute;
top: 10px;
}
a
{
text-decoration: none;
color: White;
}
.navlist a
{
margin-left: 60px;
color: #666;
}
.expand
{
height: 0px;
background-color: #333d4d;
overflow: hidden;
position: relative;
top: 30px;
width: 100%;
}
.expdiv
{
height: 130px;
width: 500%;
}
.expdiv-list
{
width: 20%;
text-align: center;
float: left;
line-height: 110px;
color: White;
}
.expand .close-btn
{
width: 120px;
height: 20px;
background: url(http://img.mukewang.com/5461ba3b0001ee3603840154.jpg) no-repeat -13px -117px;
position: absolute;
left: 50%;
bottom: -2px;
margin-left: -60px;
cursor: pointer;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#menuList").on("click", "a", function () {
// 模拟点击closeBtn按钮
if($(this).hasClass("btn-active")){
$("#expandZone #closeBtn").click();
return false;
} var curIndex = $(this).index(), mlValue = "-" + curIndex * 100 + "%";
if ($("#expandZone").hasClass("active")) {
// 给expdiv类元素赋予动画切换的效果
$("#expandZone .expdiv").animate({ marginLeft: mlValue }); }
else {
$("#expandZone .expdiv").css({ marginLeft: mlValue });
$("#expandZone").animate({ height: "130px" }).addClass("active");
}
// 为当前元素添加"btn-active"样式，同时移除同级其它元素的"btn-active"样式 $(this).addClass("btn-active").siblings().removeClass("btn-active"); return false;
}); $("#expandZone #closeBtn").on("click", function () {
$("#expandZone").animate({ height: "0px" }, function () {
$(this).removeClass("active");
$("#menuList .btn-active").removeClass("btn-active");
});
return false;
});
});
</script>
</head>
<body>
<div id="menuList" class="navlist">
<a href="#">首页</a> <a href="#">课程大厅</a> <a href="#">学习中心</a> <a href="#">个人中心</a>
<a href="#">关于我们</a>
</div>
<div id="expandZone" class="expand">
<div class="expdiv">
<div class="expdiv-list">
<a href="#">主页</a>
</div>
<div class="expdiv-list">
<a href="#" id="A4">前端课程</a> <a href="#">手机开发</a> <a href="#">后台编程</a>
</div>
<div class="expdiv-list">
<a href="#">Javascript</a> <a href="#">CSS</a> <a href="#">JQuery</a>
</div>
<div class="expdiv-list">
个人信息：
</div>
<div class="expdiv-list">
公司地址：山东省淄博市
</div>
</div>
<div id="closeBtn" class="close-btn">
</div>
</div>
</body>
</html>
Jquery实现特效滑动菜单栏的更多相关文章
- 基于jQuery图片遮罩滑动文字切换特效
基于jQuery图片遮罩滑动文字切换特效.这是一款jquery hover鼠标滑动选项卡切换透明背景遮罩文字显示特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div ...
- jQuery动画特效实例教程
本文以实例形式详细讲述了jQuery动画特效的实现方法. 1.自制折叠内容块 内容块如下: <div class="module"> <div cla ...
- 基于 jQuery 实现垂直滑动的手风琴效果
今天我们要与大家分享一个漂亮而灵活的垂直 jQuery 手风琴效果.其主要思想是扩大手风琴片上的点击和显示更多的信息.其他内容片段将变得不那么透明.当使用一个导航箭头导航下一个片段,新的片会从顶部或底 ...
- 有时候就是看不进论文-jQuery动画特效篇&MySQL
hi 早上知道新的乱斗模式后,没忍住开了几把,然后就无心论文了...用这个来破吧 1.jQuery -----动画特效----- ----调用show()和hide()方法显示和隐藏元素 show() ...
- 三、jQuery--jQuery基础--jQuery基础课程--第7章 jQuery 动画特效
1.调用show()和hide()方法显示和隐藏元素 show()和hide()方法用于显示或隐藏页面中的元素,它的调用格式分别为:$(selector).hide(speed,[callback]) ...
- 15个web前端的美轮美奂的 jQuery 图片特效
jQuery是一个非常优秀的 JavaScript 框架,使用简单灵活,同时还有许多成熟的插件可供选择.其中,jQuery 最令人印象深刻的应用之一就是对图片的处理,它可以让帮助你在你的项目中加入各种 ...
- 18款js和jquery文字特效代码分享
18款js和jquery文字特效代码分享 jQCloud标签云插件_热门城市文字标签云代码 js 3d标签云特效关键词文字球状标签云代码 原生JS鼠标悬停文字球状放大显示效果代码 原生js文字动画圆形 ...
- 基于jQuery鼠标滚轮滑动到页面节点部分
基于jQuery鼠标滚轮滑动到页面节点部分.这是一款基于jQuery+CSS3实现的使用鼠标滚轮或者手势滑动到页面节点部分特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: &l ...
- 【Android UI设计与开发】9：滑动菜单栏（一）开源项目SlidingMenu的使用和示例
一.SlidingMenu简介 相信大家对SlidingMenu都不陌生了,它是一种比较新的设置界面或配置界面的效果,在主界面左滑或者右滑出现设置界面效果,能方便的进行各种操作.很多优秀的应用都采用了 ...
随机推荐
- HotApp小程序统计,第一个专业的微信第三方小程序统计工具
1.什么是HotApp小程序统计 HotApp小程序统计是第一个微信第三方小程序统计工具,就像做android 和 ios开发的人知道友盟统计一样,小程序也需要有个统计工具. 通过这个工具,可以知道小 ...
- iOS平台UDID方案比较
苹果在iOS6中禁用了[UIDevice uniqueIdentifier],在iOS7中又把mac地址的获取给堵上了.没办法,毕竟人家是老大,说不让你用,你也没办法.在这边总结一下现有的一部分UDI ...
- javaweb项目jsp跳转servlet Error instantiating servlet class 问题
问题: HTTP Status 500 - Error instantiating servlet class RecommenderServlet type Exception report mes ...
- Java并发之原子变量和原子引用与volatile
我们知道在并发编程中,多个线程共享某个变量或者对象时,必须要进行同步.同步的包含两层作用:1)互斥访问(原子性):2)可见性:也就是多个线程对共享的变量互斥地访问,同时线程对共享变量的修改必须对其他线 ...
- QPalette的用法
1.QPalette的概念 调色板类QPallete提供了颜色角色(color roles)概念,是指当前GUI界面中颜色的职责,通过枚举变量QPalette::ColorRole来定义, 比较常用的 ...
- 用C++开发Binder服务
用C++来实现Binder服务比较麻烦,原因是没有AIDL的辅助,必须手工来写中间的代码. 首先写一个服务类ExampleServer的代码: class ExampleServer : public ...
- android android BitmapFactory报错OOM
解决方法:listview中尽量不要使用ImageView作为item的组件 换成view并设background
- Windows批处理：自动开关程序
公司有台14年组装的PC,时常无故重启,所以编写了个然并卵的批处理来测试稳定性. 打开程序.bat @echo off title Start Software color 2F : "C: ...
- 主席树——求静态区间第k大
例题:poj2104 http://poj.org/problem?id=2104 讲解:http://blog.sina.com.cn/s/blog_6022c4720102w03t.html ht ...
- [LeetCode] Range Addition 范围相加
Assume you have an array of length n initialized with all 0's and are given k update operations. Eac ...