上下左右控制div切换选择

程序员文章站 2022-07-14 16:45:28

...

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <style type="text/css">
        .box{
            height: 600px;
            width: 1200px;
            border: 2px solid aqua;
        }
        .cc{
            width: 800px;
            float: right;
            height: 300px;
            border: 2px solid green;
        }
        .cc .dd{
            width: 120px;
            height: 300px;
            float: left;
            background: yellow;
            margin-left: 20px;
        }
        .cc1{
            width: 800px ;
            float: right;
            height: 200px;
            border:2px solid blue;
            margin-top: 50px;

        }
        .cc1 .dd1{
            width: 120px;
            height: 200px;
            float: left;
            background: red;
            margin-left: 20px;
        }
        .l{
            width: 300px;
            float: left;
            height: 600px;
            border: 2px solid red;
        }
        .li{
            height: 80px;
            background: black;
            margin-top: 30px;
        }
        .active{
            background: palegreen !important;
        }
        .top{
            width: 1200px;
            height: 200px;
            border: 2px solid aquamarine;
        }
        .tt{
            height:200px;
            background: olive;
            width: 150px;
            float: left;
            margin-left: 20px;
        }

    </style>
    <script type="text/javascript">
        $(function(){
            var jqThis;
            var len=0;
            $(window).keydown(function(e){
                console.log(e.keyCode)
                $('.ee').each(function(){
                    if($(this).hasClass('active')){
                        jqThis = $(this)
                        len = $(this).parent().find('.ee').length -1;
                    }
                });
  
//             上
                if(e.keyCode==38){
                    if(jqThis.parent().hasClass('l')){
                        if(jqThis.index()==0){
                            jqThis.removeClass('active')
                            jqThis.parents('.box').prev().find('.ee').eq(0).addClass('active')
                        }else{
                            jqThis.prev().addClass('active')
                            jqThis.removeClass('active')
                        }
                    }
                    if(jqThis.parent().hasClass('cc')){
                        jqThis.removeClass('active');
                        jqThis.parents('.box').prev().find('.ee').eq(0).addClass('active')
                    }
                    if(jqThis.parent().hasClass('cc1')){
                        jqThis.parent().prev().find('.ee').eq(0).addClass('active')
                        jqThis.removeClass('active')
                    }
                }
				// 下
				if(e.keyCode==40){
                    if(jqThis.parent().hasClass('l')){
                        if(jqThis.index()>=len){
                            jqThis.removeClass('active')
                            jqThis.parent().next().find('.ee').eq(0).addClass('active')
                        }else{
                            jqThis.next().addClass('active')
                            jqThis.removeClass('active')
                        }
                    }
                    if(jqThis.parent().hasClass('cc')){
                        jqThis.removeClass('active');
                        jqThis.parent().next().find('.ee').eq(0).addClass('active')
                    }
                    if(jqThis.parent().hasClass('cc1')){
                        jqThis.parent().next().find('.ee').eq(0).addClass('active')
                        jqThis.removeClass('active')
                    }
					
					if(jqThis.parent().hasClass('top')){
                        jqThis.parent().next().find('.ee').eq(0).addClass('active')
                        jqThis.removeClass('active')
                    }
                }
				// 左
				if(e.keyCode==37){

                    if(jqThis.parent().hasClass('l')){
                        jqThis.removeClass('active')
                        jqThis.parents('.box').prev().find('.ee').eq(0).addClass('active');
                    }
                    if(jqThis.parent().hasClass('cc')){
                        if(jqThis.index()==0){
                            jqThis.removeClass('active');
                            jqThis.parents('.box').prev().find('.ee').eq(0).addClass('active')
                        }else{
                            jqThis.prev().addClass('active')
                            jqThis.removeClass('active')
                        }
                    }
                    if(jqThis.parent().hasClass('cc1')){
                        if(jqThis.index()==0){
                            jqThis.removeClass('active')
                            jqThis.parent().prev().find('.ee').eq(0).addClass('active')
                        }else{
                            jqThis.prev().addClass('active')
                            jqThis.removeClass('active')
                        }
                    }
					if(jqThis.parent().hasClass('top')){
                        if(jqThis.index()==0){
                            jqThis.removeClass('active');
                            jqThis.parents('.top').next().find('.ee').eq(0).addClass('active')
                        }else{
                            jqThis.prev().addClass('active')
                            jqThis.removeClass('active')
                        }
                    }
                }
				// 右
				if(e.keyCode==39){
                    if(jqThis.parent().hasClass('l')){
                        jqThis.removeClass('active');
                        jqThis.parent().next().find('.ee').eq(0).addClass('active');
                    }
                    if(jqThis.parent().hasClass('cc')){
                        if(jqThis.index()>=len){
                            jqThis.removeClass('active');
                            jqThis.parent().next().find('.ee').eq(0).addClass('active')
                        }else{
                            jqThis.next().addClass('active')
                            jqThis.removeClass('active')
                        }
                    }
                    if(jqThis.parent().hasClass('cc1')){
                        if(jqThis.index()>=len){
                            jqThis.removeClass('active');
                            jqThis.parents('.box').prev().find('.ee').eq(0).addClass('active')
                        }else{
                            jqThis.next().addClass('active');
                            jqThis.removeClass('active')
                        }
                    }
                    if(jqThis.parent().hasClass('top')){
                        if(jqThis.index()>=len){
                            jqThis.removeClass('active');
                            jqThis.parents('.top').next().find('.ee').eq(0).addClass('active')
                        }else{
                            jqThis.next().addClass('active')
                            jqThis.removeClass('active')
                        }
                    }
                }
            })
        })
    </script>
