- ベストアンサー
画像の一部を表示
JavaScriptで画像の一部だけを表示することは出来るでしょか？イメージ的には、表示する枠を選んで表示したい部分の左上のXY座標を指定する、みたいな感じです。もちろん他の方法でもいいです。最終的にはその表示したい部分の左上の座標の値ををマウスや矢印キーなどで変えてグーグルマップのようなことが出来たらいいなと思っています。回答よろしくお願いします。
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
<html> <body> <div id="a" class="ragimg" style="width:400px;height:400px;overflow:hidden; position:relative;"> <img src="hoge.jpg" class="dragimg" style="position:absolute;top:0px;left:0px;"> </div> <script> window.onload=function(){ var flag = 0; var sx,sy; window.document.onmousedown= function (e){ var o=e?e.target:event.srcElement; if(o.className !='dragimg') return; flag = 1; sx=((/*@cc_on!@*/false)? event.x :e.pageX) -parseInt(o.style.left); sy=((/*@cc_on!@*/false)? event.y :e.pageY) -parseInt(o.style.top); return false; } window.document.onmouseup = function(){ flag=0;return false; } window.document.onmousemove = function(e){ if (!flag) return; var o=e?e.target:event.srcElement; o.style.top = ((/*@cc_on!@*/false)? event.y :e.pageY)-sy +'px'; o.style.left= ((/*@cc_on!@*/false)? event.x :e.pageX)-sx +'px'; return false; } } </script>
その他の回答 (1)
.style.clip 参照
お礼
clip属性ですね！ありがとうございます、原理が分かりました。JavaScriptじゃなくてCSSでしたね(＾＾;)
お礼
画像が動いた！凄い！私もいつかこんな複雑なコードが書けたらいいです。