javascript - 如何在图像经过页面上的某个点时更改图像，然后在高于该点时将其更改回来？

Question

我对 javascript 完全陌生，但我想学习它而不是 jQuery 来获得一些基础知识。我要创建的函数应该使箭头在经过页面的 50% 时向上转动。除此之外，它在倒置时调用的函数应该改变。

所以:upArrow onClick(scrollUp) 向下箭头 onClick(scrollDown)

我敢肯定我听起来很愚蠢，但也许有人能理解我要解释的内容。

Answer 1

您可以编写 imageelement.src 属性以指向不同的箭头，或者为了更加平滑，使用包含两个箭头的 CSS Sprite 并编写 element.style.backgroundPosition 无需加载新图像即可更改显示的图像。

您可以为 imageelement.onclick 分配一个新函数来更改单击它时发生的情况，但通常使用一个根据状态决定要执行的操作的单击函数会更简单。

例如:

<div id="arrow" class="arrow-down"></div>


#arrow {
    position: fixed; top: 0; left: 0; z-index: 10;
    width: 32px; height: 32px;
    background-image: url(/img/arrow.png);
}
.arrow-down {
    background-position: 0 0;
}
.arrow-up {
    background-position: 0 -32px;
}


var arrow= document.getElementById('arrow');

window.onscroll=window.onresize= function() {
    arrow.className= isHalfwayDown()? 'arrow-up' : 'arrow-down';
};
arrow.onclick= function() {
    var h= document.documentElement.scrollHeight;
    scrollTo(0, isHalfwayDown()? 0 : h);
    window.onscroll();
};

function isHalfwayDown() {
    var y= document.documentElement.scrollTop+document.body.scrollTop;
    var h= document.documentElement.scrollHeight;
    return y>=h/2;
}

浏览器兼容性说明:window.onscroll() 是因为在使用 scrollTo() 时 IE 不会触发滚动事件。 html 和 body 的滚动偏移量必须在 isHalfwayDown() 中一起添加，因为不幸的是浏览器不同意哪个元素代表视口(viewport)。