</head>
<body>
<div class="top">
    <div class="tt ee">
    </div>
    <div class="tt ee">
    </div>
    <div class="tt ee">
    </div>
    <div class="tt ee">
    </div>
    <div class="tt ee">
    </div>
</div>
<div class="box">
    <div class="l">
        <div class="li ee " >

        </div>
        <div class="li ee ">

        </div>
        <div class="li ee">

        </div>
        <div class="li ee active">

        </div>
        <div class="li ee">

        </div>
    </div>
    <div class="cc">
        <div class="dd ee"></div>
        <div class="dd ee"></div>
        <div class="dd ee"></div>
        <div class="dd ee"></div>
        <div class="dd ee "></div>
    </div>
    <div class="cc1">
        <div class="dd1 ee">

        </div>
        <div class="dd1 ee">

        </div>
        <div class="dd1 ee">

        </div>
        <div class="dd1 ee">

        </div>
    </div>
</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div_body div{
            background-color:red;width:50px;height:50px;margin:10px;
        }
        #div_body{
            display: flex;
            flex-wrap: wrap;
            width: 220px;
            color: #a9a9a9;
            font-size: 45px;
        }
        #div_body .select_div{
            background-color: #0d18bf;
        }
    </style>
</head>
<body id="body">
<div id="div_body">

</div>
<script>
    var i= 0;
    var min_move=-1;
    var total_div = document.getElementById("div_body").getElementsByTagName("div").length;
    var select_div ;
    window.οnlοad=function(){
        total_div = document.getElementById("div_body").getElementsByTagName("div").length;
        select_div=document.getElementById("_div0");
        select_div.setAttribute("class"," select_div")
    };
    var _body = document.getElementById("div_body");
    for (var y = 0; y < 10; y++) {
        var div = document.createElement("div");
        div.setAttribute("id","_div"+y);
        div.innerText=""+y;
        _body.appendChild(div);
    }
//    监听键盘事件
    var _id;
    var _i;
    document.body.οnkeydοwn=function(e){ //键盘按下事件绑定
        var e=window.event||e;
        switch(e.keyCode){
            case 37: //左
                _i = i-1;
                if(_i<=min_move){
                    break;
                }else{
                    i=_i;
                    _id = "_div"+i;
                    select_div.setAttribute("class","");
                    select_div = document.getElementById(_id);
                    select_div.setAttribute("class"," select_div");
                }
                break;
            case 38: //上
                console.log("上");
                _i= i-3;
                if(_i<=min_move){
                    break;
                }
                i=_i;
                _id = "_div"+i;
                select_div.setAttribute("class","");
                select_div = document.getElementById(_id);
                select_div.setAttribute("class"," select_div");

                break;
            case 39:  //右
                _i=i+1;
                if(_i>=total_div){
                    break;
                }
                i=_i;
                _id = "_div"+i;
                select_div.setAttribute("class","");
                select_div = document.getElementById(_id);
                select_div.setAttribute("class"," select_div");
                break;
            case 40:  //下
                _i= i+3;
                if(_i>=total_div){
                    break;
                }
                i=_i;
                _id = "_div"+i;
                select_div.setAttribute("class","");
                select_div = document.getElementById(_id);
                select_div.setAttribute("class"," select_div");
                break;
        }
    }
</script>
</body>
</html>

上一篇：原生JS实现Div拖拽

下一篇： Android 基础之 Handler

上下左右控制div切换选择

jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】

上下左右控制div切换选择

js实现上下左右键盘控制div移动

jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】

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

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

jQuery通过方向键控制div上下左右移动步骤详解

怎样使用jQuery实现通过方向键控制div块上下左右移动

怎样使用jQuery实现通过方向键控制div块上下左右移动

jQuery通过方向键控制div上下左右移动步骤详解