由于秉承我司一向自己动手丰衣足食的信念，我用纯原生JS完成了一组在渐变色块儿中随手势滑动定分值的效果，已经分别处理好移动端和PC端操作事件.......喏，个人表达能力有限，上图看效果先 ~
icon_move.jpg
这组效果需要实现以下一个功能：
1、布局吧，还是说说吧 具体见上图(还是懒得说 hiahiahiahia)。
2、首先加载渐变色块要考虑到一共多少块，每块变化的颜色值（RGB）
3、当鼠标/手指按下或滑动到其中一块，这块之前的色块都要渐变成一组新的颜色。
4、获取鼠标/手指抬起时的分值。
二话不说，先看html和css部分代码，(起名能力有限，见谅~)：
<body>
<div id="movescore" class="box"></div>
<div style=" left:45%; position:absolute; top:70%; " id="_div">
<input type="button" value="下一题" id="next" style="width:80px; height:40px; background:skyblue;" />
</div>
</body>
页面中只有容器和一个按钮，so,其他重要的元素就要通过JS来创建了：
window.onload=function(){
page_load("movescore",10);
}
这个page_load是什么呢，就是加载静态页面的函数，由于个人工作原因，现在习惯性的把一些以后会复用的静态布局整理成JS函数工具，
//加载页面
function page_load(box_id,td_num){
var oBox=document.getElementById(box_id);
oBox.innerHTML='<div class="score" id="movescore_score">0分</div>'+
'<table class="list_style" id="movescore_number_list" border=0 width=100% cellspacing=0 cellpadding=0 ></table>'+
'<ul class="list_style" id="movescore_color_list"></ul>'+
'<div class="move_btn" id="move_area" ><span id="movescore_movebtn" class="movebtn"></span></div>'+
'<div style="margin-top:20px; " id="info">注：分值越高表示满意度越高。</div>'+
'<input type="hidden" id="movescore_hidden_res" value="0分"/>';
var g = for_color('187||157||157',-20,td_num,1,'');
var _g = for_color('255||255||255',-20,td_num,2,'change');
var answer=0;
var score_num=document.getElementById(box_id+"_score");
var list=document.getElementById(box_id+'_color_list');
var listnumber=document.getElementById(box_id+'_number_list');
var oTr=document.createElement('tr');
listnumber.appendChild(oTr);
for(var i=0;i<td_num;i++){
var oLi=document.createElement('li');
oLi.id='x_'+i;
oLi.setAttribute("class","li_style");
oLi.style.width=Number(100/td_num)+'%';
oLi.style.background=g[i];
list.appendChild(oLi);
var oTd=document.createElement('td');
oTd.align='center';
oTd.width=Number(100/td_num)+'%';
oTd.innerHTML=Number(i+1)+'分';
oTr.appendChild(oTd);
}
//加载操作功能：
move_iconaction(box_id,g,_g,score_num);
}
接下来看这几个函数了：
1、for_color():循环遍历加载渐变色
function for_color(sColor,step_value,step,t,_change){
//参数info:
//sColor第一个页面的初始颜色的起始浅色 例如：'187||157||157'
//step_value同色系渐变的步长,默认为-20
//step要渐变的单元格个数
//t：（1：初始颜色）（2：覆盖颜色）
//_change:('change':需要随机选择初始颜色);('':固定起始颜色,就是传入的颜色)
if(_change=='change'){
sColor=ran_color();
}else{
sColor=sColor;
}
if (t == 1){
var colors=sColor.split('||');
}else if(t == 2){
var _colors=sColor.split('||');
var _colors1=(-10+Number(_colors[0]))+'||'+(-5+Number(_colors[1]))+'||'+(12+Number(_colors[2]));
var colors=_colors1.split('||');
}else{
var colors='255||255||255'.split('||');
}
//存要渐变的颜色组
var colorArr=[];
for(i=0;i<step;i++){
var each_color='rgb('+(Number(colors[0])+step_value*i)+','+(Number(colors[1])+step_value*i)+','+(Number(colors[2])+step_value*i)+')';
colorArr.push(each_color);
}
return colorArr;
}
2、change_color():操作时渐变色效果
function change_color(obj,init_color,second_color,_id,_score){
for(var j=0;j<obj.length;j++){
obj[j].style.background=init_color[j];
}
for(var k=0;k < _id;k++){
obj[k].style.background=second_color[k];
}
var res=_id;
_score.innerHTML=res+'分';
}
3、move_limit():1-10限制滑动范围
function move_limit(ev_x,disX,old_left,inputid,move_icon,aLi,_score){
var _left=ev_x-disX-old_left;
if(Number(_left ) <= 0){
_left = 0;
}else if(Number(_left) >=Number(document.getElementById(inputid+"_color_list").offsetWidth-move_icon.offsetWidth/2) ){
_left =Number(document.getElementById(inputid+"_color_list").offsetWidth-move_icon.offsetWidth/2)
}
return _left;
}
4、move_iconaction():滑动按钮的操作事件
function move_iconaction(inputid,g,_g,_score){
var aLi=document.getElementById(inputid+"_color_list").children;
var move_icon=document.getElementById(inputid+"_movebtn");
var old_left=move_icon.offsetLeft;
if(browser()==1){
//PC端
//鼠标按下
move_icon.onmousedown=function(ev){
var ev=ev || window.event;
var disX=ev.clientX-move_icon.offsetLeft;
var n1=parseInt((ev.clientX-old_left-disX+move_icon.offsetWidth/2)/aLi[0].offsetWidth)+1;
change_color(aLi,g,_g,n1,_score);
document.getElementById(inputid+"_hidden_res").value=n1+'分';
ev.preventDefault();
//鼠标滑动
document.onmousemove=function(ev){
var ev=ev || window.event;
var _x=ev.clientX;
var _left=move_limit(_x,disX,old_left,inputid,move_icon,aLi,_score);//限制滑动范围
move_icon.style.left=_left+'px';
var a=_left+move_icon.offsetWidth/2-3;
var b=aLi[0].offsetWidth;
var n2=parseInt(a/b+1);
change_color(aLi,g,_g,n2,_score);
document.getElementById(inputid+"_hidden_res").value=n2+'分';
ev.preventDefault();
}
document.onmouseup=function(){
document.onmousemove=null;
document.onmouseup=null;
document.releaseCapture&&document.releaseCapture();
}
}
}else{
//移动端：
move_icon.addEventListener('touchstart',function(ev){
fnStart(inputid,this,ev,aLi,old_left,g,_g,_score);
},false);
}
document.getElementById("_div").onclick=function(){
alert(document.getElementById(inputid+"_hidden_res").value);
}
}
5、fnStart():移动端点击和滑动事件
function fnStart(inputid,_this,ev,aLi,old_left,sc,ec,_score){
//手指按下
var x=ev.targetTouches[0].pageX;
var dis_x=x-_this.offsetLeft;
var n_1= parseInt((x-dis_x-old_left+_this.offsetWidth/2)/aLi[0].offsetWidth+1);
change_color(aLi,sc,ec,n_1,_score);
document.getElementById(inputid+"_hidden_res").value=n_1+'分';
ev.preventDefault();
//手指滑动
_this.addEventListener('touchmove',function(ev){
var ev=ev|| window.event;
var x=ev.targetTouches[0].pageX;
var _left=move_limit(x,dis_x,old_left,inputid,_this,aLi,_score);//限制滑动范围
_this.style.left=_left+'px';
var a=_left+_this.offsetWidth/2-3;
var b=aLi[0].offsetWidth;
var n2=parseInt(a/b+1);
change_color(aLi,sc,ec,n2,_score);
document.getElementById(inputid+"_hidden_res").value=n2+'分';
ev.preventDefault();
},false);
}
6、常见获取随机数和检测浏览器设备的工具：
/*******获取换页时初始颜色的起始颜色的随机数********/
function ran_color(){
var r=parseInt(Math.random()*(255-200)+200);
var g=parseInt(Math.random()*(255-200)+200);
var b=parseInt(Math.random()*(255-200)+200);
return r+'||'+g+'||'+b;
}
/****分辨PC和移动端****/
function browser(){
try {
document.createEvent("TouchEvent");
// alert('移动端支持TouchEvent事件！');
return 2;
} catch (e) {
return 1;
}
}
到此为止，这个货就搞完了，虽然原生JS hin浪费时间，但是不得不承认很锻炼人，目前由于个人封装能力有限，有些地方还有点拙劣和繁琐，欢迎各位童鞋在评论中指出或联系本人，不胜感激。
网友评论