jquery菜单跟随鼠标移动特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery菜单跟随鼠标移动特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Cursor following menu</title>
<style type="text/css">
<!--
/* demo content style */
@import url(http://fonts.googleapis.com/css?family=Lobster);
body{margin:0; padding:0; background:#84d8d3 url(cfm_page_bg.png);}
.demo_content{position:relative; width:750px; margin:auto; padding:20px 40px 800px 40px; background:#84d8d3;}
.demo_content hr{padding:0; margin:20px 0 0 0; border-top:1px solid #68b5b1; border-bottom:1px solid #b8ebe8; border-left:none; border-right:none; clear:both;}
.demo_content h1{font-family:'Lobster', Arial, Helvetica, sans-serif; font-size:40px; font-weight:normal; color:#333; margin:20px 0 0 0; text-shadow: 0px 1px 1px #eee;}
.demo_content h2{font-family:'Lobster', Arial, Helvetica, sans-serif; font-size:22px; font-weight:normal; margin:40px 0 20px 0; color:#f33;}
.demo_content h3{font-family:'Lobster', Arial, Helvetica, sans-serif; font-size:16px; font-weight:normal; color:#333; margin:20px 0;}
.demo_content p{font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#333; margin:0 0 20px 0; clear:both; line-height:18px;}
.demo_content p.inner{padding:20px; background:#333; color:#fff; -moz-border-radius:4px; -khtml-border-radius:4px; -webkit-border-radius:4px; border-radius:4px;}
.demo_content p.inner_white{padding:20px; background:#fff; color:#333; -moz-border-radius:4px; -khtml-border-radius:4px; -webkit-border-radius:4px; border-radius:4px;}
.demo_content blockquote{font-family:'Lobster',Arial, Helvetica, sans-serif; font-size:18px; color:#fff; margin:40px 0 30px 0; padding:0 80px 0 0;}
.demo_content .bqstart {float:left; font-size:600%; color:#fff; margin:-35px 20px 0 0;}
.demo_content .bqend {float:right; font-size:600%; color:#fff; margin:-25px -80px 0 0; height:60px;}
-->
</style>
<link href="malihu.cfm.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
</head>
<body>
<!-- cursor following menu -->
<div id="cf_menu">
	<div class="container">
    	<div class="title">MENU</div>
		<ul>
			<li><a href="#" onclick="Animate2id('#home');return false">&uarr; Home</a></li>
			<li><a href="#" onclick="Animate2id('#about');return false">About me</a></li>
			<li><a href="work">+ Work</a>
            	<ul>
                	<li><a href="#" onclick="Animate2id('#recent');return false">Recent</a></li>
                	<li><a href="#" onclick="Animate2id('#web');return false">Web</a></li>
                    <li><a href="#" onclick="Animate2id('#print');return false">Print</a></li>
				</ul>
			</li>
			<li><a href="#" onclick="Animate2id('#blog');return false">Blog</a></li>
			<li><a href="links">+ Interesting links</a>
                <ul>
                	<li><a href="#" onclick="Animate2id('#freebies');return false">Freebies &amp; Resources</a></li>
                    <li><a href="#" onclick="Animate2id('#people');return false">People</a></li>
				</ul>
			</li>
			<li><a href="#" onclick="Animate2id('#contact');return false">Contact</a></li>
            <li><a href="info">+ Script info</a>
                <ul>
                	<li><a href="http://www.baidu.com/">See the post</a></li>
                    <li><a href="http://www.baidu.com/">&darr; Download</a></li>
				</ul>
			</li>
            <li><a href="http://www.baidu.com">chinaz</a></li>
		</ul>
	</div>
</div>
<!-- --------------------- -->
<!-- demo content markup -->
<div class="demo_content">
<h2 id="home">Lorem ipsum dolor sit amet</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin arcu sapien, malesuada vitae volutpat eu, volutpat et sem. Ut augue dui, varius at porttitor et, condimentum a lectus. Sed luctus vulputate lacus, ac rhoncus neque commodo vitae. In egestas iaculis placerat. Nullam sit amet orci ut augue sodales porta nec eu velit. Mauris vitae massa ligula, sed convallis leo. Aenean pulvinar metus at ante suscipit aliquam. Mauris non diam a neque ullamcorper laoreet sit amet eget leo. Phasellus quis quam ut libero facilisis eleifend. Donec ac massa leo, vel tincidunt est. Vestibulum id metus interdum felis aliquam malesuada. Donec auctor dui vestibulum leo sodales et fermentum ante ornare. Aliquam ac ante non nisi fermentum varius. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec sodales mattis leo, sit amet elementum nulla eleifend eu. Quisque euismod, eros in adipiscing aliquam, sem risus facilisis diam, a condimentum enim metus quis odio. Duis ac ligula eget erat consequat fermentum ultrices vitae massa. </p>
<blockquote><span class="bqstart">&#8220;</span>Nullam sit amet orci ut augue sodales porta nec eu velit. Mauris vitae massa ligula, sed convallis leo. Aenean pulvinar metus at ante suscipit aliquam. Mauris non diam a neque ullamcorper laoreet sit amet eget leo.<span class="bqend">&#8221;</span></blockquote>
<hr />
<h2 id="about">About me</h2>
<p class="inner_white">Mauris fringilla viverra molestie. Fusce suscipit placerat ligula, in ultricies est venenatis nec. Vestibulum condimentum sollicitudin lorem et imperdiet. Integer cursus auctor bibendum. Morbi enim lorem, feugiat vehicula rhoncus ut, dapibus sed ante. Maecenas euismod aliquet erat, euismod vestibulum augue pellentesque ut. Donec at lectus at orci convallis suscipit at sed enim. Sed id mi vel leo auctor consectetur. Nam vestibulum, dolor venenatis dignissim tincidunt, nulla sapien posuere quam, sed elementum ipsum nisi vel risus. Donec pretium, nibh sed accumsan fringilla, turpis eros consequat quam, a ornare libero magna quis enim. Aenean eget urna augue. <br /><br />Nunc faucibus, nunc eget hendrerit egestas, nisi justo gravida orci, quis tincidunt urna elit sit amet enim. Aliquam nisi justo, faucibus sit amet tincidunt quis, blandit eu dui. Integer aliquet purus id orci auctor facilisis. Ut porttitor mattis metus, quis interdum purus egestas ut. Proin commodo urna eget leo lacinia vitae molestie est dictum. Donec eu rhoncus turpis. <br /><br />Praesent mattis vulputate facilisis. Aliquam malesuada quam eu eros posuere interdum. Pellentesque ullamcorper velit eget mi iaculis euismod dictum ipsum porta. Maecenas ornare ante at tortor varius eget lacinia lacus pretium. Etiam nec erat sapien, ut pretium ipsum. </p>
<h2>My work</h2>
<p>Nunc faucibus, nunc eget hendrerit egestas, nisi justo gravida orci, quis tincidunt urna elit sit amet enim. Aliquam nisi justo, faucibus sit amet tincidunt quis, blandit eu dui.</p> 
<h3 id="recent">Recent projects</h3>
<p>Integer aliquet purus id orci auctor facilisis. </p>
<p>Ut porttitor mattis metus, quis interdum purus egestas ut. </p>
<p>Proin commodo urna eget leo lacinia vitae molestie est dictum. </p>
<p>Donec eu rhoncus turpis. Praesent mattis vulputate facilisis. Aliquam malesuada quam eu eros posuere interdum. Pellentesque ullamcorper velit eget mi iaculis euismod dictum ipsum porta. Maecenas ornare ante at tortor varius eget lacinia lacus pretium. Etiam nec erat sapien, ut pretium ipsum. </p>
<h3 id="web">Web design/development</h3>
<p>Integer aliquet purus id orci auctor facilisis. </p>
<p>Ut porttitor mattis metus, quis interdum purus egestas ut. </p>
<p>Proin commodo urna eget leo lacinia vitae molestie est dictum. </p>
<h3 id="print">Print/DTP</h3>
<p>Donec eu rhoncus turpis. Praesent mattis vulputate facilisis. </p>
<p>Aliquam malesuada quam eu eros posuere interdum. </p>
<p>Pellentesque ullamcorper velit eget mi iaculis euismod dictum ipsum porta. Maecenas ornare ante at tortor varius eget lacinia lacus pretium. Etiam nec erat sapien, ut pretium ipsum. </p>
<hr />
<h2 id="blog">Blog</h2>
<p class="inner">In bibendum, turpis id cursus consequat, risus turpis venenatis mauris, in feugiat felis est vitae tortor. Phasellus a vestibulum est. Etiam aliquam, magna auctor rutrum faucibus, sapien nibh porttitor leo, sit amet dignissim lorem mauris ac tortor. Etiam ut leo vitae felis vulputate tincidunt. Nam at enim neque. Sed porttitor gravida varius. Aliquam ultrices congue urna vehicula accumsan. Curabitur odio nunc, rutrum vitae faucibus dignissim, pulvinar nec orci. Mauris id justo ut dolor vehicula tristique ut id urna. Quisque sed velit ac enim semper ornare. In eu mauris nulla, eget tincidunt nunc. Vivamus felis odio, malesuada sit amet accumsan in, venenatis eget arcu. Pellentesque dolor ipsum, tincidunt nec porttitor eget, lobortis nec nisl. Nunc urna lorem, congue eget accumsan vitae, blandit rhoncus nulla. Aenean quis placerat dolor. </p>
<h2>Links</h2>
<p>Proin posuere nisi ac lorem viverra tincidunt. Nunc porta ornare diam, nec fermentum nisi dictum nec. Nam odio nibh, blandit a fermentum eget, posuere sed erat. Pellentesque semper porttitor dapibus.</p>
<h3 id="freebies">Freebies &amp; Resources</h3>
<p>Integer aliquet purus id orci auctor facilisis. </p>
<p>Ut porttitor mattis metus, quis interdum purus egestas ut. </p>
<p>Proin commodo urna eget leo lacinia vitae molestie est dictum. </p>
<h3 id="people">People</h3>
<p>Donec eu rhoncus turpis. Praesent mattis vulputate facilisis. </p>
<p>Aliquam malesuada quam eu eros posuere interdum. </p>
<p>Integer aliquet purus id orci auctor facilisis. </p>
<p>Ut porttitor mattis metus, quis interdum purus egestas ut. </p>
<p>Proin commodo urna eget leo lacinia vitae molestie est dictum. </p>
<hr />
<h2 id="contact">Contact info</h2>
<p>Proin posuere nisi ac lorem viverra tincidunt. Nunc porta ornare diam, nec fermentum nisi dictum nec. Nam odio nibh, blandit a fermentum eget, posuere sed erat. Pellentesque semper porttitor dapibus. Mauris commodo augue in nisl rhoncus volutpat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus tempor est ac leo ultrices venenatis. Vivamus in leo eros, eget commodo nibh. Aenean dolor felis, imperdiet venenatis auctor gravida, tempus ac arcu. Proin egestas eros vitae metus porttitor eget euismod massa commodo. Cras eleifend magna quis arcu mollis a aliquam sem imperdiet. Sed varius scelerisque elit, ac luctus felis vestibulum at. Maecenas in eros sed turpis varius sagittis. Proin fermentum feugiat dui, vel molestie arcu lobortis sed. </p>
<p class="inner_white">Aenean vitae sem a est porttitor adipiscing. Fusce nec eros orci, nec adipiscing velit. Integer a commodo nisi. Donec blandit tincidunt egestas. Cras eu felis quis sapien luctus convallis. Etiam luctus, orci auctor congue imperdiet, nisl lorem feugiat erat, ac ultrices augue nunc non nisl.</p>
</div>
<!-- ------------------- -->
<script>
//cursor following menu config
$mouseover_title="+ MENU"; //menu title text on mouse-over
$mouseout_title="MENU"; //menu title text on mouse-out
$menu_following_speed=2000; //the speed in which the menu follows the cursor (in milliseconds)
$menu_following_easing="easeOutCirc"; 
$menu_cursor_space=30; //space between cursor and menu
$menu_show_speed="slow"; //menu open animation speed
$menu_show_easing="easeOutExpo"; //menu open animation easing type
$menu_hide_speed="slow"; //menu close animation speed
$menu_hide_easing="easeInExpo"; //menu close animation easing type
</script>
<script src="malihu.jquery.cfm.js"></script>
</body>
</html>

JS代码(malihu.jquery.cfm.js):

/*cursor following menucreated by malihu [http://manos.malihu.gr | manos@malihu.gr]*/
//cache vars$menu=$("#cf_menu");
	$menu_title=$("#cf_menu .title");
	$menu_container=$("#cf_menu .container");
	$menu_ul=$("#cf_menu ul:first");
	$menu_li=$("#cf_menu li");
	$menu_ul_ul=$("#cf_menu ul ul");
	$menu_a=$("#cf_menu a");
	$(window).load(function(){
	MoveMenu();
	$menu_ul_ul.hide();
	$menu.addClass("cf_menu_transparency");
	function MouseMove(e){
	var posY=e.pageY+$menu_cursor_space;
	var posX=e.pageX+$menu_cursor_space;
	$menu.stop().animate({
	top:posY,left:posX}
,$menu_following_speed,$menu_following_easing);
	if($menu_ul.is(":visible")){
	$menu_ul.slideUp($menu_hide_speed,$menu_hide_easing,function(){
	$menu_title.show("fast","easeOutCirc");
}
);
}
}
function MoveMenu(){
	$("body").bind("mousemove",function(event){
	MouseMove(event);
}
);
}
$menu.hover( //menu mouse overfunction(){
	var $this=$(this);
	$("body").unbind("mousemove");
	$this.stop().removeClass("cf_menu_transparency");
	$menu_title.html($mouseover_title);
}
,function(){
	//menu mouse outvar $this=$(this);
	$this.stop().addClass("cf_menu_transparency");
	$menu_title.html($mouseout_title);
	if($menu.data("curr_sub_menu")){
	HideSubMenu($menu.data("curr_sub_menu"));
}
MoveMenu();
}
);
	//menu click$menu.bind("click",function(event){
	var $this=$(this);
	$this.stop();
	$menu_title.hide("fast","easeOutCirc",function(){
	$menu_ul.slideDown($menu_show_speed,$menu_show_easing);
}
);
}
);
	//menu option click$menu_a.bind("click",function(event){
	var $this=$(this);
	if($this.parent("li").children("ul").length){
	event.preventDefault();
	if($menu.data("curr_sub_menu")){
	HideSubMenu($menu.data("curr_sub_menu"));
}
if($this.parent("li").children("ul").is(":visible") == false){
	$this.parent("li").children("ul").fadeIn("fast","easeInExpo");
	$menu.data("curr_sub_menu",$this);
}
}
}
);
	function HideSubMenu(submenu){
	submenu.parent("li").children("ul").fadeOut("fast","easeOutExpo");
}
}
);
	//animate pagefunction Animate2id(id2Animate){
	var animSpeed=1500;
	//animation speed var easeType="easeInOutExpo";
	//easing type if($.browser.webkit){
	//webkit browsers do not support animate-html $("body").stop().animate({
	scrollTop:$(id2Animate).offset().top}
,animSpeed,easeType);
}
else{
	$("html").stop().animate({
	scrollTop:$(id2Animate).offset().top}
,animSpeed,easeType);
}
}

CSS代码(malihu.cfm.css):

@charset "utf-8";/* cursor following menu style */
#cf_menu{position:absolute;display:inline-block;z-index:10;-moz-border-radius:4px;-khtml-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;cursor:pointer;top:0;left:0;background:url(empty.gif);}
/* stupid IE needs a background value */
#cf_menu .container{position:relative;font-family:Arial,Helvetica,sans-serif;font-size:10px;}
#cf_menu .title{position:relative;display:inline-block;-moz-border-radius:4px;-khtml-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;background:#333;font-size:10px;text-transform:uppercase;text-decoration:none;margin:1px;color:#fff;padding:5px 8px;}
#cf_menu ul{margin:0;padding:0;list-style:none;display:none;}
#cf_menu ul li{margin:0;padding:0;}
#cf_menu ul ul{margin:0 0 0 2px;padding:0;list-style:none;display:inline-block;}
#cf_menu ul ul li{margin:0 2px 0 0;padding:0;display:inline-block;}
#cf_menu a:link,#cf_menu a:visited{position:relative;display:inline-block;-moz-border-radius:4px;-khtml-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;font-size:10px;text-transform:uppercase;text-decoration:none;margin:1px 1px 5px 1px;padding:5px 8px;border-bottom:1px solid #f33;border-right:1px solid #f33;color:#fff;background:#f33;}
#cf_menu a:hover{background:#fff;color:#000;border-bottom:1px solid #000;border-right:1px solid #000;}
#cf_menu ul ul a:link,#cf_menu ul ul a:visited{background:#333;color:#ddd;border-bottom:1px solid #333;border-right:1px solid #333;}
#cf_menu ul ul a:hover{background:#fff;color:#000;}
.cf_menu_transparency{filter:alpha(opacity=25);-moz-opacity:0.25;-khtml-opacity:0.25;opacity:0.25;}
/* menu opacity */

附件:下载该文件资源,减少时间成本(增值服务)