dabaixiaowo2015
2021-06-08 14:36
采纳率: 100%
浏览 48
已结题

html中:如何用键盘enter键打开焦点图超链接?

想实现的效果:

1。键盘(上下左右)选择“焦点图”(已实现)

2。摁下键盘“enter”键,打开选中焦点图的超链接(未实现)

完整代码:view-source:http://dabaixiaowo2015.freehost4u.org/

————————————————————————————————————————————————


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>学多多</title>
<script src="https://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>


<style>
body { background-color:#ECECFF };
</style>


<style>
.img { width: 100%; margin: 0 auto; align-items: center; display: flex; justify-content: center; }


.img img { position:relative; width:200px; box-sizing:border-box; }


.img .hover {
border:#FFFF6F solid 6px;
transform:scale(1.1,1.1);
z-index:100;
box-shadow:5px 2px 20px #000;
}
.banner {
position:relative;
transition-property:left;
transition-duration:0.1s;
transition-timing-function:linear;
transition-delay:0.1s;
}
</style>
</head>
<body>
<br>

<div class="img">
<div class="banner" >


<a href="http://www.baidu.com"target="_blank"><img src="https://tva3.sinaimg.cn/large/005P7W0Fly8gr6fjdgqnij30gg0ndgmm.jpg" class="img1"></a>
<a href="http://www.163.com"target="_blank"><img src="https://tva3.sinaimg.cn/large/005P7W0Fly8gr6fjee4k8j30gg0nddib.jpg" class="img2"></a>
<a href="http://www.qq.com"target="_blank"><img src="https://tva1.sinaimg.cn/large/005P7W0Fly8gr6fjfm2c4j30gg0ndn03.jpg" class="img3"></a>
<a href="http://www.sina.com"target="_blank"><img src="https://tva4.sinaimg.cn/large/005P7W0Fly8gr6fk0v9hyj30gg0nd40f.jpg" class="img4"></a>
<br>
<a href="http://www.sohu.com"target="_blank"><img src="https://tva3.sinaimg.cn/large/005P7W0Fly8gr6fjdgqnij30gg0ndgmm.jpg" class="img5"></a>
<a href="http://www.jd.com"target="_blank"><img src="https://tva3.sinaimg.cn/large/005P7W0Fly8gr6fjee4k8j30gg0nddib.jpg" class="img6"></a>
<a href="http://www.1688.com"target="_blank"><img src="https://tva1.sinaimg.cn/large/005P7W0Fly8gr6fjfm2c4j30gg0ndn03.jpg" class="img7"></a>
<a href="http://www.taobao.com"target="_blank"><img src="https://tva4.sinaimg.cn/large/005P7W0Fly8gr6fk0v9hyj30gg0nd40f.jpg" class="img8"></a>


</div>

</div>
<script language="javascript" type="text/javascript">
function keyDown()

{
var keycode=event.keyCode;
var keyChar=String.fromCharCode(keycode);
if(keycode==13)
event.keyCode=1;
};
document.οnkeydοwn=keyDown;
</script>

<script>

$(function() {
//默认选中第一个
$(".img1").addClass('hover')
sessionStorage.setItem('num', 1)
var k = 0;
sessionStorage.setItem('k', k)
document.onkeydown = function(event) {
var e = event || window.event || arguments.callee.caller.arguments[0];
if (e.keyCode == "40") {
//获取当前sesionStorge
var num = sessionStorage.getItem('num')
var new_num = parseInt(num) + 4;
if (new_num <= 8) {
$(".img" + num).removeClass('hover')
$(".img" + new_num).addClass('hover')
sessionStorage.setItem('num', new_num)


//获取元素宽度
var widths = $(".img1").width()
console.log(k, k * widths)
if (new_num > 2) {
k++;
sessionStorage.setItem('k', k)
$(".banner").css({
"left": "-" + k * widths

});

}
}

}
if (e.keyCode == "39") {
//获取当前sesionStorge
var num = sessionStorage.getItem('num')
var new_num = parseInt(num) + 1;
if (new_num <= 8) {
$(".img" + num).removeClass('hover')
$(".img" + new_num).addClass('hover')
sessionStorage.setItem('num', new_num)


//获取元素宽度
var widths = $(".img1").width()
console.log(k, k * widths)
if (new_num > 2) {
k++;
sessionStorage.setItem('k', k)
$(".banner").css({
"left": "-" + k * widths


});


}
}

}

if (e.keyCode == "38 ") {
var num = sessionStorage.getItem('num')
if (num > 1) {
var new_num = parseInt(num) - 4;
if (k > 4) {
k++;
var widths = $(".img1").width()
$(".banner").css({
"left": "-" + k * widths
});
}
$(".img" + num).removeClass('hover')
$(".img" + new_num).addClass('hover')
sessionStorage.setItem('num', new_num)
}

}

if (e.keyCode == "37 ") {
var num = sessionStorage.getItem('num')


if (num > 1) {
var new_num = parseInt(num) - 1;
if (k > 4) {
k++;
var widths = $(".img1").width()
$(".banner").css({
"left": "-" + k * widths
});
}
$(".img" + num).removeClass('hover')
$(".img" + new_num).addClass('hover')
sessionStorage.setItem('num', new_num)
}
}
}
}
)


</script>

</body>
</html>
 

  • 点赞
  • 收藏

5条回答 默认 最新

  • CSDN专家-showbo 2021-06-08 14:44
    已采纳

    加下面黑色的代码就行了,帮助到你可以点击采纳支持下哦。。谢谢~

            $(function () {
                //默认选中第一个
                $(".img1").addClass('hover')
                sessionStorage.setItem('num', 1)
                var k = 0;
                sessionStorage.setItem('k', k)
                document.onkeydown = function (event) {
                    var e = event || window.event || arguments.callee.caller.arguments[0];
                    if (e.keyCode == 13) {
                        window.open($('.banner .hover').parent().attr('href'))
                        return ;
                    }

    。。。。。。。。。。。原来的代码。。。。。。。。。。。。。。。。。

    点赞 1 评论
  • 上下左右选择的同时,把选择的超级链接地址取出来

    点赞 评论
  • CSDN专家-Fay 2021-06-08 14:43

    给页面加监听window.click 监听到回车键,

    点赞 评论
  • 易书生 2021-06-08 14:50
    <!doctype html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <title>学多多</title>
        <script src="https://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
        <style>
            body {  background-color:#ECECFF  };
    </style>
        <style>
            .img { width: 100%;        margin: 0 auto;  align-items: center;   display: flex;   justify-content: center; }
    
    .img img {  position:relative;    width:200px;   box-sizing:border-box;   }
    
    .img .hover {
        border:#FFFF6F solid 6px;
        transform:scale(1.1,1.1);
        z-index:100;
        box-shadow:5px 2px 20px #000;   
    }
    .banner {
        position:relative;
        transition-property:left;
        transition-duration:0.1s;
        transition-timing-function:linear;
        transition-delay:0.1s;
    }
    </style>
    </head>
    
    <body>
        <br>
        <div class="img">
            <div class="banner">
                <a href="http://www.baidu.com" target="_blank"><img src="https://tva3.sinaimg.cn/large/005P7W0Fly8gr6fjdgqnij30gg0ndgmm.jpg" class="img1"></a>
                <a href="http://www.163.com" target="_blank"><img src="https://tva3.sinaimg.cn/large/005P7W0Fly8gr6fjee4k8j30gg0nddib.jpg" class="img2"></a>
                <a href="http://www.qq.com" target="_blank"><img src="https://tva1.sinaimg.cn/large/005P7W0Fly8gr6fjfm2c4j30gg0ndn03.jpg" class="img3"></a>
                <a href="http://www.sina.com" target="_blank"><img src="https://tva4.sinaimg.cn/large/005P7W0Fly8gr6fk0v9hyj30gg0nd40f.jpg" class="img4"></a>
                <br>
                <a href="http://www.sohu.com" target="_blank"><img src="https://tva3.sinaimg.cn/large/005P7W0Fly8gr6fjdgqnij30gg0ndgmm.jpg" class="img5"></a>
                <a href="http://www.jd.com" target="_blank"><img src="https://tva3.sinaimg.cn/large/005P7W0Fly8gr6fjee4k8j30gg0nddib.jpg" class="img6"></a>
                <a href="http://www.1688.com" target="_blank"><img src="https://tva1.sinaimg.cn/large/005P7W0Fly8gr6fjfm2c4j30gg0ndn03.jpg" class="img7"></a>
                <a href="http://www.taobao.com" target="_blank"><img src="https://tva4.sinaimg.cn/large/005P7W0Fly8gr6fk0v9hyj30gg0nd40f.jpg" class="img8"></a>
            </div>
        </div>
        <script language="javascript" type="text/javascript">
        function keyDown()
    
        {
            var keycode = event.keyCode;
            var keyChar = String.fromCharCode(keycode);
            console.log(keycode, keyChar);
            if (keycode == 13)
                event.keyCode = 1;
        };
        document.οnkeydοwn = keyDown;
        </script>
        <script>
        $(function() {
                //默认选中第一个
                $(".img1").addClass('hover')
                sessionStorage.setItem('num', 1)
                var k = 0;
                sessionStorage.setItem('k', k)
                document.onkeydown = function(event) {
                    var e = event || window.event || arguments.callee.caller.arguments[0];
    
                    // console.log(e);
    
                    if (e.keyCode == "40") {
                        //获取当前sesionStorge
                        var num = sessionStorage.getItem('num')
                        var new_num = parseInt(num) + 4;
                        if (new_num <= 8) {
                            $(".img" + num).removeClass('hover')
                            $(".img" + new_num).addClass('hover')
                            sessionStorage.setItem('num', new_num)
    
                            //获取元素宽度
                            var widths = $(".img1").width()
                            console.log(k, k * widths)
                            if (new_num > 2) {
                                k++;
                                sessionStorage.setItem('k', k)
                                $(".banner").css({
                                    "left": "-" + k * widths
    
                                });
    
                            }
                        }
    
                    }
    
                    // 回车事件
                    if (e.keyCode == "13") {
                        //获取当前sesionStorge
                        var num = sessionStorage.getItem('num')
                        console.log(num);
                        var nodes = $('.img .banner a')
                        var url = $(nodes[num]).attr('href')
                        window.open(url, '_target')
    
                    }
    
    
                    if (e.keyCode == "39") {
                        //获取当前sesionStorge
                        var num = sessionStorage.getItem('num')
                        var new_num = parseInt(num) + 1;
                        if (new_num <= 8) {
                            $(".img" + num).removeClass('hover')
                            $(".img" + new_num).addClass('hover')
                            sessionStorage.setItem('num', new_num)
    
                            //获取元素宽度
                            var widths = $(".img1").width()
                            console.log(k, k * widths)
                            if (new_num > 2) {
                                k++;
                                sessionStorage.setItem('k', k)
                                $(".banner").css({
                                    "left": "-" + k * widths
    
                                });
    
                            }
                        }
    
                    }
    
    
    
                    if (e.keyCode == "38 ") {
                        var num = sessionStorage.getItem('num')
    
                        if (num > 1) {
                            var new_num = parseInt(num) - 4;
                            if (k > 4) {
                                k++;
                                var widths = $(".img1").width()
                                $(".banner").css({
                                    "left": "-" + k * widths
                                });
                            }
                            $(".img" + num).removeClass('hover')
                            $(".img" + new_num).addClass('hover')
                            sessionStorage.setItem('num', new_num)
    
                        }
    
                    }
    
    
                    if (e.keyCode == "37 ") {
                        var num = sessionStorage.getItem('num')
    
                        if (num > 1) {
                            var new_num = parseInt(num) - 1;
                            if (k > 4) {
                                k++;
                                var widths = $(".img1").width()
                                $(".banner").css({
                                    "left": "-" + k * widths
                                });
                            }
                            $(".img" + num).removeClass('hover')
                            $(".img" + new_num).addClass('hover')
                            sessionStorage.setItem('num', new_num)
    
                        }
    
                    }
    
    
                }
            }
    
        )
        </script>
    </body>
    
    </html>
    点赞 评论
  • 有问必答小助手 2021-06-09 17:17

    您好,我是有问必答小助手,您的问题已经有小伙伴解答了,您看下是否解决,可以追评进行沟通哦~

    如果有您比较满意的答案 / 帮您提供解决思路的答案,可以点击【采纳】按钮,给回答的小伙伴一些鼓励哦~~

    ps:问答VIP仅需29元,即可享受5次/月 有问必答服务,了解详情>>>https://vip.csdn.net/askvip?utm_source=1146287632

    点赞 评论

相关推荐 更多相似问题