0

私のウェブサイトのナビゲーションで、ここに見られるマジック ライン効果を使用したいと思います。唯一の問題は、私が垂直ナビゲーションを持っていることです。このチュートリアルでは、水平ナビゲーションでマジック ラインを使用する方法のみを説明しています。

私の質問 (または質問) は次のとおりです。
(1) 魔法の線は水平ではなく垂直に機能しますか?
（2）それはどのように達成されますか？
（3）それができない場合、特に垂直ナビゲーションの場合、同様の効果を達成できる他の方法はありますか？

助けてくれてありがとう！

4

1 に答える 1

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();
});​
于 2012-11-05T07:10:17.323 に答える