利用jquery实现鼠标跟随左侧浮动菜单



20 79 27



特效描述:利用jquery实现 鼠标跟随 左侧浮动菜单,利用jquery实现鼠标跟随左侧浮动菜单

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/styles.css" />
<link rel="stylesheet" type="text/css" href="css/styles.css" />

2. 引入JS

<script src="jquery/jquery.min.js"></script>
<script type="text/javascript" src="jquery/jquery.easing.1.3.js"></script>
<script src="jquery/jquery.min.js"></script>
<script type="text/javascript" src="jquery/jquery.easing.1.3.js"></script>

3. HTML代码

s<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body id="introduction">
<div id="page">
	<div id="container" class="content clearfix">
<div id="fl_menu">
	<div class="label">MENU</div>
	<div class="menu">
    	<a href="http://51qianduan.com" class="menu_item">An menu item</a>
        <a href="http://51qianduan.com" class="menu_item">A long menu item</a>
        <a href="http://51qianduan.com" class="menu_item">Item 3</a>
        <a href="http://51qianduan.com" class="menu_item">Another one</a>
        <a href="http://51qianduan.com" class="menu_item">A really, really long menu item</a>
        <a href="http://51qianduan.com" class="menu_item">Menu item 6</a>
        <a href="http://51qianduan.com" class="menu_item">And one more</a>
        <a href="http://51qianduan.com" class="menu_item">A tiny</a>
    </div>
