jQuery左侧列表导航条鼠标滑过flash动画导航条-20130705 -

xjwolaile

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

最近访客更多访客>>

waylon33

Cyoooa

h06910101

androidHua

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

jQuery左侧列表导航条鼠标滑过flash动画导航条-20130705

博客分类：

jQuery
学习
前端技术

ready slide each animate hover

1、效果及功能说明
左侧列表导航条制作鼠标滑过导航条标签，flash动画导航条展示

2、实现原理

首先导航栏是在被一个块级容器给挡住了在页面加载完成以后会从块级容器里动过一个动画效果向右移动出来，每一个时间间隔是0.05*0.2秒移动在要0.3秒内完成动画效果然后是一个伪类的事件效果当鼠标移动到一个a标签上又会触发一个动画效果a容器会加长20px文字向右移动到-110px并且改变文字的颜色这个动画在0.3秒内完成，当鼠标移开后0.3内a标签回复原来样子

3、效果图

4、运行环境

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

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

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

7、代码[html5]

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>

<body>

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{background:#1d1d1d;font:12px/180% "Lucida Grande", Verdana, sans-serif;}
.navbox{margin:30px auto;position:relative;width:340px;}
.navbox .mask{position:absolute;top:30px;left:-190px;}
.navbox h2{color:#ffff66;margin:0 0 0 13px;height:40px;font-size:14px;}
/* sliderNav */
#sliderNav{font-size:14px;margin:30px 0 0 0;}
#sliderNav li.sliderTag h3,#sliderNav li.sliderTag a{display:block;width:180px;padding:5px 18px;margin:0 0 5px 0;}
#sliderNav li.sliderTag h3{color:#000;background:#eee;font-weight:normal;font-size:14px;}
#sliderNav li.sliderTag a{color:#999;background:#4B4B4B;border:1px solid #1a1a1a;text-decoration:none;}
#sliderNav li.sliderTag a:hover{color:#ffff66;}
</style>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//在文档加载后激活函数
	slide("#sliderNav", 25, 15, 180, .8);
	//控制块级元素ul上下左后的位置
});

function slide(navigation_id, pad_out, pad_in, time, multiplier){
//定义方法

	var list_elements = navigation_id + " li.sliderTag";
	// 创建页面加载完以后第一个动画在哪里实现
	
	var link_elements = list_elements + " a";
	//在鼠标触及到那里触发动画效果
	
	var timer = 0;
	// 启动定时器用于滑动动画

	$(list_elements).each(function(i){
	// 创建幻灯片动画的所有列表元素
	
		$(this).css("margin-left","-210px");
		//将所有的li在页面加载完毕以后的位置在动画触发前的位置，有一个块级元素给把它们覆盖住的位置
		
		timer = (timer*multiplier + time);
		//在页面家在完成后li元素从块级元素里面出来的动画效果
		$(this).animate({ marginLeft: "0" }, timer);
		//控制li出来动画的幅度有多大 0 就是控制的幅度 数字越大 出来的每一个出来向右移动的位置就越多
		$(this).animate({ marginLeft: "15px" }, timer);
		//控制li出来以后每一个标签的距左的幅度有多大
		$(this).animate({ marginLeft: "0" }, timer);
		//控制当li的动画效果出来以后距左到15px的时候在回到0px上面一个效果
	});

	
	$(link_elements).each(function(i){
	// 创建的所有链接元素的悬停滑动效果	
	
		$(this).hover(function(){
		// 定义一个伪类
			$(this).animate({ paddingLeft: pad_out }, 180);
			//控制当鼠标触碰到a标签上在0.18秒的时间里完成动画效果
		},function(){
		//在jquery里面在定义个方法
			$(this).animate({ paddingLeft: pad_in }, 180);
			//当鼠标离开以后a标签花0.18秒回到原位
		});
	});

}
</script>

