我是javascript的新手,但我想学习它而不是jQuery来获得一些基础知识。我想要创建的函数应该在箭头通过页面的50%时动画向上转动。除此之外,倒置时调用的功能应该改变。
所以:upArrow onClick(scrollUp) downArrow onClick(scrollDown)
我确信我听起来很愚蠢,但也许有人能理解我想要解释的内容。
答案 0 :(得分:4)
您可以将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()
中加在一起,因为不幸的是浏览器不同意哪个元素代表视口。