2012年3月5日月曜日

css3のelement関数を使って拡大鏡を作る

※本記事は実験的です．
css3で使えるようになりそうなelement関数を使って拡大鏡を作ってみた．
firefoxでしか動作しないので注意．
→css4に延期となったようですorz...
  • iframeに拡大表示したいhtmlを指定する．
  • iframe上のマウス位置を取得するため，div要素をifameに被せる．
    ※イベントバブリングの仕様上，フレーム内部で起きたイベントが外部HTMLに伝播しないためこのようにしている．
  • 拡大画像を表示したいdiv要素の背景に上記iframeを指定する．
    この時，背景のサイズを2倍にしておく．
  • iframe上のdiv要素のmausemoveイベントに背景画像のスライド処理を登録する．


実行してみる．
改良してみた．
拡大したい領域をマウスで移動できるようにして，iframeをスクロール可能とした．ただ現状描画のタイミングによってゴミが出てしまう模様．
拡大された内容のフォントが滑らかに見えるところから，単なるビットマップの拡大を行っているわけではなさそう．つまり多用すると負荷が高まる可能性がありそう．

<!DOCTYPE html>
<html>
 <head>
 <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
 <style type="text/css">
 body{
  margin:0;
  background-color:lightgray;
 }
 #fr{
  border:none;
  width:800px;
  height:400px;
  overflow:hidden;
 }
 #screen{
  position:absolute;
  left:0;
  top:0;
  width:800px;
  height:400px;
  cursor:crosshair;
 }
 #view{
  border:solid 1px black;
  width:200px;
  height:200px;
  background-image:-moz-element(#fr);
  background-size:1600px 800px;
  background-repeat:no-repeat;
 }
 </style>
 <script type="text/javascript">
 window.onload = function(){
  var screen = document.getElementById("screen");
  var view_style = document.getElementById("view").style;
  var position = ["", ""];
  var PX = "px";
  screen.onmousemove = function(event){
   var x = event.pageX;
   var y = event.pageY;
   position[0] = (event.pageX * 2 - 100)*(-1) + PX;
   position[1] = (event.pageY * 2 - 100)*(-1) + PX;
   view_style.backgroundPosition = position.join(" ");
  }
 }
  </script>
 </head>
 <body>
  <iframe id="fr" width="100%" height="500" src="http://www.yahoo.co.jp"></iframe>
  <div id="screen"></div>
  <div id="view"></div>
  <input type="url" id="url"/>
  <input type="button" value="set" onclick='document.getElementById("fr").src = document.getElementById("url").value'/>
 </body>
</html>
時刻:
ラベル: ,

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)