</div>
<div class="content1">
<h1>A long content</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam consequat nunc in nibh feugiat posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In hac habitasse platea dictumst. In lacinia sodales commodo. Nam lorem enim, facilisis ut iaculis ac, mattis non diam. Cras nec nibh vel lacus aliquet mattis. Nunc dapibus, lectus at molestie laoreet, sem velit aliquet velit, at consectetur diam neque vitae erat. Pellentesque justo dui, ullamcorper ac pulvinar a, convallis a nisi. Curabitur luctus, nunc quis varius tincidunt, quam lorem consectetur felis, eu congue tellus justo non velit. Etiam eget velit lacus. Pellentesque mollis luctus risus, sit amet blandit nulla accumsan nec. Nunc eu iaculis lorem. Aenean porta venenatis ultrices. Suspendisse et leo id ligula suscipit convallis sodales in enim. Ut iaculis ligula et tellus tristique consectetur. Cras mauris leo, lacinia vel pretium sagittis, lobortis ac risus. Cras turpis felis, accumsan nec placerat ac, gravida adipiscing metus.</p>
<p>Etiam ultrices luctus semper. Integer convallis rutrum sollicitudin. Fusce vestibulum rhoncus pharetra. Etiam quam tortor, blandit in euismod egestas, semper pellentesque est. Donec rhoncus arcu vitae odio eleifend vitae varius quam commodo. Suspendisse potenti. Cras elit sapien, luctus congue pharetra faucibus, pulvinar quis dui. Nulla in venenatis ante. Aenean a neque nunc. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse pretium aliquam pellentesque. Fusce a lectus diam, vitae molestie ligula. Aliquam sed quam lectus, sit amet egestas tortor. Vestibulum consectetur sodales erat vel sagittis. Nunc arcu leo, pretium ac porttitor sed, pellentesque quis metus. Etiam eget diam dolor. Cras et leo eget purus rutrum tincidunt sodales ac urna. In aliquam rhoncus lorem sit amet malesuada.</p>
<p>Cras porta facilisis vestibulum. Curabitur commodo dolor eget odio elementum pretium. Maecenas congue diam ut augue ullamcorper vulputate. Duis feugiat turpis in urna mattis quis sagittis orci imperdiet. Aenean pulvinar commodo sapien, id cursus nibh dignissim quis. Maecenas id nulla lectus, bibendum faucibus massa. Vivamus iaculis orci non risus condimentum egestas. Etiam vehicula, dui id aliquam tempor, nunc est volutpat mi, in ullamcorper est justo sed nisl. Proin tortor massa, tempor ac sodales ut, ornare sit amet magna. Nam nisl diam, cursus id viverra vel, luctus bibendum ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec luctus neque et dolor fringilla imperdiet. Sed eu lorem turpis. Ut laoreet imperdiet urna, non sodales felis adipiscing vel. Nunc tincidunt, velit id tristique dignissim, mauris felis condimentum felis, sed aliquet arcu sapien in magna. Integer tincidunt magna ut nulla mollis eget vestibulum tortor dapibus.</p>
<p>Donec venenatis libero et lacus rhoncus ut porta tortor vestibulum. Donec aliquam massa eget nulla tempus ut sagittis mauris iaculis. Integer diam odio, condimentum ac mollis id, hendrerit ac lacus. Vivamus viverra tempor mattis. Aenean sed lacus leo, in tempor lorem. Mauris accumsan dolor sed felis dapibus tincidunt vestibulum velit tincidunt. Etiam turpis tortor, pretium et mattis ac, fringilla lacinia lorem. Phasellus suscipit nibh sed arcu aliquet quis ornare orci molestie. Aliquam elementum tincidunt sem, quis auctor lorem laoreet sed. Nullam vitae tellus ac felis vestibulum malesuada quis sed odio. Nunc rhoncus eros eget dui commodo sit amet scelerisque tortor gravida. Duis convallis orci et ligula porttitor pretium. Nam lobortis, ligula sit amet vestibulum hendrerit, orci ante sollicitudin ipsum, vel hendrerit libero quam congue nisl. Cras et massa nibh.</p>
<p>Quisque nec fermentum arcu. Phasellus pulvinar, nisl ut tristique mollis, eros odio aliquet ipsum, iaculis eleifend ante augue a risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ligula enim, pharetra sit amet ornare vel, vehicula sit amet nisl. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce dictum bibendum magna, quis euismod mauris blandit non. In hac habitasse platea dictumst. Nam porttitor, mauris imperdiet consequat sagittis, metus ligula pulvinar sem, a convallis enim leo at sapien. Phasellus iaculis nunc nec purus egestas consequat. Pellentesque sed eros et erat laoreet vulputate. Aliquam auctor nibh id erat scelerisque volutpat. Proin adipiscing ultricies dui vitae mattis. Ut fringilla arcu quis ante eleifend vulputate eu tristique arcu. Sed condimentum nisi sed libero convallis interdum sit amet eget lacus. Curabitur mollis arcu a dui volutpat vehicula. Cras nec justo vel justo gravida vehicula id vitae urna. Quisque sit amet est nec elit dignissim interdum. Quisque laoreet dapibus eros, quis hendrerit nunc bibendum eget. Nulla dapibus varius elit pellentesque posuere.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam consequat nunc in nibh feugiat posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In hac habitasse platea dictumst. In lacinia sodales commodo. Nam lorem enim, facilisis ut iaculis ac, mattis non diam. Cras nec nibh vel lacus aliquet mattis. Nunc dapibus, lectus at molestie laoreet, sem velit aliquet velit, at consectetur diam neque vitae erat. Pellentesque justo dui, ullamcorper ac pulvinar a, convallis a nisi. Curabitur luctus, nunc quis varius tincidunt, quam lorem consectetur felis, eu congue tellus justo non velit. Etiam eget velit lacus. Pellentesque mollis luctus risus, sit amet blandit nulla accumsan nec. Nunc eu iaculis lorem. Aenean porta venenatis ultrices. Suspendisse et leo id ligula suscipit convallis sodales in enim. Ut iaculis ligula et tellus tristique consectetur. Cras mauris leo, lacinia vel pretium sagittis, lobortis ac risus. Cras turpis felis, accumsan nec placerat ac, gravida adipiscing metus.</p>
<p>Etiam ultrices luctus semper. Integer convallis rutrum sollicitudin. Fusce vestibulum rhoncus pharetra. Etiam quam tortor, blandit in euismod egestas, semper pellentesque est. Donec rhoncus arcu vitae odio eleifend vitae varius quam commodo. Suspendisse potenti. Cras elit sapien, luctus congue pharetra faucibus, pulvinar quis dui. Nulla in venenatis ante. Aenean a neque nunc. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse pretium aliquam pellentesque. Fusce a lectus diam, vitae molestie ligula. Aliquam sed quam lectus, sit amet egestas tortor. Vestibulum consectetur sodales erat vel sagittis. Nunc arcu leo, pretium ac porttitor sed, pellentesque quis metus. Etiam eget diam dolor. Cras et leo eget purus rutrum tincidunt sodales ac urna. In aliquam rhoncus lorem sit amet malesuada.</p>
<p>Cras porta facilisis vestibulum. Curabitur commodo dolor eget odio elementum pretium. Maecenas congue diam ut augue ullamcorper vulputate. Duis feugiat turpis in urna mattis quis sagittis orci imperdiet. Aenean pulvinar commodo sapien, id cursus nibh dignissim quis. Maecenas id nulla lectus, bibendum faucibus massa. Vivamus iaculis orci non risus condimentum egestas. Etiam vehicula, dui id aliquam tempor, nunc est volutpat mi, in ullamcorper est justo sed nisl. Proin tortor massa, tempor ac sodales ut, ornare sit amet magna. Nam nisl diam, cursus id viverra vel, luctus bibendum ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec luctus neque et dolor fringilla imperdiet. Sed eu lorem turpis. Ut laoreet imperdiet urna, non sodales felis adipiscing vel. Nunc tincidunt, velit id tristique dignissim, mauris felis condimentum felis, sed aliquet arcu sapien in magna. Integer tincidunt magna ut nulla mollis eget vestibulum tortor dapibus.</p>
<p>Donec venenatis libero et lacus rhoncus ut porta tortor vestibulum. Donec aliquam massa eget nulla tempus ut sagittis mauris iaculis. Integer diam odio, condimentum ac mollis id, hendrerit ac lacus. Vivamus viverra tempor mattis. Aenean sed lacus leo, in tempor lorem. Mauris accumsan dolor sed felis dapibus tincidunt vestibulum velit tincidunt. Etiam turpis tortor, pretium et mattis ac, fringilla lacinia lorem. Phasellus suscipit nibh sed arcu aliquet quis ornare orci molestie. Aliquam elementum tincidunt sem, quis auctor lorem laoreet sed. Nullam vitae tellus ac felis vestibulum malesuada quis sed odio. Nunc rhoncus eros eget dui commodo sit amet scelerisque tortor gravida. Duis convallis orci et ligula porttitor pretium. Nam lobortis, ligula sit amet vestibulum hendrerit, orci ante sollicitudin ipsum, vel hendrerit libero quam congue nisl. Cras et massa nibh.</p>
<p>Quisque nec fermentum arcu. Phasellus pulvinar, nisl ut tristique mollis, eros odio aliquet ipsum, iaculis eleifend ante augue a risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ligula enim, pharetra sit amet ornare vel, vehicula sit amet nisl. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce dictum bibendum magna, quis euismod mauris blandit non. In hac habitasse platea dictumst. Nam porttitor, mauris imperdiet consequat sagittis, metus ligula pulvinar sem, a convallis enim leo at sapien. Phasellus iaculis nunc nec purus egestas consequat. Pellentesque sed eros et erat laoreet vulputate. Aliquam auctor nibh id erat scelerisque volutpat. Proin adipiscing ultricies dui vitae mattis. Ut fringilla arcu quis ante eleifend vulputate eu tristique arcu. Sed condimentum nisi sed libero convallis interdum sit amet eget lacus. Curabitur mollis arcu a dui volutpat vehicula. Cras nec justo vel justo gravida vehicula id vitae urna. Quisque sit amet est nec elit dignissim interdum. Quisque laoreet dapibus eros, quis hendrerit nunc bibendum eget. Nulla dapibus varius elit pellentesque posuere.</p>
</div>
<script>
//config
$float_speed=1500; //milliseconds
$float_easing="easeOutQuint";
$menu_fade_speed=500; //milliseconds
$closed_menu_opacity=0.75;
//cache vars
$fl_menu=$("#fl_menu");
$fl_menu_menu=$("#fl_menu .menu");
$fl_menu_label=$("#fl_menu .label");
$(window).load(function() {
	menuPosition=$('#fl_menu').position().top;
	FloatMenu();
	$fl_menu.hover(
		function(){ //mouse over
			$fl_menu_label.fadeTo($menu_fade_speed, 1);
			$fl_menu_menu.fadeIn($menu_fade_speed);
		},
		function(){ //mouse out
			$fl_menu_label.fadeTo($menu_fade_speed, $closed_menu_opacity);
			$fl_menu_menu.fadeOut($menu_fade_speed);
		}
	);
});
$(window).scroll(function () { 
	FloatMenu();
});
function FloatMenu(){
	var scrollAmount=$(document).scrollTop();
	var newPosition=menuPosition+scrollAmount;
	if($(window).height()<$fl_menu.height()+$fl_menu_menu.height()){
		$fl_menu.css("top",menuPosition);
	} else {
		$fl_menu.stop().animate({top: newPosition}, $float_speed, $float_easing);
	}
}
</script>
  </div>   
 </div> 
</div>
</body>
</html>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: flash导航菜单 flash导航条 flash导航 flash菜单 flash下拉菜单 flash下拉导航菜单 h5动画导航 h5动画菜单 html5动画导航 html5动画菜单 收缩菜单 收缩导航 右键菜单 导航切换 菜单切换 浮动菜单 浮动导航 滑动导航菜单 滑动导航 滑动菜单 滚动导航菜单 滚动菜单 滚动导航 浮动 悬浮 悬浮层 悬浮框 浮动层 浮动框 浮动插件 悬浮插件 收缩展开 展开收缩 收缩 展开 浮动提示框 导航菜单 导航条 菜单栏 导航栏 分类导航 响应式导航条 响应式导航 浮动菜单 浮动导航 收缩菜单 收缩导航 侧边菜单 侧边导航

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到