javascript 模仿html元素转动条 jscroll
发布时间：2018-10-02 23:26:21 所属栏目：创业 来源：站长网
导读：主流赏识器默以为html元素提供的转动条不雅观，并且前端开拓职员想对其通过css举办同一样式的美化也是不行实现的。好比ie可以通过样式来实现简朴的美化、Webkit内核赏识器可以节制转动条的表现结果，firefox则不应承用户为转动条界说样式。可是对付追求友
|
create()要领用户调解建设带有自界说转动条的元素整体布局，起首通过建设了wrapper元素，用于包装会呈现转动条的元素elem和转动条可转动的地区元素list以及转动条元素s。通过从呈现转动条元素配置的自界说属性data-width、data-height别离配置wrapper元素的宽度和高度。通过scrollbarHeight()要领计较获得了转动条元素表现的高度，整体布局不算伟大。建设自界说转动条整体布局之后是为转动条元素s和转动条可达到地区元素list添加变乱处理赏罚，通过regEvent()要领实现。 //计较转动条的高度scrollbarHeight: function(elem, height) { var value = elem.scrollHeight; return (height / value) * height } scrollbarHeight()要领通过简朴的数学计较返回转动条元素应该表现的高度。 initEvent: function() {var that = this, _default, elem, top, min, max, prev, parent, sbody, unit; //转动条转动 squid.on(document, 'mousemove', function(event) { elem = that.scrolling.elem if(elem !== null) { squid.addClass(elem, 'scrolling') top = event.clientY - that.scrolling.diffy parent = that.ie6 ? elem.parentNode.parentNode : elem.parentNode min = that.limits[elem].min max = that.limits[elem].max prev = parent.previousSibling sbody = prev.tagName.toLowerCase() === 'div' ? prev : prev.previousSibling _default = parseInt(sbody['data-height'] || sbody.getAttribute('data-height'), 10) unit = (sbody.scrollHeight - _default) / max squid.addClass(sbody.parentNode, 'unselectable') if(top < min) { top = min }else if(top > max) { top = max } elem.style.top = top + 'px' that.doScroll(sbody, top * unit) } }) //转动竣事 squid.on(document, 'mouseup', function(event) { elem = that.scrolling.elem if(elem) { prev = that.ie6 ? elem.parentNode.parentNode.previousSibling : elem.parentNode.previousSibling sbody = prev.tagName.toLowerCase() === 'div' ? prev : prev.previousSibling squid.removeClass(sbody.parentNode, 'unselectable') } that.scrolling.elem = null that.scrolling.diffy = 0 }) } initEvent()要领实现了为document元素添加mousemove和mouseup变乱，mousemove实现了在拖动转动条元素转动时查察的内容跟从变革。代码起首判定当前是否有拖动转动条查察内容的操纵，假若有就计较转动条被拖动到的位置，然后计较查察内容应该到的处所。代码里对ie6的判定，是由于引入的PIE.htc文件粉碎了原有的布局（为了实现跨赏识器下表现结果的同等，支付太大了！！！）。mouseup变乱处理赏罚措施实现了破除前次操纵的转动条元素。 //添加转动条变乱regEvent: function(elem) { var that = this, sbody = elem.firstChild, list = sbody.nextSibling, //转动条元素 s = list.firstChild, //转动条转动最小值 min = 0, //转动条转动最大值 max = list.offsetHeight - s.offsetHeight, _default = parseInt(sbody['data-height'] || sbody.getAttribute('data-height'), 10), unit = (sbody.scrollHeight - _default) / max, //firefox赏识器 firefox = 'MozBinding' in document.documentElement.style, //鼠标滚轮变乱 mousewheel = firefox ? 'DOMMouseScroll' : 'mousewheel', //opera赏识器 opera = window.oprea && navigator.userAgent.indexOf('MSIE') === -1, //is firing mousedown event firing = false, //鼠标点击，按时器执行时刻 interval, //转动条间隔容器高度 top, //转动条当前top值 cur, //每次转动几多像素 speed = 18; //变量缓存min, max this.limits[s] = { min: 0, max: max } //scroll变乱 鼠标滑动滚轮移动转动条 squid.on(elem, mousewheel, function(event) { var delta; if(event.wheelDelta) { delta = opera ? -event.wheelDelta / 120 : event.wheelDelta / 120 }else{ delta = -event.detail / 3 } cur = parseInt(s.style.top || 0, 10) //向上转动 if(delta > 0) { top = cur - speed if(top < min) { top = min } }else{//向下转动 top = cur + speed if(top > max) { top = max } } s.style.top = top + 'px' that.doScroll(sbody, top * unit) //阻止body元素转动条转动 event.preventDefault() }) //ie6, 7, 8下，假如鼠标持续点击两次且时距离断太短，则第二次变乱不会触发 //拖动转动条，点击转动条可达到地区 squid.on(list, 'mousedown', function(event) { var target = event.target, y = event.clientY; target = event.target if(target.tagName.toLowerCase() === 'shape') target = s //鼠标点击元素是转动条 if(target === s) { //invoke elem setCapture s.setCapture && s.setCapture() that.scrolling.diffy = y - s.offsetTop //鼠标移动进程中判定是否正在拖动转动条 that.scrolling.elem = s }else if(target.className.match('jscroll-list')){ firing = true interval = setInterval(function() { if(firing) { that.mouseHandle(list, y, unit) } }, 80) } }) //鼠标松开转动条遏制转动 squid.on(list, 'mouseup', function() { //invoke elem releaseCapture s.releaseCapture && s.releaseCapture() firing = false clearInterval(interval) }) //转动条元素获取核心，可以触发keyup变乱 squid.on(s, 'click', function() { this.focus() }) //转动条获取核心后，触发键盘上下键，转动条转动 squid.on(s, 'keydown', function(event) { var keyCode = event.keyCode, state = false; cur = parseInt(s.style.top || 0, 10) switch(keyCode) { case 38: top = cur - speed if(top < min) { top = min } state = true break case 40: top = cur + speed if(top > max) { top = max } state = true break default: break } if(state) { s.style.top = top + 'px' that.doScroll(sbody, top * unit) } event.preventDefault() }) }
（编辑：湖南网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
