`

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

阅读更多
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>
  • 大小: 18 KB
分享到:
评论

相关推荐

    jquery左侧导航条鼠标滑过导航菜单详细内容提示框说明

    通过以上步骤,我们就成功实现了jQuery左侧导航条上鼠标滑过导航菜单时显示详细内容提示框的功能。这只是一个基础示例,实际应用中可能需要考虑更多的细节,比如响应式设计、动画效果优化等,但这个教程应该能为你...

    jquery hover鼠标滑过动画导航条.zip

    jquery hover鼠标滑过动画导航条是一款蓝色jQuery滑动导航栏特效代码。

    jquery英文导航条鼠标滑过中英文字导航条滑动切换显示

    jquery英文导航条鼠标滑过中英文字导航条滑动切换显示 jquery英文导航条鼠标滑过中英文字导航条滑动切换显示 jquery英文导航条鼠标滑过中英文字导航条滑动切换显示 jquery英文导航条鼠标滑过中英文字导航条滑动切换...

    jquery插件库-jquery hover鼠标滑过动画导航条.zip

    "jquery插件库-jquery hover鼠标滑过动画导航条.zip"是一个压缩包,其中包含了一个利用jQuery实现的、在鼠标滑过时产生动画效果的导航条插件。这个插件可以为网页增添动态效果,提升用户体验,同时也能让网页设计...

    jquery导航菜单鼠标悬停到导航条上滑动显示下拉菜单

    jquery导航菜单鼠标悬停到导航条上滑动显示下拉菜单 jquery导航菜单鼠标悬停到导航条上滑动显示下拉菜单 jquery导航菜单鼠标悬停到导航条上滑动显示下拉菜单 jquery导航菜单鼠标悬停到导航条上滑动显示下拉菜单

    jQuery仿flash导航条鼠标悬停上下文字滑动

    "jQuery仿flash导航条鼠标悬停上下文字滑动"是一种利用jQuery库实现的动态效果,旨在提升用户体验,使得导航条更加生动有趣。在这个项目中,我们将深入探讨这个效果的实现原理和相关技术。 首先,jQuery是一个广泛...

    jQuery css3图标动画鼠标滑过图标旋转动画特效

    "jQuery css3图标动画鼠标滑过图标旋转动画特效"是一种常见的交互式设计技术,它结合了jQuery库的便捷性和CSS3的强大动画功能,为网页元素特别是图标按钮提供动态视觉效果。下面将详细介绍这个主题中的相关知识点。 ...

    jquery-图片展示-鼠标滑过图片文字遮罩

    本文将深入探讨“jquery-图片展示-鼠标滑过图片文字遮罩”这一技术主题,以及如何通过jQuery插件实现这种效果。 首先,jQuery是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理、动画以及Ajax交互等任务,...

    jquery hover图片特效,鼠标滑过animate动画图片...

    jquery hover图片特效,鼠标滑过animate动画图片... jquery hover图片特效,鼠标滑过animate动画图片... jquery hover图片特效,鼠标滑过animate动画图片... jquery hover图片特效,鼠标滑过animate动画图片...

    jquery hover鼠标滑过动画导航条效果

    本教程将详细介绍如何使用 jQuery 的 hover 方法来实现鼠标滑过时的动画导航条效果。 首先,我们需要在 HTML 页面中设置基础的导航条结构。一个简单的导航条可能包含多个链接元素(`&lt;a&gt;`),这些元素通常被组织在...

    jquery实现的英文导航条鼠标滑过时滑动切换显示中英文字导航条特效源码.zip

    在本资源中,我们关注的是一个使用jQuery库实现的特殊导航条效果,它在鼠标滑过时能够平滑地切换显示中英文双语导航条。这个功能对于一个多语言网站来说非常实用,因为它提供了用户友好的界面,使得用户可以轻松识别...

    jquery flash动画导航条.zip

    总的来说,"jquery flash动画导航条.zip"提供的资源将帮助开发者创建一个融合了传统Flash动画效果和现代Web技术的导航条。通过合理利用jQuery的便利性、CSS的可视化能力和HTML5的语义特性,可以构建出适应不同设备且...

    jQuery鼠标悬停上下滑动导航条.zip

    本项目“jQuery鼠标悬停上下滑动导航条”提供了一种创新且美观的解决方案,利用jQuery库来实现鼠标悬停时导航条的动态上下滑动效果,提升用户体验。以下是关于这个特效的一些关键知识点: 1. **jQuery库**:jQuery ...

    jquery导航插件鼠标滑过背景悬停flash动画效果

    在本案例中,"鼠标滑过"是一个典型的事件处理,而"背景悬停Flash动画效果"则是动态效果的一种体现。 关于Flash动画,虽然现代Web开发更倾向于使用HTML5的Canvas或SVG进行动画制作,但这里提到的“Flash动画效果”...

    jQuery鼠标滑过图片动画滑动展开特效.zip

    《jQuery实现的鼠标滑过图片动画滑动展开特效详解》 在网页设计中,动态效果的运用能够极大地提升用户体验,使页面更具吸引力。"jQuery鼠标滑过图片动画滑动展开特效"是这样一种技术,它巧妙地利用了jQuery库的强大...

    jquery左侧边浮动菜单鼠标滑过图标菜单滑动显示

    在这个“jquery左侧边浮动菜单鼠标滑过图标菜单滑动显示”的主题中,我们将探讨如何利用jQuery实现一个功能丰富的侧边栏菜单,当用户鼠标悬停在图标上时,菜单会平滑地滑动展开。 首先,我们需要理解基本的HTML结构...

Global site tag (gtag.js) - Google Analytics