jQuery右侧边固定层导航菜单依次动画滑动显示菜单展开-20130704 -

xjwolaile

浏览: 345135 次
性别:
来自: 杭州

最近访客更多访客>>

waylon33

Cyoooa

h06910101

androidHua

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

jQuery右侧边固定层导航菜单依次动画滑动显示菜单展开-20130704

博客分类：

学习
前端技术
jQuery

setTimeout find each animate clearTimeout

1、效果及功能说明
右侧边固定层导航菜单，鼠标滑过浮动层导航菜单依次动画滑动显示菜单内容展开，鼠标离开后菜单收缩

2、实现原理

展开是通过计算鼠标触及装有a标签的div开始从0号a标签开始展开每个展开是0.2秒每一个之间的这个效果不轮用户是从上面触及还是从下面触及都是从上面的0号开始展开到最后的
间隔是50*200 每个全部展开的时间是0.3秒

回收也是鼠标只要移动开会从最上面的a标签开始回收到最后

3、效果图

4、运行环境

IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现

(没有图片)5、所有图片的压缩包新建一个文件后将包解压放进文件夹图片的压缩包在页面的最下方可以看到并下载下载后无需修改文件夹名因为本身就已经写好了和html5内的路径相吻合

6、将创建html文件保存的时候将编码类型换成(UTF-8有签名)这样可以让部分中文正常的显示出来，将保存类型(T)换成(所有文件(*.*))，将html5和解压后的图片文件夹放在同一个文件夹内效果

