jquery模拟vim上下左右滚动 - 高飞网
195 人阅读

jquery模拟vim上下左右滚动

2015-12-12 14:42:54

//---------------------------模拟VIM中按下j/k上下移动 -----------------------------
 //短按时需要添加动画效果,而长按时可以快速移动,符合用户使用习惯.
 //按下键:如果按住不放,keydown事件会不断的执行,而按下立马抬起,则只执行一次.因此,利用这
 //个属性,当按下时记一个变量j为true,这样长按时,该值就一直为true,就可以执行快速移动方法.
 //如果按下立马抬起了,则此时该值为false(初始化为false,抬起后也重置为false).就执行动画滚
 //动效果.
 //快速移动方法只个性滚动位置,而动画滚动效果会加一个延迟时间.
 

window.key_down = false;//为了区分是否长按的变量
 $(document).keydown(function(event){
  var top = $(document).scrollTop();
  var left = $(document).scrollLeft();
  if(74==event.keyCode||'j'==event.key){//j
   if(window.key_down){//长按
    $('html,body').scrollTop(top+20);
   }else{//短按
    $('html,body').animate({scrollTop: top+90}, 160); 
   }
   window.key_down = true;
   $('html,body').css('cursor','s-resize');
  }else if(75==event.keyCode||'k'==event.key){//k
   if(window.key_down){
    $('html,body').scrollTop(top-20);
   }else{
    $('html,body').animate({scrollTop: top-90}, 160);
   }
   window.key_down = true;
   $('html,body').css('cursor','n-resize');
  }else if(72==event.keyCode||'h'==event.key){//h
   if(window.key_down){
    $('html,body').scrollLeft(left-20);
   }else{
    $('html,body').animate({scrollLeft: left-90}, 160);
   }
   window.key_down.k = true;
   $('html,body').css('cursor','w-resize');
  }else if(76==event.keyCode||'l'==event.key){//l
   if(window.key_down){
    $('html,body').scrollLeft(left+20);
   }else{
    $('html,body').animate({scrollLeft: left+90}, 160);
   }
   window.key_down = true;
   $('html,body').css('cursor','e-resize');
  }
  console.info(event);
 });
 $(document).keyup(function(event){
  if(74==event.keyCode||'j'==event.key){//j
   window.key_down = false;
  }else if(75==event.keyCode||'k'==event.key){//k
   window.key_down.k = false;
  }
  $('html,body').css('cursor','auto');
 });


还没有评论!
54.167.152.177