h5实现TV端焦点移动

最新推荐文章于 2022-11-30 19:03:27 发布
最新推荐文章于 2022-11-30 19:03:27 发布
阅读量1.9k 收藏 10
点赞数 3
分类专栏： javascript 文章标签： javascript html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45892570/article/details/127964293
版权

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        * {

            margin: 0;

            padding: 0;

        }

        #container {

            width: 400px;

            height: 600px;

            border: 2px solid black;

            margin: 0 auto;

            overflow: hidden;

            position: relative;

        }

        #container ul {

            position: absolute;

            left: 0;

            top: 0;

            width: 400px;

            height: auto;

        }

        #container ul .box {

            list-style: none;

            width: 200px;

            height: 200px;

            background-color: pink;

            margin: 10px auto;

            border: 3px solid transparent;

        }

        #container ul .focus {

            border: 3px solid red;

        }

    </style>

</head>

<body>

    <div id="container">

        <ul class="list">

            <li class="box ac_in" id="item0"></li>

            <li class="box ac_in" id="item1"></li>

            <li class="box ac_in" id="item2"></li>

            <li class="box ac_in" id="item3"></li>

            <li class="box ac_in" id="item4"></li>

        </ul>

    </div>

    <script src="./jquery.js-3.6-ynsw.js"></script>

    <script>

        var LEFT_KEY = 37;

        var TOP_KEY = 38;

        var RIGHT_KEY = 39;

        var BOTTOM_KEY = 40;

        var ENTER_KEY = 13;

        var BACK_KEY = 8;

        var LEFT_KEY_TV = 30;

        var TOP_KEY_TV = 28;

        var RIGHT_KEY_TV = 31;

        var BOTTOM_KEY_TV = 29;

        var ENTER_KEY_TV = 13;

        var BACK_KEY_TV = 113;

        var pageData = {

            activeItem: 'item0',

            list_top: 0,

            itemArr: []

        }

        $(document).ready(function () {

            getItemArr();

            window.onkeydown = keyDown;

        })

        function getItemArr() {

            pageData.itemArr = [];

            $.each($('.ac_in'), function (index, item) {

                pageData.itemArr.push($(item).attr('id'));

            })

            $('#' + pageData.activeItem).addClass('focus');

        }

        function scrollPage(el) {

            var cHeight = parseInt($('#container').height());

            var listHeight = parseInt($('.list').height()) - cHeight;

            var elHeight = parseInt($('#' + el).height());

            var elTop = parseInt($('#' + el).offset().top);

            var value = elTop - parseInt((cHeight - elHeight) / 2);

            if ($('.list').position().top - value >= 0) {

                pageData.list_top = 0;

            } else if ($('.list').position().top - value <= -listHeight) {

                pageData.list_top = -listHeight

            } else {

                pageData.list_top = $('.list').position().top - value;

            }

            $('.list').animate({

                'top': pageData.list_top,

            }, 100)

        }

        function keyDown(e) {

            var e = e || window.e || arguments.callee.caller.arguments[0];

            e.preventDefault();

            if (e.keyCode == LEFT_KEY || e.keyCode == TOP_KEY || e.keyCode == RIGHT_KEY || e.keyCode == BOTTOM_KEY || e

                .keyCode == LEFT_KEY_TV || e.keyCode == TOP_KEY_TV || e.keyCode == RIGHT_KEY_TV || e.keyCode ==

                BOTTOM_KEY_TV) {

                pageData.activeItem = toClosest(pageData.activeItem, pageData.itemArr, e.keyCode);

            }

            if (e.keyCode == BACK_KEY || e.keyCode == BACK_KEY_TV) {

                location.href = 'javascript:history.go(-1)'

            }

        }

        // 使用规则

        // 1.可获取焦点的元素要有ac_in类名且有固定id

        function toClosest(el, elementsArr, keyCode) {

            var elObjArr = [];

            var mainObj = {};

            var distanceArr = [];

            var elDom = $('#' + el);

            mainObj.left = parseInt(elDom.offset().left);

            mainObj.right = parseInt(elDom.offset().left + elDom.width());

            mainObj.top = parseInt(elDom.offset().top);

            mainObj.bottom = parseInt(elDom.offset().top + elDom.height());

            $.each(elementsArr, function (index, item) {

                var elObj = {};

                var elNode = $('#' + item);

                elObj.left = parseInt(elNode.offset().left);

                elObj.right = parseInt(elNode.offset().left + elNode.width());

                elObj.top = parseInt(elNode.offset().top);

                elObj.bottom = parseInt(elNode.offset().top + elNode.height());

                elObj.index = index;

                elObjArr.push(elObj);

            })

            if (keyCode == LEFT_KEY || keyCode == LEFT_KEY_TV) {

                var mainLt = {

                    left: mainObj.left,

                    top: mainObj.top

                }

                var rtArr = []

                $.each(elObjArr, function (index, item) {

                    rtArr.push({

                        right: item.right,

                        top: item.top,

                        index: item.index

                    })

                })

                $.each(rtArr, function (index, item) {

                    if (el != elementsArr[i] && mainLt.left > item.right) {

                        distanceArr.push([parseInt(Math.pow((mainLt.left - item.right), 2) + Math.pow((mainLt

                            .top - item.top), 2)), item.index]);

                    }

                })

                if (distanceArr.length > 0) {

                    var minDistance = distanceArr[0][0];

                    var minIndex = distanceArr[0][1];

                    for (var i = 1; i < distanceArr.length; i++) {

                        if (minDistance > distanceArr[i][0]) {

                            minDistance = distanceArr[i][0];

                            minIndex = distanceArr[i][1];

                        }

                    }

                    $('#' + elementsArr[minIndex]).addClass('focus').siblings().removeClass('focus');

                    return elementsArr[minIndex];

                } else {

                    $('#' + el).addClass('focus');

                    return el;

                }

            }

            if (keyCode == TOP_KEY || keyCode == TOP_KEY_TV) {

                var mainLt = {

                    left: mainObj.left,

                    top: mainObj.top

                }

                var lbArr = [];

                $.each(elObjArr, function (index, item) {

                    lbArr.push({

                        left: item.left,

                        bottom: item.bottom,

                        index: item.index

                    })

                })

                $.each(lbArr, function (index, item) {

                    if (el != elementsArr[i] && mainLt.top > item.bottom) {

                        distanceArr.push([parseInt(Math.pow((mainLt.top - item.bottom), 2) + Math.pow((mainLt

                            .left -

                            item.left), 2)), item.index]);

                    }

                })

                if (distanceArr.length > 0) {

                    var minDistance = distanceArr[0][0];

                    var minIndex = distanceArr[0][1];

                    for (var i = 1; i < distanceArr.length; i++) {

                        if (minDistance > distanceArr[i][0]) {

                            minDistance = distanceArr[i][0];

                            minIndex = distanceArr[i][1];

                        }

                    }

                    scrollPage(elementsArr[minIndex]);

                    $('#' + elementsArr[minIndex]).addClass('focus').siblings().removeClass('focus')

                    return elementsArr[minIndex];

                } else {

                    $('#' + el).addClass('focus');

                    return el;

                }

            }

            if (keyCode == RIGHT_KEY || keyCode == RIGHT_KEY_TV) {

                var mainRt = {

                    right: mainObj.right,

                    top: mainObj.top

                }

                var ltArr = [];

                $.each(elObjArr, function (index, item) {

                    ltArr.push({

                        left: item.left,

                        top: item.top,

                        index: item.index

                    })

                })

                $.each(ltArr, function (index, item) {

                    if (el != elementsArr[i] && mainRt.right < item.left) {

                        distanceArr.push([parseInt(Math.pow((mainRt.right - item.left), 2) + Math.pow((mainRt

                            .top -

                            item.top), 2)), item.index]);

                    }

                })

                if (distanceArr.length > 0) {

                    var minDistance = distanceArr[0][0];

                    var minIndex = distanceArr[0][1];

                    for (var i = 1; i < distanceArr.length; i++) {

                        if (minDistance > distanceArr[i][0]) {

                            minDistance = distanceArr[i][0];

                            minIndex = distanceArr[i][1];

                        }

                    }

                    $('#' + elementsArr[minIndex]).addClass('focus').siblings().removeClass('focus');

                    return elementsArr[minIndex];

                } else {

                    $('#' + el).addClass('focus');

                    return el;

                }

            }

            if (keyCode == BOTTOM_KEY || keyCode == BOTTOM_KEY_TV) {

                var mainLb = {

                    left: mainObj.left,

                    bottom: mainObj.bottom

                }

                var ltArr = [];

                $.each(elObjArr, function (index, item) {

                    ltArr.push({

                        left: item.left,

                        top: item.top,

                        index: item.index

                    })

                })

                $.each(ltArr, function (index, item) {

                    if (el != elementsArr[i] && mainLb.bottom < item.top) {

                        distanceArr.push([parseInt(Math.pow((mainLb.bottom - item.top), 2) + Math.pow((mainLb

                            .left -

                            item.left), 2)), item.index]);

                    }

                })

                if (distanceArr.length > 0) {

                    var minDistance = distanceArr[0][0];

                    var minIndex = distanceArr[0][1];

                    for (var i = 1; i < distanceArr.length; i++) {

                        if (minDistance > distanceArr[i][0]) {

                            minDistance = distanceArr[i][0];

                            minIndex = distanceArr[i][1];

                        }

                    }

                    scrollPage(elementsArr[minIndex]);

                    $('#' + elementsArr[minIndex]).addClass('focus').siblings().removeClass('focus');

                    return elementsArr[minIndex];

                } else {

                    $('#' + el).addClass('focus');

                    return el;

                }

            }

        }

    </script>

