0

ストリーミング バーをクリックすると、ブラウザ ウィンドウの左端から位置が検出されますが、このデモ#progressBarではdivの左端から検出する必要があります。そのため、クリックされた水平位置に 200pxのdivが追加されます。#progressBarleft: 200px;

私の簡単な検出機能：

function point_it(e){
      var x=e.clientX; 
      var seekSecond = Math.floor((x/1100) * ytplayer.getDuration()); //1100 is width of the progress bar 
      seekTo(seekSecond);
      document.getElementById("xPos").innerHTML=x;
    }

スタイル：

    #progressBar{
position: relative;
top: 400px;
left: 200px;
width: 1100px;
height: 4px;
border: 2px solid gray;
margin: 10px;
z-index: 8;
}


#elapsedBar{
position: relative;
top: -1px;
width:0px;
height:3px;
border:1px solid;
border-color: #660033;
background-color: #660033;
margin:0px;
z-index: 10;
}

#loadedBar{
position: relative;
top: 0px;
width: 0px;
height:4px;
border:1px solid;
border-color: gray;
background-color: gray;
margin:0px;
z-index: 9;
}
4

3 に答える 3

1

クリックした位置から左の位置を差し引くことができます。私はこれを行うjQueryの方法しか知りません：

// Get the "left" value
var leftPos = $("#progressBar").css("left");
// Remove "px"
var leftPos = leftPos.replace("px", "");

次にleftPos、取得した値から減算します

于 2012-12-29T15:11:05.770 に答える
1

e.offsetXの代わりに関数で使用するだけですe.clientX。

e.client...ブラウザウィンドウにe.offsett...関連し、クリックされたターゲット要素に関連しています。

于 2012-12-29T15:17:13.783 に答える
1

xのため、から 10 を引かなければなりませんmargin: 10px;。これによりvar x=e.clientX;、バーの左側をクリックすると 10 になります。

于 2012-12-29T15:34:03.797 に答える