最近做一個(gè)導(dǎo)航欄跟隨效果的頁(yè)面伞插，于是寫了個(gè)插件分享一下。
example.gif
CSS 設(shè)置
.nav {
position: absolute;
top: 30px;
right: 100px;
display: inline-block;
margin: 20px auto;
}
.nav li {
display: inline-block;
margin-right: 20px;
}
.nav li a {
text-decoration: none;
color: #333;
}
.underline {
position: absolute;
top: 30px;
left: 0;
width: 32px;
height: 2px;
background: #333;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
HTML 結(jié)構(gòu)
<ul class="nav">
<li><a href="javascript:;">首頁(yè)</a></li>
<li><a href="javascript:;">產(chǎn)品中心</a></li>
<li><a href="javascript:;">關(guān)于我們</a></li>
<li><a href="javascript:;">聯(lián)系我們</a></li>
<li class="underline"></li>
</ul>
Native 原生寫法
// Native
(function () {
var nav = document.querySelector('.nav'),
underline = nav.querySelector('.underline');
nav.addEventListener('mouseover', function (event) {
var _target = event.target;
if (_target.nodeName == "LI" || _target.nodeName == "A") {
underline.style.left = _target.offsetLeft + 'px';
underline.style.width = _target.offsetWidth + 'px';
}
}, false);
})();
jQuery 寫法
// jQuery
(function ($) {
var $nav = $('.nav'),
$underline = $nav.find('.underline');
$nav.on('mouseover', 'li', function() {
var _navOffsetLeft = $nav.offset().left,
_targetOffsetLeft = $(this).offset().left,
_targetWidth = $(this).width();
$underline.css({
'left': _targetOffsetLeft - _navOffsetLeft + 'px',
'width': _targetWidth + 'px'
});
});
})(jQuery);
另外我編寫了插件放在Github上面（nav-nuderline.js）祷杈， https://github.com/wwlsky/nav-nuderline/
