jQuery 侧栏与工具提示-20130726

程序员文章站 2022-03-07 08:05:58

...

1、效果及功能说明

当鼠标触及到标题就会触发一个侧显示框来告诉基础信息

2、实现原理

主要是靠伪类来触发效果，当提示框从左边出来，让后显示出上面的信息，获得一个定义好的类来修改上面的字体等信息，当鼠标离开后自动回去，并且删除类，当鼠标触及到时多有动画停止，确保了不会有重复的出现

主要的方法

$(this).find("div").stop().animate({left: "210", opacity:1}, "fast").css("display","block");

$(this).find(">a").addClass("current");
//当提示框从左边出来，和添加类来修改提示框内部的信息样式

$(this).find("div").stop().animate({left: "0", opacity: 0}, "fast");

$(this).find(">a").removeClass("current");
//当鼠标离开后回收提示框，并且消除掉类较少页面的负担

3、效果图

jQuery 侧栏与工具提示-20130726

博客分类：学习前端技术jQuery hoverstopanimateaddClassremoveClass

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>
<script type="text/javascript"> 
$(document).ready(function(){
//定义方法
	$("ul.sidenav li").hover(function() {
	//定义伪类
		$(this).find("div").stop().animate({left: "210", opacity:1}, "fast").css("display","block");
		//当前获得遍历查询div元素停止当前说有动画，获得一个动画效果从距左的210px出现，透明度为1
		$(this).find(">a").addClass("current");
		//当前调用遍历查询>a添加一个current类
	},function(){
	//后当鼠标离开后定义方法
		$(this).find("div").stop().animate({left: "0", opacity: 0}, "fast");
		//当前的通过遍历获得div元素，停止当前动画后在调用动画方法将回到距左0px的位置透明度为0
		$(this).find(">a").removeClass("current");
		//当前获得遍>a删除掉current方法
	});
	
});
</script>
<style type="text/css">
*{margin:0;padding:0;}
body{background:#005094;font:12px Verdana, Arial, Helvetica, sans-serif;}
a:focus{outline:none;}
.demopage{margin:0 auto;width:900px;background:#005094;overflow:hidden;padding:20px;}
/* sidenav */
ul.sidenav{float:left;margin:130px 0 0;padding:0;width:200px;list-style:none;border-bottom:1px solid #3373a9;border-top:1px solid #003867;font-size:1.2em;}
ul.sidenav li{position:relative;float:left;margin:0;padding:0;}
ul.sidenav li a{border-top:1px solid #3373a9;border-bottom:1px solid #003867;padding:10px 10px 10px 25px;display:block;color:#fff;text-decoration:none;width:165px;background:#005094 url(images/sidenav_li_a.gif) no-repeat 5px 10px;position:relative;z-index:2;}
ul.sidenav li a:hover,ul.sidenav li a.current{background-color:#004c8d;border-top:1px solid #1a4c76;}
ul.sidenav li div{display:none;position:absolute;top:2px;left:0;width:225px;font-size:12px;background:url(images/bubble_top.gif) no-repeat right top;}
ul.sidenav li div p{margin:7px 0;line-height:1.6em;padding:0 5px 10px 30px;background:url(images/bubble_btm.gif) no-repeat right bottom;}
</style>

</head>

<body>

	<div class="demopage">
	
		<ul class="sidenav">
			<li>
				<a href="http://www.17sucai.com/">首页</a>
				<div><p>Go home!</p></div>
			</li>
			<li>
				<a href="http://www.17sucai.com/">关于我们</a>
				<div><p>知道我们的团队！</p></div>
			</li>
			<li>
				<a href="http://www.17sucai.com/">投资组合</a>
				<div><p>要看到我们在实验室工作吗？快来看看我们的特色工作！</p></div>
			</li>
			<li>
				<a href="http://www.17sucai.com/">博客</a>
				<div><p>每周更新，教程和资源。</p></div>
			</li>
			<li>
				<a href="http://www.17sucai.com/">见证</a>
				<div><p>看看其他客户对我们说。</p></div>
			</li>
			<li>
				<a href="http://www.17sucai.com/">联系</a>
				<div><p>打我们电话吧！</p></div>
			</li>
		</ul>
		
	</div>

</body>
</html>