화면확대 기능 추가하기

최근에 저 시력자를 위한 화면확대 기능을 홈페이지 넣을 기회가 있어서 기술검토를 해 보았습니다.

원리는 css의 transform 속성의 scale(1) 값을 조정해서 화면을 조정하는 기술입니다.(2010년 전후로 꽤 유행했던 기억이 납니다.)

링크에 액션을 넣어야 하기 때문에, 아래 소스를 추가합니다.

핵심은 아래 zoom.js에 body 태그에 transform 속성을 동적으로 추가하는 스크립트가 있습니다.

zoom.js

<script type="text/javascript" src="/js/zoom.js"></script><!-- 화면확대 -->
<script>
$(function() {
 //화면확대
 $(".in").click(function(){
  Zoom.exec(1);
 });
 //화면축소
 $(".out").click(function(){
  Zoom.exec(-1);
 });
});
</script>

<a href="javascripｔ:;" class="in">확대</a>
<a href="javascripｔ:;" class="out">축소</a>

결과 확인은 http://timespace.dothome.co.kr 상단 메뉴에서 가능 하십니다.

zoom.js

0.0MB