使用jquery创建一个随鼠标滚动的垂直菜单

发布于，归属于jquery教程。 只剩下板凳啦！ 共有627人围观    

vertical-scrolling-menu

原文：http://valums.com/vertical-scrolling-menu/

接下来我们来看如何使用jquery创建如上图的垂直菜单

创建如下html菜单结构

  1. <div class="sc_menu_wrapper">
  2. <div class="sc_menu">
  3. <a title="Menu" href="#"><img src="img/1.jpg" alt="Menu"/></a>
  4. <a title="Navigation" href="#"><img src="img/2.jpg" alt="Navigation"/></a>
  5. <a title="jQuery" href="#"><img src="img/3.jpg" alt="jQuery"/></a>
  6. <a title="CSS" href="#"><img src="img/4.jpg" alt="CSS"/></a>
  7. <a title="Vertical" href="#"><img src="img/5.jpg" alt="Vertical"/></a>
  8. <a title="Menu" href="#"><img src="img/1.jpg" alt="Menu"/></a>
  9. <a title="Navigation" href="#"><img src="img/2.jpg" alt="Navigation"/></a>
  10. </div>
  11. </div>

很简单的结构，一个a代表着菜单的一个元素，当然元素内的内容可以是文字，也可以是图片。

创建如下样式：

  1. div.sc_menu_wrapper {
  2. position: relative;
  3. height: 500px;
  4. /*容器尺寸应大于元素的尺寸 */
  5. width: 160px;
  6.  
  7. margin-top: 30px;
  8. overflow: auto;
  9. }
  10. div.sc_menu {
  11. padding: 15px 0;
  12. }
  13. .sc_menu a {
  14. display: block;
  15. margin-bottom: 5px;
  16. width: 130px;
  17.  
  18. border: 2px rgb(79, 79, 79) solid;
  19. -webkit-border-radius: 4px;
  20. -moz-border-radius: 4px;
  21.  
  22. /* When image support is turned off */
  23. color: #fff;
  24. background: rgb(79, 79, 79);
  25. }
  26. .sc_menu a:hover {
  27. border-color: rgb(130, 130, 130);
  28. border-style: dotted;
  29. }
  30. .sc_menu img {
  31. display: block;
  32. border: none;
  33. }

引入jquery库

  1. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script>

来看函数及其接口

  1. function makeScrollable(wrapper, scrollable){}
  2. $(function(){  makeScrollable("div.sc_menu_wrapper", "div.sc_menu");});

来看其makeScrollable函数实现的过程

  1. function makeScrollable(wrapper, scrollable){
  2. //获取一个jquery元素
  3. var wrapper = $(wrapper), scrollable = $(scrollable);
  4.  
  5. // 隐藏预加载
  6. scrollable.hide();
  7. var loading = $('<div class="loading">Loading...</div>').appendTo(wrapper);
  8.  
  9. // 检查是否所有的图片都已经加载完毕
  10. var interval = setInterval(function(){
  11. var images = scrollable.find('img');
  12. var completed = 0;
  13.  
  14. //统计成功加载的图片数量
  15. images.each(function(){
  16. if (this.complete) completed++;
  17. });
  18.  
  19. if (completed == images.length){
  20. clearInterval(interval);
  21. // Timeout added to fix problem with Chrome
  22. setTimeout(function(){
  23.  
  24. loading.hide();
  25. // Remove scrollbars
  26. wrapper.css({overflow: 'hidden'});
  27.  
  28. scrollable.slideDown('slow', function(){
  29. enable();
  30. });
  31. }, 1000);
  32. }
  33. }, 100);
  34.  
  35. function enable(){
  36. }
  37. }

