如何通过滚动复制缩小效果

时间:2014-12-11 23:38:29

标签: javascript css css3 web

如何复制Apple 5k iMac网站上使用的效果,向下滚动会产生缩小效果?这是网站:

http://www.apple.com/imac-with-retina/

1 个答案:

答案 0 :(得分:1)

这适用于大多数浏览器:



window.onmousewheel= function(e) {
  e.preventDefault();
  if((e.wheelDelta || -e.detail) < 1) {
    document.body.style.zoom--;
  }
  else {
    document.body.style.zoom++;
  }
}
&#13;
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
&#13;
&#13;
&#13;