javascript - 滑动导航箭头

Question

我正在尝试在标题的最顶部创建一个滑动箭头，该箭头根据当前事件的菜单项水平滑动。

编辑 - 我所指的示例网站不再有效。

当页面加载时，箭头应该在正确的位置(即在事件菜单项的正上方)。目前，我的努力是让它从屏幕左侧滑入，然后在页面加载/刷新时停在事件按钮上方。

我目前在我的网站上使用 jQuery 1.8.3、Modernizr 和 Cycle Lite 来实现各种其他功能。

Answer 1

以下 fiddle ，据我所知您正在寻找:

http://jsfiddle.net/8DZZQ/13/

以下是jsfiddle javascript。在这里，我使用边距调整了 nav_arrow，但您可以轻松地将其绝对定位并根据选项的 offsetLeft 移动它。

在mouseover和mouseout事件中添加了arrangement函数arr()，这意味着可以计算出nav_arrow的新位置，并相应地调整margin，默认选项由mouseout发送，以便默认情况下弹回的箭头。

每个菜单项都添加了 default 属性，以便 onclick 事件更改哪个元素成为返回的默认项 - 虽然这假设您的链接是动态的并且页面不会重新加载/更改到另一个页面，如果是这种情况，那么您应该将 id="d"的 div 更改为不同页面 html 上的适当元素，并相应地调整代码。

我还添加了一个微调数组，因此您可以将箭头定位在每个 div 上您喜欢的精确点。这些值被添加到每个菜单项的左侧位置，所以对于 link1 来说，它的宽度是 60ish 并且带有填充/边距等微调 34 将 nav_arrow 放在中心:

window.onload = function () {
    var fine = [36, 34, 34, 34];
    var mitms = document.getElementsByClassName('mitm');
    var l0 = (mitms[0].offsetLeft + fine[0]);
    document.getElementById("nav_arrow").style.marginLeft = l0 + "px";

    for (var i = 0; i < mitms.length; i++) {
        mitms[i].default = false;
        mitms[i].fine = fine[i];
        mitms[i].onmouseover = function () {arr(this);};
        mitms[i].onmouseout = function () {
            var tmp = document.getElementsByClassName('mitm');
            for (var j=0; j<tmp.length; j++) {
                if (tmp[j].default === true) {arr(tmp[j]); break;}
            }
        };
        mitms[i].onclick = function() {
            var tmp = document.getElementsByClassName('mitm');
            for (var j=0; j<tmp.length; j++) {tmp[j].default = false;}
            this.default = true;
        }
    }
    mitms[0].default = true;
};

function arr(el) {
    var mitms = document.getElementsByClassName('mitm');
    var l = el.offsetLeft + el.fine;
    document.getElementById("nav_arrow").style.marginLeft = l + "px";
}

html 类似于您提供的示例网站:

<div id="nav">
    <div id="d" class="mitm"><a href="#">Default</a></div>
    <div class="mitm"><a href="#">Link1</a></div>
    <div class="mitm"><a href="#">Link2</a></div>
    <div class="mitm"><a href="#">Link3</a></div>
    <div id="nav_arrow"></div>
</div>

随着 css 的平滑过渡:

#nav_arrow {
  position: relative;
  margin: 20px 0 0 0;

  /* Gets you your triangle, no image needed */
  background: transparent;
  border-left: 7px solid transparent; 
  border-right: 7px solid transparent;
  border-top: 10px solid #000;
  border-bottom: none;
  width: 0px;
  height: 0px;
  font-size: 1px;

  /* Transitions to give smooth movement*/
  transition: margin 1s;
  -moz-transition: margin 1s; /* Firefox 4 */
  -webkit-transition: margin 1s; /* Safari and Chrome */
  -o-transition: margin 1s; /* Opera */
  /* IE doesn't support until ie10 */
}

由于 IE 还不支持 css 转换，我相信会有一个合适的 jquery 解决方案来使 IE 转换平滑。

希望有所帮助!

编辑!

这也可以通过简单的 css 来实现:

#menuitem1:hover ~ #nav_arrow {
   margin: 0px 0px 0px 185px;
}

假设 menuitem1 是

<a id='menuitem1'></a>

和以前一样使用过渡等