核弹头H5小游戏

关闭

核弹头小游戏

游戏轻松点
无需下载,点开即玩

拿起手机!扫我啊

核弹头小游戏
无需下载点击即玩

回到顶部

当前位置: 核弹头首页 > 游戏教程 > 正文

代码分享:4种input元素滑块UI样式

来源:www.h5uc.com    作者:nannan   时间:2016-02-22

今天小编给大家推荐几款好玩的input元素滑块UI样式。

分享4种input元素滑块UI样式是一款使用CSS3来渲染样式,使用JavaScript来处理滑块的鼠标拖动事件。效果图如下:

在线预览 源码下载实现的代码。js代码: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 || 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);via:

核弹头小游戏网发布此文仅为传递信息,不代表认同其观点或者证实其描述!