来看其enable函数

  1. function enable(){
  2. // height of area at the top at bottom, that don't respond to mousemove
  3. var inactiveMargin = 100;
  4. // Cache for performance
  5. var wrapperWidth = wrapper.width();
  6. var wrapperHeight = wrapper.height();
  7. // Using outer height to include padding too
  8. var scrollableHeight = scrollable.outerHeight() + 2*inactiveMargin;
  9. // Do not cache wrapperOffset, because it can change when user resizes window
  10. // We could use onresize event, but it's just not worth doing that
  11. // var wrapperOffset = wrapper.offset();
  12.  
  13. //创建一个提示框
  14. var tooltip = $('<div class="sc_menu_tooltip"></div>')
  15. .css('opacity', 0)
  16. .appendTo(wrapper);
  17.  
  18. // 保存菜单标题
  19. scrollable.find('a').each(function(){
  20. // The "data" function attaches custom data to an element
  21. $(this).data('tooltipText', this.title);
  22. });
  23.  
  24. // 删除默认的提示
  25. scrollable.find('a').removeAttr('title');
  26. // Remove default tooltip in IE
  27. scrollable.find('img').removeAttr('alt');
  28.  
  29. var lastTarget;
  30. //When user move mouse over menu
  31. wrapper.mousemove(function(e){
  32. // Save target
  33. lastTarget = e.target;
  34.  
  35. var wrapperOffset = wrapper.offset();
  36.  
  37. var tooltipLeft = e.pageX - wrapperOffset.left;
  38. // Do not let tooltip to move out of menu.
  39. // Because overflow is set to hidden, we will not be able too see it
  40. tooltipLeft = Math.min(tooltipLeft, wrapperWidth - 75); //tooltip.outerWidth());
  41.  
  42. var tooltipTop = e.pageY - wrapperOffset.top wrapper.scrollTop() - 40;
  43. // Move tooltip under the mouse when we are in the higher part of the menu
  44. if (e.pageY - wrapperOffset.top < wrapperHeight/2){
  45. tooltipTop = 80;
  46. }
  47. tooltip.css({top: tooltipTop, left: tooltipLeft});
  48.  
  49. //滚动菜单
  50. var top = (e.pageY - wrapperOffset.top) * (scrollableHeight - wrapperHeight) / wrapperHeight - inactiveMargin;
  51.  
  52. if (top < 0){
  53. top = 0;
  54. }
  55. wrapper.scrollTop(top);
  56. });
  57.  
  58. var interval = setInterval(function(){
  59. if (!lastTarget) return;
  60.  
  61. var currentText = tooltip.text();
  62.  
  63. if (lastTarget.nodeName == 'IMG'){
  64. // 没有图片时候写入缓存数据：title
  65. var newText = $(lastTarget).parent().data('tooltipText');
  66.  
  67. // 显示图片提示
  68. if (currentText != newText) {
  69. tooltip
  70. .stop(true)
  71. .css('opacity', 0)
  72. .text(newText)
  73. .animate({opacity: 1}, 1000);
  74. }
  75. }
  76. }, 200);
  77.  
  78. // 当离开菜单，隐藏提示
  79. wrapper.mouseleave(function(){
  80. lastTarget = false;
  81. tooltip.stop(true).css('opacity', 0).text('');
  82. });
  83. }

补充提示的css样式

  1. .sc_menu_tooltip {
  2. display: block;
  3. position: absolute;
  4.  
  5. padding: 6px;
  6. font-size: 12px;
  7. color: #fff;
  8.  
  9. -webkit-border-radius: 4px;
  10. -moz-border-radius: 4px;
  11.  
  12. border: 1px solid rgb(79, 79, 79);
  13. background: rgb(0, 0, 0);
  14. /* Make background a bit transparent for browsers that support rgba */
  15. background: rgba(0, 0, 0, 0.5);
  16. }
（如果您喜欢这篇教程，可以通过支付宝打赏我们1元哦，拜谢！）

跟作者说两句

:wink: :twisted: :roll: :oops: :mrgreen: :lol: :idea: :evil: :cry: :arrow: :?: :-| :-x :-o :-P :-? :) :( :!: 8-O 8)

只剩下板凳了！

  1. 环保型油墨树脂

    这个我喜欢，吼吼

同类