jQuery 侧栏与工具提示-20130726 -

xjwolaile

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

最近访客更多访客>>

waylon33

Cyoooa

h06910101

androidHua

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

jQuery 侧栏与工具提示-20130726

博客分类：

学习
前端技术
jQuery

hover stop animate addClass removeClass

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、效果图

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>

images.rar (1.2 KB)
下载次数: 1

查看图片附件

分享到：

jQuery 对input的限制-20130727 | jQuery 竖直手风琴菜单收缩展示下拉菜单-2 ...

2013-07-26 23:50
浏览 896
评论(0)
分类:Web前端
查看更多

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jQuery 侧栏与工具提示-20130726

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jQuery 侧栏与工具提示-20130726

评论

发表评论

相关推荐

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

最近访客更多访客>>