HTML5 很棒的按钮悬停高亮特效

2014-05-01 08:53:55 -0400

此代码仅供参考

代码说明

Button-Highlight Experiment

html代码

<div class="row">
    <div class="col">
        <button type="button">
            Lorem ipsum dolor
        </button>
        <span class="desc">(Only horizontally moving highlight.)</span>
    </div>
    <div class="col">
        <button type="button" data-vertical>
            Foo Bar Baz Vertical
        </button>
        <span class="desc">(Highlight moving horizontally &amp; vertically.)</span>
    </div>
</div>

var $btn = $(this),
            $inner = $('<span class="inner">' + $btn.text() + '</span>'),
            $highlight = $('<span class="highlight" />');

var btnHeight = $btn.outerHeight();

function showHighlight() {
            $highlight.addClass('is-visible');
            $btn
                .on('mouseleave', hideHighlight)
                .on('mousemove', moveHighlight)
                .on('mousedown', shrinkHightlight)
                .on('mousedown', unFocus);
        }

function moveHighlight(evnt) {
            var btnPos = $btn.position(),
                btnLeft = btnPos.left,
                btnTop = btnPos.top,
                xOffset = evnt.pageX - btnLeft - btnHeight,
                yOffset = evnt.pageY - btnTop - btnHeight;
            $highlight.css('left', xOffset);
            if ($btn[0].hasAttribute('data-vertical')) {
                $highlight.css('top', yOffset);
            }
        }

function shrinkHightlight() {
            $highlight
                .one('transitionend', function() {
                    $highlight.removeClass('is-shrunk');
                })
                .addClass('is-shrunk');
        }

function unFocus() {
            $btn.one('transitionend', function() {
                $btn.blur();
            });
        }

function hideHighlight() {
            $highlight
                .one('transitionend', function() {
                    $highlight.css('left', '');
                })
                .removeClass('is-visible');
            $btn
                .off('mousemove')
                .off('mousedown')
                .off('mouseleave');
        }

$btn.html($inner);
        $highlight
            .css({
                width: btnHeight * 2,
                height: btnHeight * 2,
                top: -(btnHeight * .5)
            })
            .appendTo($btn);

$btn.on('mouseenter', showHighlight);

});
});
</script>

代码演示

(Only horizontally moving highlight.)

(Highlight moving horizontally & vertically.)

【本站仅供参考，版权归原作者所有】

«Newer Older»

Back to home

Subscribe | Register | Login | N