スライダとzoom
・zoomはposition:relativeをつけないと、配下に反映されない
・
<!DOCTYPE html>
<meta http-equiv="x-ua-compatible" content="IE=7">
<html lang="ja">
<head>
<meta charset="utf-8">
<style type="text/css">
html {
height:90%;
width:90%;
}
body {
height:800px;
width:800px;
zoom:2;
position:relative; /* これをつけないと、zoom値が反映されない */
}
#left_block {
width: 48%;
border:1px inset #aaa;
/*display: block;*/
float: left;
}
#right_block {
zoom:2;
width: 48%;
border:1px inset #aaa;
/*float: right;*/
position:relative; /* これをつけないと、zoom値が反映されない */
}
.js-slider-form{
/*position:relative;*/
}
/* つまみと、スライダバーの親 */
.js-slider{
/*position:relative;*/
width:300px;
height:20px;
border:1px inset red;
}
/* スライダーバー */
.js-slider div{
background:#ddd;
height:3px;
border:1px inset #aaa;
position:relative;
top:12px;
font-size:0px;
}
/* つまみ */
.js-slider input{
position:absolute;
width:15px;
height:20px;
display:block;
}
</style>
<title>ページのタイトル</title>
</head>
<body>
<div>左</div>
<div>右
<form onsubmit="return false;">
<input type="text" value="0">
<input type="text" value="0">
<input type="text" value="0">
<input type="text" value="0">
<div>
<div></div>
<input type="button" value="">
</div>
</form>
</div>
<script language="javascript">
(function(){
var slider = document.getElementById('slider1'); //スライダーバー
var output = document.getElementById('slider1o'); //スライダーバーの値を表示するテキストボックス
var output2 = document.getElementById('slider2o');
var output3 = document.getElementById('slider3o');
var output4 = document.getElementById('slider4o');
//スライダーバー
var zoomvalue = 4;
var input = slider.getElementsByTagName('input')[0]; //つまみ取得
var root = document.documentElement;
var dragging = false;
var value = output.value;// 初期位置
var width = input.clientWidth / 2; //つまみの幅の半分の幅を取得
alert(input.clientWidth); //11になる理由は? clientWidth は element 内のピクセル単位の幅を返します。 paddingを含み、垂直スクロールバー(存在するならば)、border、marginを含みません。
var set_value = function (){
//@@つまみの座標の調整
//(input.style.left)は、指定px＋zoom値が繁栄される。
//value：zoom値が反映されている
//input.clientWidth：zoom値が反映されていない
//input.style.left:設定した値に対して、zoomがかかるため、zoom値でわっておく必要がある
//そのため、zoom値でわっておく必要あり。
//input.style.left = (value - input.clientWidth/2) + 'px';
input.style.left = ((value - (input.clientWidth*zoomvalue)/2)/zoomvalue) + 'px';
output.value = value/zoomvalue; //@@zoom値でわる
//output.value = value;
};
set_value();
// 目盛り部分をクリックしたとき
slider.onclick = function(evt){
dragging = true;
document.onmousemove(evt);
document.onmouseup();
};
// ドラッグ開始
input.onmousedown = function(evt){
dragging = true;
return false;
};
// ドラッグ終了
document.onmouseup = function(evt){
if (dragging) {
dragging = false;
output.value = value;
}
};
document.onmousemove = function(evt){
if(dragging){
// ドラッグ途中
if(!evt){
evt = window.event;
}
var left = evt.clientX; //zoom値が反映された座標
var rect = slider.getBoundingClientRect(); //zoom値が反映された座標
output2.value = left;
output3.value = rect.left;
// マウス座標とスライダーの位置関係で値を決める(zoom値が反映された座標)
value = Math.round(left - rect.left - width); //タッチX座標 - スライダーバーの左端 - つまみの中心
output4.value = width;
// スライダーからはみ出したとき
if (value < 0) {
value = 0;
} else if (value > slider.clientWidth*zoomvalue) { //@@スライダーバーは、zoom値が反映されない
/*} else if (value > slider.clientWidth) {*/
value = slider.clientWidth*zoomvalue; //zoom分2倍する
}
set_value();
return false;
}
};
})();
</script>
</body>
</html>