画像をドラッグしてみよう! 〜 応用・音量調節 〜
トップ
>
小技集
> (DHTML関連)画像をドラッグしてみよう! 〜 応用・音量調節 〜
ドラッグできる画像の小技を応用すると、こんなものも作れます。
下の音量調節はドラッグできます。(IE、Safari動作確認。FireFoxでは残念ながら動きません。また、ドラッグできるだけで、実際にパソコンの音量が調節されるわけではありません。)
ソースは以下のようになります。
<?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <title>音量調節</title> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <style type="text/css"> .drag{ position:relative; cursor:pointer; } .measure{ background-image:url(/img/measure.gif); background-repeat:no-repeat; background-position:center; } </style> <script type="text/javascript"><!-- var dragobject={ x : 0, offsetx : null, targetobj : null, dragapproved : 0, initialize:function(){ document.onmousedown=this.drag document.onmouseup=function(){this.dragapproved=0} }, drag:function(){ var evtobj=window.event; this.targetobj=event.srcElement; if (this.targetobj.className=="drag"){ this.dragapproved=1 if (isNaN(parseInt(this.targetobj.style.left))){this.targetobj.style.left=0} this.offsetx=parseInt(this.targetobj.style.left) this.x=evtobj.clientX if (evtobj.preventDefault) evtobj.preventDefault() document.onmousemove=dragobject.moveit } }, moveit:function(){ var evtobj=window.event; if (this.dragapproved==1){ this.targetobj.style.left=this.offsetx+evtobj.clientX-this.x+"px" if (parseInt(this.targetobj.style.left)<0){ this.targetobj.style.left="0px" } if (parseInt(this.targetobj.style.left)>300){ this.targetobj.style.left="300px" } return false } } } dragobject.initialize(); //--></script> </head> <body> <table><tr><td width="320" class="measure"> <img src="/img/slider.gif" class="drag" /> </td></tr></table> </body> </html>
ソース解読のためのヒント
ポイント1
:
垂直方向には移動させない
「
画像をドラッグしてみよう!
」で紹介したソースから、垂直方向(y方向)に移動させるためのコードを削除します。
ポイント2
:
水平方向の移動を制限する
1〜5の目盛り上だけを移動するように、水平方向(x方向)の移動を制限します。音量調節のつまみの画像の左側のx座標が0(目盛りの一番左端)未満になったときは強制的に0に戻し、300(目盛りの一番右端)を超えたときは強制的に300に戻します。
ポイント3
:
目盛りの画像はテーブルのセルの背景とする
テーブルのtdタグにCSSのクラスを適用し、tdタグの背景画像を指定します。
ポイント4
:
z方向のコードを削除する
今回はドラッグする画像が一つだけなので、重なりは問題とならないため、z方向のコードは削除します。
トップ
>
小技集
> (DHTML関連)画像をドラッグしてみよう! 〜 応用・音量調節 〜
トップ
|
このサイトについて
|
管理者へメール
|
サイトマップ
www
una.soragoto.net
Copyright(c) 2009 - 2012 una All Rights Reserved.