<div class="navbox">
	<img width="190" height="317" src="images/background.jpg" class="mask" />
	<h2>jquery导航条悬停效果</h2>
	<ul id="sliderNav">
		<li class="sliderTag"><h3>jquery flash动画导航条</h3></li>
		<li class="sliderTag"><a href="http://www.17sucai.com/">网站首页</a></li>
		<li class="sliderTag"><a href="http://www.17sucai.com/">jquery 特效</a></li>
		<li class="sliderTag"><a href="http://www.17sucai.com/">javascript特效</a></li>
		<li class="sliderTag"><a href="http://www.17sucai.com/">flash特效</a></li>
		<li class="sliderTag"><a href="http://www.17sucai.com/">div+css教程</a></li>
		<li class="sliderTag"><a href="http://www.17sucai.com/">html5教程</a></li>
	</ul>
</div><!--navbox end-->
	
</body>
</html>

images.rar (892 Bytes)
下载次数: 0

查看图片附件

分享到：

jQuery左导航菜单二级菜单slide滑动渐隐显 ... | jQuery右侧边固定层导航菜单依次动画滑动显 ...

2013-07-05 23:30
浏览 1195
评论(0)
分类:Web前端
查看更多

发表评论

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

相关推荐

JQuery&CSS;&CSS;+DIV实例大全.rar: 5.jquery实现鼠标划过网址名称显示网站截图功能 6.jQuery带Tips动画提示通用表单验证插件下载(jquery validate),动画效果漂亮 7.jQuery鼠标移到下载地址滑出气泡提示效果的插件 8.又一款jquery实现链接Tip...

移动开发_Android_基础框架_SAFApi组件开发_1742847786.zip: 移动开发_Android_基础框架_SAFApi组件开发_1742847786.zip

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

FourOnes_jquerybootstraptenine_1742855636.zip: app开发

MobaXterm安装包: MobaXterm安装包

30页-清华科技园智慧园区方案.pdf: 智慧园区，作为智慧城市的重要组成部分，正借助5G、云计算、大数据等前沿技术，实现园区的全面智慧化升级。它不仅仅是技术的堆砌，更是园区管理模式和服务理念的革新。智慧园区通过构建统一的大数据平台，实现园区内各类数据的整合与共享，让管理者能够全局掌握园区运营状态，实现人、事、物的穿透式管理。在5G技术的加持下，智慧园区的特色应用得以更加广泛和深入地开展。从便捷通行到智慧物联，从楼宇自控到企业服务，5G智慧园区为园区内的企业和员工提供了前所未有的便捷与高效。刷脸通行、车牌识别、访客线上预约等技术的应用，不仅提升了园区的安全等级，更让通行变得简单快捷。而智慧垃圾桶、路灯等物联网设备的引入，则让园区的环境管理更加智能化、精细化。此外，5G智慧园区还通过无人机巡检、无人驾驶等创新应用，为园区的安全管理、物资配送等方面带来了全新的解决方案。值得一提的是，智慧园区的建设并不仅仅局限于硬件设施的升级，更在于服务模式的创新。通过园区APP、在线服务平台等渠道，智慧园区实现了园区服务的线上化、便捷化，让企业和员工能够随时随地享受到园区提供的各类服务。这种以人为本的服务理念，不仅提升了园区的整体服务水平，更增强了园区的吸引力和竞争力。总之，5G智慧园区的建设为园区的可持续发展注入了新的活力，也为未来城市的发展提供了有益的借鉴和启示。

C基础day9 思维导图: C基础day9 思维导图

Simulink仿真实现物体终端速度与信号处理的MATLAB代码解析（复现论文或解决问题，含详细可运行代码及解释）: 内容概要：本文档详细介绍了使用Simulink进行两个物理问题的仿真建模。第一个任务是模拟一个球体从高空落下的终端速度，通过建立重力与空气阻力的平衡模型，利用MATLAB代码构建Simulink模型，最终计算出终端速度。第二个任务是基于提供的加速度数据，通过两次积分计算物体的速度和位置，同样使用MATLAB代码实现了Simulink模型。每个任务都包含了详细的数学公式推导、参数设置以及Simulink模块的具体连接方法。仿真结果显示，终端速度约为53.6 m/s，而1秒后的速度和位置则取决于输入的加速度数据。适合人群：对Simulink仿真工具感兴趣的工程技术人员、科研工作者以及相关专业的学生。使用场景及目标：适用于需要进行物理系统仿真、信号处理的研究项目或教学实验。主要目标是帮助读者掌握Simulink的基本操作和应用技巧，同时加深对物理现象的理解。其他说明：文中提供了完整的MATLAB代码，方便读者直接复制并在自己的环境中运行测试。此外，还给出了详细的中文注释，有助于初学者更好地理解各个步骤的功能和意义。

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

