我的页面上有一个很大的徽标,但是当你向下滚动它时会成为一个小标题徽标。我用.tiny类做了那个,它在滚动时切换。
$(window).on("scroll touchmove", function() {
$('#logo').toggleClass('tiny', $(document).scrollTop() > 0);
});
使用CSS:
#logo {
width: 50%;
left: 20vw;
transition: ease-in-out .5s;
}
#logo.tiny {
width: 230px;
image-rendering:auto;
}
事情是,当徽标变小时,image-rendering:auto;
有时会更新,有时则不会。这对我来说似乎很随意。当image-rendering:auto;
处于活动状态时,您可以清楚地看到差异。我正在用chrome测试它。
多数民众赞成我的网站:http://www.lars-widmer.tk/sites/18/只需在开始时确认幻灯片(没有任何危险发生;))然后你就会看到这个标志。
只需向上和向下滚动几次就可以看到有时它看起来很好而有时却看不到。
答案 0 :(得分:2)
试用这个:
#logo.tiny {
width: 230px;
transform: scale(1);
zoom: 0;
}