特效描述:基于jQuery实现 鼠标移动 垂直滚动菜单。基于jQuery实现鼠标移动垂直滚动菜单效果
代码结构
1. 引入JS
<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script> <script type="text/javascript" src="js/jquery.easing.1.3.js"></script> <script type="text/javascript" src="js/jquery.color.js"></script> <script type="text/javascript" src="js/jquery-1.3.1.min.js"></script> <script type="text/javascript" src="js/jquery.easing.1.3.js"></script> <script type="text/javascript" src="js/jquery.color.js"></script>
2. 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> <title></title> <script type="text/javascript"> $(document).ready(function() { //Background color, mouseover and mouseout var colorOver = '#31b8da'; var colorOut = '#1f1f1f'; //Padding, mouseover var padLeft = '20px'; var padRight = '20px'; //Default Padding var defpadLeft = $('#menu li a').css('paddingLeft'); var defpadRight = $('#menu li a').css('paddingRight'); //Animate the LI on mouse over, mouse out $('#menu li').click(function () { //Make LI clickable window.location = $(this).find('a').attr('href'); }).mouseover(function (){ //mouse over LI and look for A element for transition $(this).find('a') .animate( { paddingLeft: padLeft, paddingRight: padRight}, { queue:false, duration:100 } ) .animate( { backgroundColor: colorOver }, { queue:false, duration:200 }); }).mouseout(function () { //mouse oout LI and look for A element and discard the mouse over transition $(this).find('a') .animate( { paddingLeft: defpadLeft, paddingRight: defpadRight}, { queue:false, duration:100 } ) .animate( { backgroundColor: colorOut }, { queue:false, duration:200 }); }); //Scroll the menu on mouse move above the #sidebar layer $('#sidebar').mousemove(function(e) { //Sidebar Offset, Top value var s_top = parseInt($('#sidebar').offset().top); //Sidebar Offset, Bottom value var s_bottom = parseInt($('#sidebar').height() + s_top); //Roughly calculate the height of the menu by multiply height of a single LI with the total of LIs var mheight = parseInt($('#menu li').height() * $('#menu li').length); //I used this coordinate and offset values for debuggin $('#debugging_mouse_axis').html("X Axis : " + e.pageX + " | Y Axis " + e.pageY); $('#debugging_status').html(Math.round(((s_top - e.pageY)/100) * mheight / 2)); //Calculate the top value //This equation is not the perfect, but it 's very close var top_value = Math.round(( (s_top - e.pageY) /100) * mheight / 2); //Animate the #menu by chaging the top value $('#menu').animate({top: top_value}, { queue:false, duration:500}); }); }); </script> <style> body { padding:0; margin:0 20px; } #sidebar { height:400px; overflow:hidden; position:relative; background-color:#eee; } #menu { width:100%; list-style:none; padding:0; margin:0; top:0; position:relative; height:100%; width:300px; } #menu li { padding:10px 0; text-align:right; display:block; cursor:hand; cursor:pointer; } #menu li a { background:url() repeat #1f1f1f; color:#ddd; font-family:helvetica, arial, verdana; font-size:9px; font-weight:900; display:inline; padding:20px 8px 5px 20px; text-decoration:none; } #menu li span { font-family:georgia, arial; font-size:9px; color:#464646; } </style> </head> <br/><br/><br/><br/><br/> <div id="debugging_mouse_axis"></div> <div id="debugging_status"></div> <div id="sidebar"> <ul id="menu"> <li><a href="#">MENU 1 <span> / 2014</span></a></li> <li><a href="#">MENU SIZE 2 <span> / 2014</span></a></li> <li><a href="#">MENU SIZE LONG 3 <span> / 2014</span></a></li> <li><a href="#">MENU 4 <span> / 2014</span></a></li> <li><a href="#">MENU SIZE 5 <span> / 2014</span></a></li> <li><a href="#">MENU SIZE LONG 6 <span> / 2014</span></a></li> <li><a href="#">MENU 7 <span> / 2014</span></a></li> <li><a href="#">MENU SIZE 8 <span> / 2014</span></a></li> <li><a href="#">MENU SIZE LONG 9 <span> / 2014</span></a></li> <li><a href="#">MENU 10 <span> / 2014</span></a></li> <li><a href="#">MENU SIZE 11 <span> / 2014</span></a></li> <li><a href="#">MENU SIZE LONG 12 <span> / 2014</span></a></li> <li><a href="#">MENU 13 <span> / 2014</span></a></li> <li><a href="#">SUPER LONG MENU MENU MENU MENU SIZE 14 <span> / 2014</span></a></li> <li><a href="#">MENU SIZE LONG 15 <span> / 2014</span></a></li> <li><a href="#">MENU 16 <span> / 2014</span></a></li> <li><a href="#">MENU SIZE 17 <span> / 2014</span></a></li> <li><a href="#">MENU SIZE LONG 18 <span> / 2014</span></a></li> <li><a href="#">MENU 19 <span> / 2014</span></a></li> <li><a href="#">MENU SIZE 20 <span> / 2014</span></a></li> <li><a href="#">MENU SIZE LONG 21 <span> / 2014</span></a></li> <li><a href="#">MENU 22 <span> / 2014</span></a></li> <li><a href="#">MENU SIZE 5 <span> / 2014</span></a></li> <li><a href="#">MENU SIZE LONG 23 <span> / 2014</span></a></li> <li><a href="#">MENU 24 <span> / 2014</span></a></li> <li><a href="#">MENU SIZE 25 <span> / 2014</span></a></li> <li><a href="#">MENU SIZE LONG 26 <span> / 2014</span></a></li> <li><a href="#">MENU 27 <span> / 2014</span></a></li> <li><a href="#">MENU SIZE 28 <span> / 2014</span></a></li> <li><a href="#">MENU SIZE LONG 29 <span> / 2014</span></a></li> <li><a href="#">MENU 30 <span> / 2014</span></a></li> <li><a href="#">MENU SIZE 31 <span> / 2014</span></a></li> <li><a href="#">MENU SIZE LONG 32 <span> / 2014</span></a></li> <li><a href="#">MENU 33 <span> / 2014</span></a></li> <li><a href="#">MENU SIZE 34 <span> / 2014</span></a></li> <li><a href="#">MENU SIZE LONG 35 <span> / 2014</span></a></li> </ul> </div> <div style="text-align:center;clear:both"> </div> </body> </html>