js input元素滑块样式



94 373 125



特效描述:js input元素 滑块样式,js input元素滑块样式

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/default.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">

2. 引入JS

<script src="js/modernizr.js" type="text/javascript"></script>
<script src='js/stopExecutionOnTimeout.js?t=1'></script>

3. HTML代码

	<input type='range' id='r1' class='tip fill fill-replace' value='7' min='1' max='13' />
	<input type='range' id='r2' class='tip fill' value='60' />
	<input type='range' id='r3' class='tip' value='25' step='25' />
	<input type='range' id='r4' class='fill' value='87' />
<script>
var range_els = document.querySelectorAll('input[type=range]'), n = range_els.length, style_el = document.createElement('style'), styles = [], track_sel = [
		'::-moz-range-track',
		'::-webkit-slider-runnable-track',
		' /deep/ #track'
	], thumb_sel = [
		'::-webkit-slider-thumb',
		' /deep/ #thumb'
	], a = ':after', b = ':before', s = [
		'',
		'%',
		'%'
	];
document.body.appendChild(style_el);
for (var i = 0; i < n; i++) {
	if (window.CP.shouldStopExecution(1)) {
		break;
	}
	styles.push('');
	range_els[i].addEventListener('input', function () {
		var idx = this.id.split('r')[1] - 1, base_sel = '.js #' + this.id, str = '', min = this.min || 0, max = this.max || 100, c_style, u, edge_w, val;
		this.setAttribute('value', this.value);
		if (this.classList.contains('tip')) {
			str += base_sel + thumb_sel[0] + a + ',' + base_sel + thumb_sel[1] + a + '{content:"' + this.value + s[idx] + '"}';
		}
		if (this.classList.contains('fill')) {
			if (idx == 0) {
				c_style = getComputedStyle(this);
				u = c_style.backgroundSize.split(' ')[0].split('px')[0];
				edge_w = (c_style.width.split('px')[0] - u * (max - min)) / 2;
				val = (this.value - min) * u + edge_w + 'px';
			} else {
				val = this.value + '%';
			}
			if (this.classList.contains('fill-replace')) {
				str += base_sel + track_sel[0] + '{background-size:' + val + '}';
			}
			str += base_sel + track_sel[1] + a + ',' + base_sel + track_sel[2] + a + '{width:' + val + '}';
		}
		styles[idx] = str;
		style_el.textContent = styles.join('');
	}, false);
}
window.CP.exitedLoop(1);
</script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滑动 滑块 滑动门 触屏滑动 滑动插件 滑块插件 拖动 拖拽 拖动插件 拖拽插件 图片拖动 图片拖拽 滑动选项卡 滑动切换

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到