</body>

</html>

谈情不如逗狗...
关注
专栏目录
tv端h5_H5在三端开发遇到的问题（TV/PC/MOBILE）
weixin_39916479的博客
12-21 1232
项目简介公司最近开发会员体系项目，前端利用H5技术嵌入三端开发页面，TV端原生技术是C++，PC端原生技术是JAVA。传值问题Javascript与安卓/IOS进行交互。原生把方法暴露给window。前端只需要下window对象调用方法，进行传值即可。notice:function(token,uuid){var pattern = new RegExp('iPhone|iPad', 'ig');...
tv端h5_h5做APP TV(电视端APP vue框架)-Go语言中文社区
weixin_39541121的博客
12-21 595
先px转rem,然后把psd上传蓝湖,把尺寸改为750的图纸,按照上面的尺寸来写代码1、安装px2rem-loadernpm install px2rem-loader2、配置px2rem-loader在build文件中找到util.js，将px2rem-loader添加到cssLoaders中，如：const cssLoader = {loader: 'css-loader',options: ...
Web-H5-TV2.0:网络，H5，电视，焦点鼠标，导航
03-12
导航使用方法 id：''选择器：''，StraightOnly：false，StraightOverlapThreshold：0.5，RememberSource：false，禁用：false，defaultElement：''，enterTo：''，LeaveFor：null，限制：'self-first'，tabIndexIgnoreList：' a，输入，选择，textarea，按钮，iframe，[contentEditable = true]'，navigableFilter：null id类型：字符串说明：导航id 选择器类型：选择器默认：”说明：元素匹配选择器在SpatialNavigation中被视为可导航元素。但是，隐藏或替换的元素将被忽略，因为它们无法以任何方式聚焦。 StraightOnly类型：布尔默认：false说明：当为时true，将仅导航直线（垂直或水平
h5做APP TV(电视端APP vue框架)
热门推荐
weixin_44088739的博客
06-12 1万+
先px转rem,然后把psd上传蓝湖,把尺寸改为750的图纸,按照上面的尺寸来写代码 1、安装px2rem-loader npm install px2rem-loader 2、配置px2rem-loader 在build文件中找到util.js，将px2rem-loader添加到cssLoaders中，如： const cssLoader = { loader: 'css...
H5在大屏项目遇到的焦点问题
weixin_42981487的博客
09-29 885
H5在大屏项目遇到的焦点问题 刚完成一个大屏项目，用H5写大屏项目也是大姑娘坐轿–头一次，总结下H5在写大屏项目所遇到的坑和爬坑经历：大屏项目需要注意的基本问题，一般不建议现有流行框架，最好使用原生代码编辑，大屏的机顶盒一般都是使用很久的，现有框架很可能会出现兼容性问题，大屏项目是在机顶盒上的安卓系统下运行，需要安卓人员用webview把H5代码封壳包起来，个人大屏项目使用原生+jquery库实现...
H5+Android混合开发电视APP
lihuiqi239的博客
07-05 1万+
最近公司搞“黑马”项目，想到H5在手机app上的应用很多，但是目前在我们公司电视端的应用几乎为零，所以就拟定题目为《基于H5技术的新型电视应用》，经过43小时的奋斗搞定小demo并最终获得了2等奖5999奖金，好了闲话不多说下面就针对H5+Android混合开发电视app进行总结归纳：在总结归纳之前我们要先说一下H5的优势，这也就是我们选择H5的原因，大家都知道H5具有以下优点：1.页面兼容性...
Android TV开发总结（三）构建一个TV app的焦点控制及遇到的坑
weixin_34375054的博客
10-26 798
原文:Android TV开发总结（三）构建一个TV app的焦点控制及遇到的坑 版权声明：我已委托“维权骑士”（rightknights.com）为我的文章进行维权行动.转载务必转载所有，且须注明出处。否则保留追究法律责任 https://blog.csdn.net/hejjunlin/article/details/52835829 ...
h5 css3笔记
onepunchmen00的博客
07-24 1244
0. 音视频 &lt;video controls width="600" height="600"&gt; &lt;source src="https://yys.v.netease.com/2018/0725/ebefc466c32aa2c40aede8207956aae8qt.mp4" type="video/mp4"&gt; &lt;/video&gt; &a
android禁止刷新,Android禁止WebView返回时刷新
weixin_26795617的博客
05-29 1107
最近做一个Android项目所有页面全部是h5,返回时不希望刷新页面，首页，团队，收益，我的 ，是在一个html里面 在浏览器中打开如下图所示：期望是：点“我的”再点“设置”，进入设置页面，然后点返回，应该停留在“我的”我通过webview.goback()方法进行返回实际结果是：却停留在“首页”位置：(1)点“我的”：(2)点“设置”：(3)点“返回”：通过在网上一番查找，原来webview....
【HTML5响应式网页设计T1-T2】
最新发布
weixin_63078247的博客
11-30 1488
【HTML5响应式网页设计T1-T2】
tv端h5_H5展现接口 - 阿里TV开放平台文档 - php中文网手册
weixin_39619170的博客
12-21 375
APP启动自动显示H5接口接口说明：APP启动时可自动打开推广页，需要阻塞APP，等到onWebClose的回调后再继续。数娱后台可配置有效或无效该H5页面函数原型：public static boolean openWebviewOnStart(IWebListener listener,HashMap params)参数说明：listener：回调params： 已key-value的形式传入...
tv端h5_安卓市场tv版
weixin_39541750的博客
12-21 661
梦幻西游网页版客户端，一般又称梦幻西游H5。安卓市场tv版1、xp任务管理器下载首领玩法增加稀有皮肤掉落，灵动仙羽，强力灵宠，应有尽有！2、阿根廷vs冰岛哪个厉害暗影格斗 3 将格斗类游戏提升到了一个全新的技术层次。多彩画面、流畅动画、逼真物理效果和特效创造了逼真、鲜活的世界，让你前所未闻!3、yy表情包内容上来说是偏向益智解密类的游戏，没有什么吓人的成分，完全可以放心游玩，谜题量大，而且难度会渐...
H5中的focus
weixin_45777923的博客
01-12 1737
表单中的关于focus的知识 通过focus可以设置点击文本框后文本框的样式，比较边框的颜色等。 input:focus{ border: 1px solid #00FFFF; } 如果给文本框设置了圆角，为了不想点击文本框时foucs效果出现，可以设置如下的代码。 input{ outline: none; /*清楚focus的所有效果*/ border-radius: 20px; } 改变文本框的提示文字，由于该方法并不是通用，因此在使用时需要加上相关浏览器的内核版本
Android TV H5 电视应用
大星星的专栏
06-25 2421
创建一个简单的安卓TV应用，通过webview加载网页展示内容。 1.创建空白TV工程 AndroidStudio创建工程的时候尽量不要选择模板，模板太复杂，创建一个基础的空的工程即可。默认创建的工程的minSdkVersion是21，因为家中电视年数有点久远，系统版本为4.3（Android SDK 18），需要手动把minSdkVersion调低一点，所幸的是AndroidStudio允许调到最低的数值为 17 。调整后确实可以编译，且编译后的apk包确实可以在家里的老电视上运行。 plugins {
tv端h5_关于Android-TV端使用.9图背景使用的一些坑
weixin_35457969的博客
01-13 291
.9图制作要求一:名称格式必须为：文件名称.9.png。要求二:上下左右各留有1px的标识线区，此区内不能有半透明像素(特别注意：切图若有投影，不要泄漏到标识线区)。要求三:伸缩标识线与内间距标识线为不透明的纯黑色(#000000)，光学标识线为不透明的纯红色(#ff0000)。要求四:点九图的特殊结构会导致其4个顶角处成为“绝对禁区”，这4个1像素×1像素的区域内不能有任何内容。正常情况在Tex...
HTML5-焦点管理
weixin_34232363的博客
05-23 1317
在开发TV web 应用时，发现在交互方式上和传统web开发很不一样。PC上的页面上都是通过鼠标进行交互，而TV则不同，它是通过遥控器按键进行交互，它有点击、移动(上下左右)、返回、主页等操作。移动的实质则是切换焦点，所以我们需要去理解什么焦点。 focusable元素: 能够被聚焦的元素，比如 button、 input 接下来我们需要了解一下 tabindex属性，这个很重要，没有它实...
原生TV端焦点处理框架 focus.js V1.0.9 前端 JS
m0_59093266的博客
12-20 2332
简单易上手开源原生TV端焦点以及事件框架，轻松玩转tv端需求
H5-输入自动聚焦
05-29 2107
First name:&lt;input type="text" name="fname" autofocus&gt;autofocus属性
html5 开发tv,乐视TV开放平台鼎力支持html5开发者
weixin_39760206的博客
06-09 257
【赛迪网讯】8月14日消息，随着2013年html5峰会圆满召开，乐视对html5开发者的支持进入了一个新的阶段。在过去十年中，互联网为全球范围内的技术创新和开发提供了前所未有的机遇。目前互联网逐渐进入人们的客厅。利用乐视网超级电视或者其他智能电视，消费者将能通过电视提供商、网络、个人内容库以及移动应用等，搜索和观看更为丰富多彩的节目内容。基于“平台+内容+终端+应用”乐视生态系统，乐视发布了乐视...
手机端H5图片列表滑动切换实现教程
资源摘要信息:"H5手机端图片列表滑动切换代码是专门设计用于移动设备上，实现图片列表或图文混排内容的滑动切换展示的前端代码。它通常包括HTML、CSS和JavaScript三个主要部分，通过这些代码可以构建一个流畅且用户...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值