利用JS实现键盘控制下拉列表的滚动

昨晚自己倒腾的。估计这种代码只有自己看得懂了。第一篇博文,纪念一下。

代码插入这个还是比较方便的~~

var keyHandler=function(event){
    var e = event || window.event || arguments.callee.caller.arguments[0];
    var hoverCSS={
      color: ‘#FFF‘,
      ‘background-color‘: ‘#6E9DE4‘
    };
    var backCSS={
      color:‘#000‘,
      ‘background-color‘:‘#fff‘
    };
    if(e && e.keyCode==37){ // 按 左
      cu_pos--;
 $("#hh_"+dest).find(‘li‘).eq(cu_pos+1).find(‘a‘).css(backCSS);
       if(cu_pos<0){
        cu_pos=$("#hh_"+dest).find(‘li‘).length-1;
      }
      $("#hh_"+dest).animate({scrollTop:cu_pos*25},100);
       $("#hh_"+dest).find(‘li‘).eq(cu_pos).find(‘a‘).css(hoverCSS);
    }
    if(e && e.keyCode==38){ // 按 上
      //要做的事情

      cu_pos--;
    //  console.log("Pressed 上"+cu_pos);

      $("#hh_"+dest).find(‘li‘).eq(cu_pos+1).find(‘a‘).css(backCSS);
       if(cu_pos<0){
        cu_pos=$("#hh_"+dest).find(‘li‘).length-1;
      }
       $("#hh_"+dest).animate({scrollTop:cu_pos*25},100);
       $("#hh_"+dest).find(‘li‘).eq(cu_pos).find(‘a‘).css(hoverCSS);

    }
    if(e && e.keyCode==39){ // enter 右
      cu_pos++;
         // if(cu_pos>=0){
          $("#hh_"+dest).find(‘li‘).eq(cu_pos-1).find(‘a‘).css(backCSS);
          //$("#hh_"+dest).css("marginTop","-=12px");

        //  }
          if(cu_pos>=$("#hh_"+dest).find(‘li‘).length){
            cu_pos=0;
          }
           $("#hh_"+dest).animate({scrollTop:cu_pos*25},100);

        $("#hh_"+dest).find(‘li‘).eq(cu_pos).find(‘a‘).css(hoverCSS);

    }
    if(e && e.keyCode==40){ // enter 下
           cu_pos++;
    //  console.log("Pressed 下"+cu_pos);
       // console.log(cu_pos);
   //   console.log($("#hh_"+dest).find(‘li‘).length);

         // if(cu_pos>0){
          $("#hh_"+dest).find(‘li‘).eq(cu_pos-1).find(‘a‘).css(backCSS);
        //  $("#hh_"+dest).css("marginTop","+=12px");

       //   }
      if(cu_pos>=$("#hh_"+dest).find(‘li‘).length){
            cu_pos=0;
          }
           $("#hh_"+dest).animate({scrollTop:cu_pos*25},100);
        $("#hh_"+dest).find(‘li‘).eq(cu_pos).find(‘a‘).css(hoverCSS);

    }
    if(e && e.keyCode==13){ // enter Enter
   // console.log("Pressed Enter");
   // console.log($("#hh_"+dest).find(‘li‘).eq(cu_pos).find(‘a‘).html());
    gets_id(‘class_‘+dest).value=$("#hh_"+dest).find(‘li‘).eq(cu_pos).find(‘a‘).html();
    $("#hh_"+dest).find(‘li‘).eq(cu_pos).find(‘a‘).css(backCSS);
    gets_id(‘hh_‘+dest).style.display=‘none‘;
     document.removeEventListener("mousedown", handler, false);
           document.removeEventListener("keydown", keyHandler, false);
    }
};

利用JS实现键盘控制下拉列表的滚动

时间: 2024-08-03 00:15:18

利用JS实现键盘控制下拉列表的滚动的相关文章

JS按钮控制内容左右滚动

运行效果如下: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JS按钮控制内容左右滚动</title> <style> *{ padding: 0; margin: 0;} li{ list-style: none;} .clearfix{ *zoom:1;} .clearfix

js键盘控制div移动,解决停顿问题

问题版本代码如下: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 <html> <head> <title>键盘控制div移动</title> <meta charset="utf-8" /> <style type="text/css"> #div1{width:100px;height:1

JS实现用键盘控制div的移动操作与背景变色

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

纯js实现用键盘控制DIV上下左右+放大缩小与变色

//用键盘控制DIV,红色方块为键盘操作区域,您可以进行如下操作:左右控制;背景变为绿色;背景变为黄色;背景变为蓝色放大或缩小用键盘控制DIV,红色方块为键盘操作区域,您可以进行如下操作:  上:↑ 下:↓ 左:← 右:→  Ctrl + 1 : 背景变为绿色  Ctrl + 2 : 背景变为黄色  Ctrl + 3 : 背景变为蓝色  Ctrl + ↑ : 放大  Ctrl + ↓ : 缩小 <!-- Author: XiaoWen Create a file: 2017-01-10 19:0

JS实现用键盘控制DIV上下左右+放大缩小与变色

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

[原创]Javascript 利用mousetrap.js进行键盘事件操作

我们日常开发中,会遇到js的键盘操作,例如回车提交表单之类的.或者按下某个键执行某个方法.无意中发现一个大小不到4K的js文件,它非常方便的操作键盘事件. 自己也尝试了一下:具体代码如下: 详情可以去其逛网查看其API并下载,地址:http://craig.is/killing/mice <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/

JS实现用键盘控制DIV

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

初学JS——利用JS制作的别踩白块儿(街机模式) 小游戏

初学JS--利用JS制作的别踩白块儿(街机模式) 小游戏 这个是上个星期5写的了,当时是突然想写个游戏,就想到了别踩白块儿,当时的想法是 可能普通模式的别踩白块儿因为他的"块儿"是滚动的向上这种,以我目前会的技术想不出怎么写, 但是如果是街机模式,通过你每按一次按键之后他像下跳一格这样的就非常好实现了. 通过我目前会的知识,实现的步骤大概是这样的: 建一个4X4的表格,制作2张150X100的图片,一张全白色,一张全黑色,命名为0.JPG,1.JPG 就是说当文件名为0的时候就是白色的

关于JS的时间控制实现动态效果及实例操作

关于JS的时间控制 <script>        BOM   //Bowers Object Model   浏览器对象模型    setTimeout()//    延迟执行一次    setInterval()//    间隔执行    var a = 300;    window.setTimeout('abc(a)',3000);//    自定义函数赋值    function abc(i)    {        alert(i);    } //setInterval('ale