jquery实现顶部向右伸缩的导航区域代码


Posted in Javascript onSeptember 02, 2015

本文实例讲述了jquery实现顶部向右伸缩的导航区域代码。分享给大家供大家参考。具体如下:

这是一款类似导航的菜单,但扩展性比较强,不但可以用作菜单,更可以用作导航块效果,导航块内可以含有菜单或者是其它的一些功能,本效果基于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">
<head>
<title>鼠标单击控制收缩和展开的窗口</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type="text/css">
*{margin:0;padding:0;}
#box{position:absolute;right:0;top:0;overflow:hidden;}
#arrow{color:#fff;background:#000;width:20px;height:90px;line-height:90px;font-size:12px;font-family:"宋体";text-align:center;font-weight:bold;float:left;}
#col_box{width:400px;height:90px;background:#eee;float:left;}
</style>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
 var oMoveBox = $("#col_box"), oArr = $("#arrow"), maxL = 400;
 oArr.click(function(){
  oMoveBox.animate({"width":"-="+maxL},600,function(){
   maxL = -maxL;
   $("#arrow").html(maxL<0 ? "<" : ">");
  })
 });
});
</script>
</head>
<body>
<div id="box">
 <div id="arrow">></div>
 <div id="col_box">z<br>z<br>s<br>k<br>y</div>
</div>
</body>
</html>

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

Javascript 相关文章推荐
Javascript中this的用法详解
Sep 22 Javascript
jquery简单图片切换显示效果实现方法
Jan 14 Javascript
jQuery控制网页打印指定区域的方法
Apr 07 Javascript
javascript获取select值的方法分析
Jul 02 Javascript
基于KO+BootStrap+MVC实现的分页控件代码分享
Nov 07 Javascript
vue.js单页面应用实例的简单实现
Apr 10 Javascript
详谈js对url进行编码和解码(三种方式的区别)
Aug 16 Javascript
JavaScript EventEmitter 背后的秘密 完整版
Mar 29 Javascript
JavaScript 性能提升之路(推荐)
Apr 10 Javascript
JS异步错误捕获的一些事小结
Apr 26 Javascript
vue-cli2与vue-cli3在一台电脑共存的实现方法
Sep 25 Javascript
Vue的Eslint配置文件eslintrc.js说明与规则介绍
Feb 03 Javascript
jquery实现的Banner广告收缩效果代码
Sep 02 #Javascript
js实现拉幕效果的广告代码
Sep 02 #Javascript
JS实现弹性漂浮效果的广告代码
Sep 02 #Javascript
jquery实现可关闭的倒计时广告特效代码
Sep 02 #Javascript
jquery实现滑屏大图定时收缩为小banner图片的广告代码
Sep 02 #Javascript
使用canvas实现仿新浪微博头像截取上传功能
Sep 02 #Javascript
js随机生成字母数字组合的字符串 随机动画数字
Sep 02 #Javascript
You might like
解析PHP提交后跳转
2013/06/23 PHP
php header功能的使用
2013/10/28 PHP
浅谈Laravel模板实体转义带来的坑
2019/10/22 PHP
php 命名空间(namespace)原理与用法实例小结
2019/11/13 PHP
TNC vs BOOM BO3 第一场2.13
2021/03/10 DOTA
基于jquery的页面划词搜索JS
2010/09/14 Javascript
jquery offset函数应用实例
2012/11/14 Javascript
javascript表单验证 - Parsley.js使用和配置
2013/01/25 Javascript
JQuery实现带排序功能的权限选择实例
2015/05/18 Javascript
详解JavaScript实现设计模式中的适配器模式的方法
2016/05/18 Javascript
Vue组件BootPage实现简单的分页功能
2016/09/12 Javascript
Bootstrap 中data-[*] 属性的整理
2018/03/13 Javascript
Vant的安装和配合引入Vue.js项目里的方法步骤
2018/12/05 Javascript
JavaScript数据结构与算法之二叉树实现查找最小值、最大值、给定值算法示例
2019/03/01 Javascript
微信小程序实现传递多个参数与事件处理
2019/08/12 Javascript
详解如何在JS代码中消灭for循环
2019/12/11 Javascript
JavaScript进阶(三)闭包原理与用法详解
2020/05/09 Javascript
Vue和React有哪些区别
2020/09/12 Javascript
盘点提高 Python 代码效率的方法
2014/07/03 Python
python数据结构之图的实现方法
2015/07/08 Python
python搭建服务器实现两个Android客户端间收发消息
2018/04/12 Python
解决python3 网络请求路径包含中文的问题
2018/05/10 Python
python 拼接文件路径的方法
2018/10/23 Python
Python正则匹配判断手机号是否合法的方法
2020/12/09 Python
浅谈Python 列表字典赋值的陷阱
2019/01/20 Python
Flask框架单例模式实现方法详解
2019/07/31 Python
python tkinter canvas使用实例
2019/11/04 Python
详解python 中in 的 用法
2019/12/12 Python
使用OpenCV校准鱼眼镜头的方法
2020/11/26 Python
发现世界上最好的珠宝设计师:JewelStreet
2017/12/17 全球购物
加拿大户外探险购物网站:SAIL
2020/06/27 全球购物
一套C#面试题
2013/10/09 面试题
大学英语演讲稿范文
2014/04/24 职场文书
tensorflow学习笔记之tfrecord文件的生成与读取
2021/03/31 Python
为Centos安装指定版本的Docker
2022/04/01 Servers
Nginx 502 bad gateway错误解决的九种方案及原因
2022/08/14 Servers