<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes"><!-- 網站開啓對 web app 程序的支持 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black"> <!-- 指定的iphone中safari頂端的狀態條的樣式 -->
<meta name="format-detection" content="telephone=no">
<meta name="apple-itunes-app" content="app-id=432274380" /><!-- iPhone顯示下載AppStore的banner -->
<meta http-equiv="Expires" CONTENT="-1"> <!-- 網頁在任何時候都不能被Cache存儲 -->
<meta http-equiv="Cache-Control" CONTENT="no-cache">
<meta http-equiv="Pragma" CONTENT="no-cache">
<style>
/*===range 區間滑塊===*/
.h-range {
width: 300px;
background: #e7e7e7;
height: 8px;
position: relative;
}
.h-range .h-progress {
width: 275px;
background: #00a3ff;
height: 10px;
left: 25px;
position: absolute;
margin-top: -1px;
}
.h-range .h-range-l,
.h-range .h-range-r {
width: 25px;
height: 25px;
border: 1px solid #00a3ff;
border-radius: 2px;
background: #fff;
position: absolute;
margin-top: -9px;
}
.h-range .h-range-r {
right: 0;
}
.h-zprice {
margin: 10px 0;
color: #00a3ff;
}
.h-zprice .h-zprice-min {
float: left;
}
.h-zprice .h-zprice-max {
float: right;
}
</style>
</head>
<body>
<section class="h-con h-zyb">
<h2>預算價格範圍？</h2>
<div class="h-zscope">
<p class="h-zprice clearfix"><span class="h-zprice-min">￥<i id="min">10</i>萬</span><span class="h-zprice-max"><i id="max">1000</i>萬</span></p>
<div class="h-range">
<div class="h-progress" id="h-progress"></div>
<div class="h-range-l" id="h-range-l"></div>
<div class="h-range-r" id="h-range-r"></div>
</div>
</div>
</section>
<script>
progress('h-range-l',event);
progress('h-range-r',event);
function $id(o){return document.getElementById(o) || o;}
function progress(o,e){
$id(o).addEventListener("touchstart",function(e){
//手指按下。
var init={
mX : $id(o).offsetLeft, //當前 起始 dom元素的左邊 位置 0 起值
lX : $id('h-range-l').offsetLeft,
rX : $id('h-range-r').offsetLeft,
dX : e.targetTouches[0].pageX, //手指按下的位置。
}
//手指移動
function fnMove(e){
var dist = e.changedTouches[0].pageX-init.dX, //手指一次移動的距離
len = init.mX+dist, //總體移動的距離（即滑塊走的距離，你看到的）
l_x = init.lX,
r_x = init.rX;
//$id(o).style.left=len+'px';
switch ($id(o).id){
case 'h-range-l':
l_x = init.lX + dist;
drawMove('l');
break;
case 'h-range-r':
r_x = init.rX + dist;
drawMove('r');
break;
default: break;
}
function drawMove(d){
if(r_x > l_x + 25 && len>=0 && len<=275 ) {
$id(o).style.left=len+'px';
$id('h-progress').style.left = l_x + 'px';
$id('h-progress').style.width = r_x - l_x + 'px';
if (d=='l') $id('min').innerHTML = Math.round(len*3.6+10);
else $id('max').innerHTML = Math.round(len*3.6+10);
}
}
};
//手指擡起
function fnEnd(e){
var endX = e.changedTouches[0].pageX; //手指擡起，事件細節用changedTouches
//取消綁定事件。
document.removeEventListener("touchmove",fnMove,false);
document.removeEventListener("touchend",fnEnd,false);
};
//綁定事件。
document.addEventListener("touchmove",fnMove,false);
document.addEventListener("touchend",fnEnd,false);
//取消默認層。
e.preventDefault();
},false);
}
</script>
</body>
</html>移動端區間滑塊，仿 上一篇pc端的
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
spa頁面，不同組件按需引入js，aliplayer
(function(d, s, id) { let js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) retur