console
$(document).ready(function() {
var startX, dx, $xtVal = $('#xt-value'),
$ruler = $('.ruler'),
factor = 18,
scale = 57.5;
var rulers = [];
for (var i = 0; i < scale; i++) {
rulers[i] = ('<div class="ruler-scale">' + i + '.0</div>');
}
$('.ruler').empty().css('width', factor * scale * 10 + 'px').append(rulers.join(''));
/** 滑尺选择数值 */
$('.ruler-mask')
.on('touchstart', function(e) {
e.preventDefault();
startX = e.originalEvent.touches[0].clientX;
})
.on('touchmove', function(e) {
dx = e.originalEvent.touches[0].clientX - startX;
startX = e.originalEvent.touches[0].clientX;
$ruler.css('transform', function(index, value) {
var curr = parseInt(value.match(/-?\d+/g)[4]),
result;
result = Math.min(0, Math.max( - factor * scale * 10, curr + dx));
var ssss = (Math.floor(Math.abs(0 - result) / factor) * 0.1);
$xtVal.text(ssss.toFixed(1));
return 'translateX(' + result + 'px)';
});
});
var defultVal = 5.5;
$xtVal.text(defultVal);
$ruler.css('transform', 'translateX(' + -(defultVal * 10 * 18) + 'px)');
});
<div id="xt-value"></div>
<!--标尺-->
<div class="ruler-container">
<div class="ruler" style="width: 1350px; transform: translateX(-1025px);">
<div class="ruler-scale">
0.0
</div>
<div class="ruler-scale">
1.0
</div>
<div class="ruler-scale">
2.0
</div>
<div class="ruler-scale">
3.0
</div>
<div class="ruler-scale">
4.0
</div>
<div class="ruler-scale">
5.0
</div>
<div class="ruler-scale">
6.0
</div>
<div class="ruler-scale">
7.0
</div>
</div>
<div class="ruler-mask">
</div>
</div>
// Color variables (appears count calculates by raw css)
$color0: #ddebf0; // Appears 3 times
$color1: #0c4965; // Appears 3 times
$color2: #ffffff; // Appears 3 times
$color3: #eeeeee; // Appears 2 times
// Width variables (appears count calculates by raw css)
$width9: 48px; // Appears 2 times
// Height variables (appears count calculates by raw css)
$height1: 48px; // Appears 2 times
$height2: 88px; // Appears 2 times
$height4: 100%; // Appears 2 times
* {
box-sizing: border-box;
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
position: relative;
}
.ruler-container {
background-image: url(http://120.55.51.236:8000/ruler_bg.png);
height: 141px;
margin-left: 21px;
margin-top: 80px;
overflow: hidden;
width: 649px;
.ruler {
-moz-transform: translateX(-1260px);
-ms-transform: translateX(-1260px);
-o-transform: translateX(-1260px);
-webkit-transform: translateX(-1260px);
background-image: url(http://120.55.51.236:8000/ruler.png);
background-repeat: repeat-x;
height: $height4;
left: 325px;
transform: translateX(-1260px);
width: 4594px;
.ruler-scale {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
color: $color2;
float: left;
font-size: 32px;
height: 44px;
left: -40px;
line-height: 32px;
padding: 6px 0;
top: 70px;
width: 80px;
}
.ruler-scale+.ruler-scale {
margin-left: 100px;
}
}
.ruler-mask {
background-image: url(http://120.55.51.236:8000/ruler_mask.png);
background-repeat:no-repeat;
height: $height4;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
}