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 相关文章推荐
FusionCharts图表显示双Y轴双(多)曲线
Nov 22 Javascript
javascript跨域的4种方法和原理详解
Apr 08 Javascript
Linux下使用jq友好的打印JSON技巧分享
Nov 18 Javascript
JavaScript实现点击文字切换登录窗口的方法
May 11 Javascript
javascript图片滑动效果实现
Jan 28 Javascript
jQuery表单元素选择器代码实例
Feb 06 Javascript
JS在浏览器中解析Base64编码图像
Feb 09 Javascript
jQuery UI Grid 模态框中的表格实例代码
Apr 01 jQuery
详解webpack的配置文件entry与output
Aug 21 Javascript
echarts大屏字体自适应的方法步骤
Jul 12 Javascript
JS实现简单tab选项卡切换
Oct 25 Javascript
uniapp实现横向滚动选择日期
Oct 21 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/03/20 PHP
thinkphp在低版本Nginx 下支持PATHINFO的方法分享
2016/05/27 PHP
thinkPHP实现多字段模糊匹配查询的方法
2016/12/01 PHP
PHP设计模式之PHP迭代器模式讲解
2019/03/22 PHP
php封装的page分页类完整实例代码
2020/02/01 PHP
Sample script that displays all of the users in a given SQL Server DB
2007/06/16 Javascript
Js 弹出框口并返回值的两种常用方法
2010/12/30 Javascript
改进版通过Json对象实现深复制的方法
2012/10/24 Javascript
javascript基础知识之html5轮播图实例讲解(44)
2017/02/17 Javascript
实例解析js中try、catch、finally的执行规则
2017/02/24 Javascript
vue拦截器Vue.http.interceptors.push使用详解
2017/04/22 Javascript
Vue-router路由判断页面未登录跳转到登录页面的实例
2017/10/26 Javascript
vue-router 源码实现前端路由的两种方式
2018/07/02 Javascript
jQuery实现监听下拉框选中内容发生改变操作示例
2018/07/13 jQuery
微信小程序仿RadioGroup改变样式的处理方案
2018/07/13 Javascript
深入理解Vue keep-alive及实践总结
2019/08/21 Javascript
[01:12]DOTA2次级职业联赛 - Newbee.Y 战队宣传片
2014/12/01 DOTA
python简单判断序列是否为空的方法
2015/06/30 Python
python通过socket实现多个连接并实现ssh功能详解
2017/11/08 Python
pandas object格式转float64格式的方法
2018/04/10 Python
使用Python对微信好友进行数据分析
2018/06/27 Python
matplotlib实现区域颜色填充
2019/03/18 Python
Python字典中的值为列表或字典的构造实例
2019/12/16 Python
python利用JMeter测试Tornado的多线程
2020/01/12 Python
python读取mysql数据绘制条形图
2020/03/25 Python
Python通过字典映射函数实现switch
2020/11/06 Python
css3实现背景图片拉伸效果像桌面壁纸一样
2013/08/19 HTML / CSS
蒙蒂塞罗商店:Monticello Shop
2018/11/25 全球购物
法人授权委托书
2014/04/03 职场文书
《桥》教学反思
2014/04/09 职场文书
我为党旗添光彩演讲稿
2014/09/10 职场文书
护士医德医风心得体会
2016/01/25 职场文书
小学体育队列队形教学反思
2016/02/16 职场文书
教学反思怎么写
2016/02/24 职场文书
尝试使用Python爬取城市租房信息
2022/04/12 Python
MySQL 执行数据库更新update操作的时候数据库卡死了
2022/05/02 MySQL