0

您好我正在使用jQuery自定义下划线插件（如下）代码相对简单，目前下划线出现鼠标悬停功能并消失鼠标悬停，也只有一个下划线实例可以在任何时候在他的网页上存在。我想调整代码，以便下划线是永久的，无论鼠标移动如何，一个页面上可以存在多个实例，但我正在努力使其工作。这是当前代码：

<script language="JavaScript" type="text/javascript">
   $(document).ready(function() {
        $('.underline a').underline({
            width:           4,                     //default: 1
            distance:        -1,                    //default: 0
            color:           '#66FFB2',     //default: #000
            durationOn:  350,                       //default: 250
            durationOff: 350,                       //default: 250
            extend:          2,                     //default: 2,
            linkOn:          'mouseover',   //default: 'mouseover'
            linkOff:         'mouseout'             //default: 'mouseout'
    });
    });
</script>



(function($){  
$.fn.underline = function(options) {
    var defaults = { 
                    width:       1,
                    distance:    0,
                    color:       '#000',
                    durationOn:  250,
                    durationOff: 250,
                    extend:      2,
                    linkOn:      'mouseover',
                    linkOff:     'mouseout'
                   };

    var options = $.extend(defaults, options);

    return this.each(function() { 
        obj = $(this);

        //Mouse Events
        var linkOn = options.linkOn;
        var linkOff = options.linkOff;

        obj.bind(linkOn, function() {
          $('#underlineLine').remove();

            var position  = $(this).offset();
            var top       = position.top;
            var left      = position.left;

            var objWidth  = $(this).width();
            var objHeight = $(this).height();

            $('body').append('<div id="underlineLine"></div>');

            $('#underlineLine').css({'position'        :'absolute',
                                     'display'             :'none',
                                     'height'           : options.width+'px',
                                      'background-color': options.color,});

            $('#underlineLine').css({'left' : left-options.extend,
                                     'top'  :      top+objHeight+options.distance,
                                     'width':     objWidth+options.extend*2 })
                                    .fadeIn(options.durationOn);

        });

        obj.bind(/*linkOff,*/ function() {
            $('#underlineLine').fadeOut(options.durationOff);

        });
    });  
};
})(jQuery);

<div class="underline"><a href="#">LINK</a></div>

谢谢！

4

0 回答 0