音乐_安卓开发_本地音乐_播放器应用μsic_1742860435.zip: 音乐_安卓开发_本地音乐_播放器应用μsic_1742860435.zip

Lightweight and Efficient: The backbone of the TTS Diffusion Transformer has only 0.45B param: Lightweight and Efficient: The backbone of the TTS Diffusion Transformer has only 0.45B parameters. Ultra High-Quality Voice Cloning: See the demo video below! We also report results of recent TTS models on the Seed test sets in the following table. Bilingual Support: Supports both Chinese and English, and code-switching. Controllable: Supports accent intensity control and fine-grained pronunciation/duration adjustment (coming soon).

博客_ionic20_移动端_应用开发模板_1742847485.zip: 博客_ionic20_移动端_应用开发模板_1742847485.zip

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

中继增强OFDMA网络中的公平半分布式资源分配方案实现与性能评估（复现论文，含详细可运行代码及解释）: 内容概要：本文详细介绍了复现论文《Fair Semi-distributed Resource Allocation Scheme over Relay-Enhanced OFDMA Networks》的代码实现。主要内容包括系统模型构建（定义基站、中继站、移动终端及其关联关系）、资源分配算法（半分布式资源分配、改进的两阶段资源分配）和公平性调度机制（吞吐量计算、效用函数）。此外，还进行了仿真实验，对比了所提方案与集中式方案和机会主义方案在吞吐量、公平性和反馈开销方面的性能表现。最后，通过随机分布场景下的仿真进一步验证了方案的有效性和实际部署的可行性。适合人群：通信工程专业研究人员、无线网络优化工程师、对OFDMA技术和资源分配算法感兴趣的学者和技术人员。使用场景及目标：适用于研究和开发中继增强的OFDMA网络资源分配算法，旨在提高系统的吞吐量和公平性，降低反馈开销。目标是在大规模网络环境中实现高效、公平的资源分配。其他说明：文中提供了详细的代码实现步骤和仿真结果，有助于读者深入理解算法原理并进行实验验证。

2025大模型训练性能瓶颈定位流程案例.pdf: 2025大模型训练性能瓶颈定位流程案例

蓝桥杯Python竞赛真题详解：涵盖基础与进阶算法挑战: 内容概要：本文档提供了20道蓝桥杯Python竞赛真题及其详细解答，涉及质因数分解、分数计算、特别数求和、数字三角形、约数个数、草的生长模拟、工作时长计算、互质数统计、阶乘和判定、公因数匹配、直线计算、分糖果、矩阵填充、旅行计划优化、阶乘末尾零计数、最长递增子序列、最长公共子序列、最长回文子串、最长公共前缀和最长公共后缀等多个经典算法问题。每个题目都附有完整的代码实现和解释，帮助参赛者深入理解和掌握相关知识点。适合人群：准备参加蓝桥杯或其他编程竞赛的学生和程序员，尤其是对Python编程有一定基础并希望提高算法能力的人群。使用场景及目标：①作为赛前复习资料，巩固基础知识；②通过实际编程练习提升算法思维和解决问题的能力；③熟悉竞赛常见题型，增强应对复杂问题的信心。其他说明：文档不仅提供了解答思路，还包含了具体的代码实现，有助于读者更好地理解和应用所学知识。同时，这些问题覆盖了多种数据结构和算法思想，能够全面锻炼编程技能。

word-【软考-网络工程师】学习资源: 网络工程师（中级）是软考（计算机技术与软件专业技术资格考试）的一部分，主要考察计算机网络基础、网络安全、网络管理、操作系统、数据库等内容，考试分为上午的基础知识选择题和下午的案例分析题。

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

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

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jQuery左侧列表导航条鼠标滑过flash动画导航条-20130705

评论

发表评论

相关推荐

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

最近访客更多访客>>