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 件のコメント:
コメントを投稿