7、代码[html5]

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;text-decoration:none;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";background:#DCDCDC;}
/* rightNav */
.rightNav{position:fixed;top:0;right:0;z-index:9999;width:140px;cursor:pointer;margin:100px 0 0 0;}
*html,*html body /* 修正IE6振动bug */{background-image:url(about:blank);background-attachment:fixed;}
*html .rightNav{position:absolute;top:expression(eval(document.documentElement.scrollTop));}
.rightNav a{display:block;position:relative;height:30px;line-height:30px;margin-bottom:2px;background:#fff;padding-right:10px;width:130px;overflow:hidden;cursor:pointer;right:-110px;}
.rightNav a:hover{text-decoration:none;color:#1974A1;}
.rightNav a:hover em{background:#00b700}
.rightNav a em{display:block;float:left;width:30px;background:#1974A1;color:#fff;font-size:16px;text-align:center;margin-right:10px;font-style:normal;}
</style>

</head>
<body>
<!-- 右侧导航 -->
<div class="rightNav">
	<a href="http://www.17sucai.com/"><em>0</em>站长素材</a>
	<a href="http://www.17sucai.com/"><em>1</em>书签切换</a>
	<a href="http://www.17sucai.com/"><em>2</em>幻灯片</a>
	<a href="http://www.17sucai.com/"><em>3</em>图片滚动-左</a>
	<a href="http://www.17sucai.com/"><em>4</em>图片滚动-上</a>
	<a href="http://www.17sucai.com/"><em>5</em>图片无缝滚动-左</a>
	<a href="http://www.17sucai.com/"><em>6</em>图片无缝滚动-上</a>
	<a href="http://www.17sucai.com/"><em>7</em>文字滚动-左</a>
	<a href="http://www.17sucai.com/"><em>8</em>文字滚动-上</a>
	<a href="http://www.17sucai.com/"><em>9</em>文字无缝滚动-左</a>
	<a href="http://www.17sucai.com/"><em>10</em>文字无缝滚动-上</a>
	<a href="http://www.17sucai.com/"><em>11</em>其它基础效果</a>
</div>
<script type="text/javascript">
var btb=$(".rightNav");
//将整个导航的div放进进btb
var tempS;
//定义参数
$(".rightNav").hover(function(){
//定义个伪类
	var thisObj = $(this);
	//定义参数
	tempS = setTimeout(function(){
	//setTimeout指定的毫秒数后调用函数或计算表达式
		thisObj.find("a").each(function(i){
		//通过each方法就可以匹配到每一个a标签
			var tA=$(this);
			//定义参数
			setTimeout(function(){
			//定义指定的毫秒数后调用函数或计算表达式
				tA.animate({right:"0"},300);
				//调整当鼠标触及到任意的a标签上所有的标签都会在0.3秒展开
			},50*i);
			//定义当第一个展开以后，后面的结果多久才展开0.05*200
		});
	},200);
	//当鼠标触到a标签以后花多少时间展开第一个
},function(){
//在jquery定义方法
	if(tempS){
	//判断tempS
		clearTimeout(tempS);
		//clearTimeout方法可取消由 setTimeout() 方法
	}
	$(this).find("a").each(function(i){
	//通过each方法就可以匹配到每一个a标签
		var tA=$(this);
		//定义参数
		setTimeout(function(){
		//定义指定的毫秒数后调用函数或计算表达式
			tA.animate({right:"-110"},300,function(){
			//调整当鼠标离开所有的a标签，标签都会在0.3秒回缩，回缩多少-110
			});
		},50*i);
		//定义当第一个展开以后，后面的结果多久才展开0.05*200
	});
});
</script>

<div style="height:1000px;"></div>

</body>
</html>

查看图片附件

分享到：

jQuery左侧列表导航条鼠标滑过flash动画导 ... | jQuery侧面浮动图片广告或滚屏图片广告-2 ...

2013-07-04 23:35
浏览 6317
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

kernel-devel-4.18.0-553.45.1.el8-10.x86-64.rpm: Rocky Linux 8.10内核包

Simulink中三阶单环多位量化Σ-Δ调制器的设计与实现-音频带ADC的应用（复现论文或解答问题，含详细可运行代码及解释）: 内容概要：本文档详细介绍了如何在Simulink中设计一个满足特定规格的音频带ADC（模数转换器）。首先选择了三阶单环多位量化Σ-Δ调制器作为设计方案，因为这种结构能在音频带宽内提供高噪声整形效果，并且多位量化可以降低量化噪声。接着，文档展示了具体的Simulink建模步骤，包括创建模型、添加各个组件如积分器、量化器、DAC反馈以及连接它们。此外，还进行了参数设计与计算，特别是过采样率和信噪比的估算，并引入了动态元件匹配技术来减少DAC的非线性误差。性能验证部分则通过理想和非理想的仿真实验评估了系统的稳定性和各项指标，最终证明所设计的ADC能够达到预期的技术标准。适用人群：电子工程专业学生、从事数据转换器研究或开发的技术人员。使用场景及目标：适用于希望深入了解Σ-Δ调制器的工作原理及其在音频带ADC应用中的具体实现方法的人群。目标是掌握如何利用MATLAB/Simulink工具进行复杂电路的设计与仿真。其他说明：文中提供了详细的Matlab代码片段用于指导读者完成整个设计流程，同时附带了一些辅助函数帮助分析仿真结果。

计算机课后习题.docx### 【计算机科学】研究生入学考试计算机组成原理专项题库设计：考研复习资源集成与优化: 内容概要：该题库专为研究生入学考试计算机组成原理科目设计，涵盖名校考研真题、经典教材课后习题、章节题库和模拟试题四大核心模块。名校考研真题精选多所知名高校的计算机组成原理科目及计算机联考真题，并提供详尽解析，帮助考生把握考研命题趋势与难度。经典教材课后习题包括白中英《计算机组成原理》（第5版）和唐朔飞《计算机组成原理》（第2版）的全部课后习题解答，这两部教材被众多名校列为考研指定参考书目。章节题库精选代表性考题，注重基础知识与重难点内容，帮助考生全面掌握考试大纲要求的知识点。模拟试题依据历年考研真题命题规律和热门考点，精心编制两套全真模拟试题，并附标准答案，帮助考生检验学习成果，评估应试能力。适用人群：计划参加研究生入学考试并报考计算机组成原理科目的考生，尤其是需要系统复习和强化训练的学生。使用场景及目标：①通过研读名校考研真题，考生可以准确把握考研命题趋势与难度，有效评估复习成效；②通过经典教材课后习题的练习，考生可以巩固基础知识，掌握解题技巧；③通过章节题库的系统练习，考生可以全面掌握考试大纲要求的各个知识点，为备考打下坚实基础；④通过模拟试题的测试，考生可以检验学习成果，评估应试能力，为正式考试做好充分准备。其他说明：该题库不仅提供详细的题目解析，还涵盖了计算机组成原理的各个方面，包括计算机系统概述、数据表示与运算、存储器分层、指令系统、中央处理器、总线系统和输入输出系统等。考生在使用过程中应结合理论学习与实践操作，注重理解与应用，以提高应试能力和专业知识水平。

__UNI__DB9970A__20250328141034.apk.1: __UNI__DB9970A__20250328141034.apk.1

minio-rsc-Rust资源: rust for minio

4-4-台区智能融合终端功能模块型式规范（试行）.pdf: 国网台区终端最新规范

《基于YOLOv8的化工管道焊缝缺陷检测系统》（包含源码、可视化界面、完整数据集、部署教程）简单部署即可运行。功能完善、操作简单，适合毕设或课程设计.zip: 资源内项目源码是来自个人的毕业设计，代码都测试ok，包含源码、数据集、可视化页面和部署说明，可产生核心指标曲线图、混淆矩阵、F1分数曲线、精确率-召回率曲线、验证集预测结果、标签分布图。都是运行成功后才上传资源，毕设答辩评审绝对信服的保底85分以上，放心下载使用，拿来就能用。包含源码、数据集、可视化页面和部署说明一站式服务，拿来就能用的绝对好资源！！！项目备注 1、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！ 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习，也适合小白学习进阶，当然也可作为毕设项目、课程设计、大作业、项目初期立项演示等。 3、如果基础还行，也可在此代码基础上进行修改，以实现其他功能，也可用于毕设、课设、作业等。下载后请首先打开README.txt文件，仅供学习参考, 切勿用于商业用途。

python源码-1个机器学习相关资源: 一个简单的机器学习代码示例，使用的是经典的鸢尾花（Iris）数据集，通过 Scikit-learn 库实现了一个简单的分类模型。这个代码可以帮助你入门机器学习中的分类任务。

pyqt离线包，pyqt-tools离线包: pyqt离线包，pyqt-tools离线包

《基于YOLOv8的船舶机舱灭火系统状态监测系统》（包含源码、可视化界面、完整数据集、部署教程）简单部署即可运行。功能完善、操作简单，适合毕设或课程设计.zip: 资源内项目源码是来自个人的毕业设计，代码都测试ok，包含源码、数据集、可视化页面和部署说明，可产生核心指标曲线图、混淆矩阵、F1分数曲线、精确率-召回率曲线、验证集预测结果、标签分布图。都是运行成功后才上传资源，毕设答辩评审绝对信服的保底85分以上，放心下载使用，拿来就能用。包含源码、数据集、可视化页面和部署说明一站式服务，拿来就能用的绝对好资源！！！项目备注 1、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！ 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习，也适合小白学习进阶，当然也可作为毕设项目、课程设计、大作业、项目初期立项演示等。 3、如果基础还行，也可在此代码基础上进行修改，以实现其他功能，也可用于毕设、课设、作业等。下载后请首先打开README.txt文件，仅供学习参考, 切勿用于商业用途。

SQL常用日期和时间函数整理及使用示例: SQL常用日期和时间函数整理及在sqlserver测试示例主要包括 1.查询当前日期GETDATE 2.日期时间加减函数DATEADD 3 返回两个日期中指定的日期部分之间的差值DATEDIFF 4.日期格式转换CONVERT(VARCHAR(10),GETDATE(),120) 5.返回指定日期的年份数值 6.返回指定日期的月份数值 7.返回指定日期的天数数值

GSDML-V2.3-Turck-BL20-E-GW-EN-20160524-010300.xml: GSDML-V2.3-Turck-BL20_E_GW_EN-20160524-010300.xml

T_CPCIF 0225-2022 多聚甲醛.docx: T_CPCIF 0225-2022 多聚甲醛.docx

《基于YOLOv8的智能仓储货物堆码倾斜预警系统》（包含源码、可视化界面、完整数据集、部署教程）简单部署即可运行。功能完善、操作简单，适合毕设或课程设计.zip: 《基于YOLOv8的智能仓储货物堆码倾斜预警系统》（包含源码、可视化界面、完整数据集、部署教程）简单部署即可运行。功能完善、操作简单，适合毕设或课程设计

蚕豆脱壳机设计.zip: 蚕豆脱壳机设计.zip

附件2-2：台区智能融合终端入网专业检测单位授权委托书.docx: 台区终端电科院送检文档

Y6一39一No23.6D离心通风机 CAD().zip: Y6一39一No23.6D离心通风机 CAD().zip

django自建博客app: django自建博客app

附件3-4：台区智能融合终端全性能试验增值税发票开具确认单.docx: 台区终端电科院送检文档

非开挖水平定向钻机动力头装置设计.zip: 非开挖水平定向钻机动力头装置设计.zip

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jQuery右侧边固定层导航菜单依次动画滑动显示菜单展开-20130704

评论

发表评论

相关推荐

Zepto

node.js的学习-20140611

node.js的学习-20140609

git的学习-20140604

PC和移动端的页面的一些差距-20140525

Bootstrap排版基础样式和响应式图片-20140521

Bootstrap特性、设计和组件-20140519

Bootstrap流式布局-20140515

Bootstrap的宽度和分辨率的差别-20140514

Bootstrap的认识-20140513

jquery初步认识-20140123

html5的特殊标签作用-20140114

ie下的指定样式-20140106

margin-left在IE6下左浮动加倍-20140102

浮动存在的问题-20131229

在ie6下同张图片不能外面包有a标签后在画热区-20131223

ie6下导航存在的问题和-2013-12-20

按比例展示的小js-20131217

定位需要注意-20131214

flash在Safari下的BUG-20131212

最近访客更多访客>>