当图像通过页面上的某个点时，如何更改图像，然后当图像位于该点上方时将其更改回来？

Question

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

所以：UPARROW的onClick（scrollUp） DownArrow中文的onClick（下滚）

我敢肯定，我听起来很蠢，但也许有人能理解我试图解释。

Answer 1

您可以写入imageelement.src属性以指向一个不同的箭头，或，额外的平滑性，使用含有两个箭头一个CSS子画面并写入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()是因为当使用IE scrollTo()不会触发滚动事件。 html和body的滚动偏移必须在isHalfwayDown()中加在一起，因为浏览器不幸地不同意哪个元素表示视口。