function Slider(e){this.outer=e.dom,this.obj=e.obj,this.init(),this.renderDOM(),this.bindDOM(),this.red=255,this.green=255,this.blue=255}Slider.prototype.init=function(){this.left=this.outer.offsetLeft,this.width=this.outer.offsetWidth},Slider.prototype.renderDOM=function(){for(var e=0;3>e;e++){var t=document.createElement("li"),r=document.createElement("span");switch(e){case 0:r.style.cssText="width:60px;height:60px;border-radius:50%;background-color:rgb(255,0,0)";break;case 1:r.style.cssText="width:60px;height:60px;border-radius:50%;background-color:rgb(0,255,0)";break;case 2:r.style.cssText="width:60px;height:60px;border-radius:50%;background-color:rgb(0,0,255)"}t.appendChild(r),this.outer.appendChild(t)}},Slider.prototype.bindDOM=function(){for(var e=this,t=e.outer.getElementsByTagName("span"),r=function(t){for(var r=t.target;"SPAN"!=r.nodeName&&"BODY"!=r.nodeName;)r=r.parentNode;e.target=r},o=function(t){switch(t.preventDefault(),e.index=Array.prototype.slice.call(e.outer.childNodes).indexOf(t.target.parentNode),e.offset=t.targetTouches[0].pageX-e.left,console.log(e.index),e.offset<=0?e.style.webkitTransform="translate3d(0, 0, 0)":e.offset>=e.width?e.style.webkitTransform="translate3d("+e.width+"px, 0, 0)":t.target.style.webkitTransform="translate3d("+e.offset+"px, 0, 0)",e.index){case 1:e.red=parseInt(e.offset/e.width*255);break;case 2:e.green=parseInt(e.offset/e.width*255);break;case 3:e.blue=parseInt(e.offset/e.width*255)}e.obj.style.backgroundColor="rgb("+e.red+","+e.green+","+e.blue+")"},n=function(e){e.preventDefault()},s=0;s<t.length;s++)t[s].addEventListener("touchstart",r),t[s].addEventListener("touchmove",o),t[s].addEventListener("touchend",n)},new Slider({dom:document.getElementById("slider"),obj:document.getElementById("color")});
function Slider(e){this.outer=e.dom,this.obj=e.obj,this.init(),this.renderDOM(),this.bindDOM(),this.red=255,this.green=255,this.blue=255}Slider.prototype.init=function(){this.left=this.outer.offsetLeft,this.width=this.outer.offsetWidth},Slider.prototype.renderDOM=function(){for(var e=0;3>e;e++){var t=document.createElement("li"),r=document.createElement("span");switch(e){case 0:r.style.cssText="width:60px;height:60px;border-radius:50%;background-color:rgb(255,0,0)";break;case 1:r.style.cssText="width:60px;height:60px;border-radius:50%;background-color:rgb(0,255,0)";break;case 2:r.style.cssText="width:60px;height:60px;border-radius:50%;background-color:rgb(0,0,255)"}t.appendChild(r),this.outer.appendChild(t)}},Slider.prototype.bindDOM=function(){for(var e=this,t=e.outer.getElementsByTagName("span"),r=function(t){for(var r=t.target;"SPAN"!=r.nodeName&&"BODY"!=r.nodeName;)r=r.parentNode;e.target=r},o=function(t){switch(t.preventDefault(),e.index=Array.prototype.slice.call(e.outer.childNodes).indexOf(t.target.parentNode),e.offset=t.targetTouches[0].pageX-e.left,console.log(e.index),e.offset<=0?e.style.webkitTransform="translate3d(0, 0, 0)":e.offset>=e.width?e.style.webkitTransform="translate3d("+e.width+"px, 0, 0)":t.target.style.webkitTransform="translate3d("+e.offset+"px, 0, 0)",e.index){case 1:e.red=parseInt(e.offset/e.width*255);break;case 2:e.green=parseInt(e.offset/e.width*255);break;case 3:e.blue=parseInt(e.offset/e.width*255)}e.obj.style.backgroundColor="rgb("+e.red+","+e.green+","+e.blue+")"},s=function(e){e.preventDefault()},i=0;i<t.length;i++)t[i].addEventListener("touchstart",r),t[i].addEventListener("touchmove",o),t[i].addEventListener("touchend",s)};
update 压缩脚本