`

jQuery 侧栏与工具提示-20130726

hoverstopanimateaddClassremoveClass 
阅读更多
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>
  • 大小: 14.9 KB
分享到：
| jQuery 竖直手风琴菜单收缩展示下拉菜单-2 ...
评论
发表评论

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

相关推荐

    jquery制作侧栏与工具提示信息鼠标滑过图片或文字提示详细内容.rar

    jquery制作侧栏与工具提示信息鼠标滑过图片或文字提示详细内容.rarjquery制作侧栏与工具提示信息鼠标滑过图片或文字提示详细内容.rarjquery制作侧栏与工具提示信息鼠标滑过图片或文字提示详细内容.rarjquery制作侧栏...

    jquery制作侧栏与工具提示信息鼠标滑过图片或文

    &lt;title&gt;jQuery侧栏提示信息 &lt;script src="https://code.jquery.com/jquery-3.6.0.min.js"&gt;&lt;/script&gt; &lt;!-- 自定义CSS和JS文件 --&gt; &lt;script src="scripts.js"&gt;&lt;/script&gt; 图片"&gt; 悬停文字 ...

    jQuery EasyUI 1 4 版 API 中文版 Made By Richie696

    总的来说，jQuery EasyUI 1.4版提供了一个强大的前端开发工具箱，通过其丰富的组件和API，开发者可以快速构建功能丰富的、具有现代感的Web应用。Richie696制作的中文版API文档更是降低了学习和使用门槛，使得开发...

    jqueryQQ在线客服代码

    "jQueryQQ在线客服代码"便是这样一种实用的工具，它利用强大的jQuery库，实现了侧栏滚动的QQ在线客服功能，设计精美且支持展开与折叠，使得用户在浏览网站时能方便快捷地寻求帮助。本文将深入探讨这一代码的工作原理...

    https-github.com-justinsuen-visualgos

    说明工具提示 设计 该可视化器使用简单的网格系统，其中在(0, 0)位置放置了一个起始块。 要运行可视化，用户只需单击网格上的空心正方形，算法就会运行。 侧栏包含简单直观的说明，算法和网格的选项以及用于标识...

    bootstrap经典后台模板metronic_v3.8.1

    5. **插件集成**：模板集成了许多流行的第三方插件，如jQuery UI、KnockoutJS、FullCalendar、Datatables、SweetAlert等，这些插件已经与模板进行了良好的整合，方便开发者进行功能扩展。 6. **文档详尽**：...

    dwz user guide

    5. **工具提示（Tooltip）**：这个功能允许在鼠标悬停时显示额外信息，有助于提高界面的易用性。 6. **菜单（Menu）**：DWZ提供了多种风格的菜单，包括折叠式、级联式等，可自定义菜单项的图标、链接等属性，适应...

Magicbox
Global site tag (gtag.js) - Google Analytics