jQuery MagicLine可以垂直工作

Question

我想在我的网站导航上使用魔法线效应。唯一的问题是我有一个垂直导航，本教程仅解释了如何在水平导航上使用魔线。

我的问题（或问题）是：
（1）魔术线可以垂直工作而不是horzionation吗？
（2）如何完成？
（3）如果无法完成，是否有其他方法可以实现类似的效果，特别是针对垂直导航？

事先感谢您的任何帮助！

Answer 1

我决定为您提供一些东西。它远非完美，但应该使您朝着正确的方向前进。我尝试提供不错的文档，以便您可以进一步使用此插件。随着时间的流逝，我没有进行太多的彻底测试。希望这会有所帮助。

首先，链接jsfiddle

现在，代码

/**
 * You can target the .vLine class and change anything you want
 * Core Propreties that should be left untouched are:
     1. top value
     3. position declaration
 * Any other CSS properties should be changed to suit your style.
 * In some cases, you may want to change the left / right values
 * to fit the needs of the position of the vLine
 * simply use $('.vLine').css('left/right', 'value');
 */

(function($){
    //define methods of the plugin
    var methods = {
        init: function(options){
            //set up some default values
            var defaults = {
                'side' : 'right'            
            }
            //for each element with vLine applied
            return this.each(function(){
                //override defaults with user defined options
                var settings = $.extend({}, defaults, options);       
                //cache variable for performance
                var $this = $(this);
                //wrap the UL with a positioned object just in case
                $this.wrap('<div style="position:relative;width:'+$this.css('width')+';height:'+$this.css('height')+';"></div>');
                //test to see if element exists, if not, append it
                if(!$('.vLine').length){
                    //parent is the ul we wrapped
                    //insert the vLine element into the document
                    $this.parent().append($('<div style="position:absolute;top:'+$this.position().top+'px;height:'+$this.height() / $this.find('li').length+'px;width:3px;" class="vLine"></div>'));                            
                    //do we want to show it on the left or right?
                    if(settings.side = 'right'){
                        $('.vLine').css('right', '0');
                    }else if(settings.side = 'left'){
                        $('.vLine').css('left', '0');
                    }
                }
                //define the hover functions for each li
                $this.find('li').hover(function(e){                       
                    $('.vLine').stop().animate({
                        top: $(this).position().top    
                    },200);    
                }, function(e){  
                   //we want to reset the line if this is met
                   if(['UL', 'LI'].indexOf(e.toElement.tagName) == -1){
                        $('.vLine').stop().animate({
                            top: '1px'
                        });                            
                    }                    
                });                
            });
        }            
    }
    //make it a function!
    $.fn.vLine = function( method ) {
        if (methods[method]) {
            return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
        } else if (typeof method === 'object' || !method) {
            return methods.init.apply(this, arguments);
        } else {
            $.error( 'Method ' +  method + ' does not exist on jQuery.vLine' );
        }
    };
})(jQuery);
//on document ready
$(function(){
    //invoke our vLine!
    $('ul').vLine();
});​