H5活动全屏滚动页面在安卓智能电视TV调试

胸怀万里世界，放眼无限未来。这篇文章主要讲述H5活动全屏滚动页面在安卓智能电视TV调试相关的知识，希望能为你提供帮助。
前段时间公司做一个线上活动，在电视上商品促销。产品的要求是每个商品介绍刚好满一屏，按下遥控器向下键可以整屏切换。这种功能如果实在PC端，实现起来非常容易，引用jQuery插件就能实现。但是在安卓智能电视上就会有许多兼容性问题，因为各种厂家生产的电视机盒子、智能电视系统都不一样。下面主要介绍一下我的这个项目。
下面是整个html代码

< !DOCTYPE html> < html lang="en"> < head> < meta charset="UTF-8"> < title> 超级会员日活动< /title> < meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"> < !-- Tell the browser to be responsive to screen width --> < meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"> < script type="text/javascript" src="https://www.songbingjia.com/android/js/jquery-3.1.1.min.js" > < /script> < !--判断适应不同设备 css style --> < script type="text/javascript"> var dynamicLoading = { css: function(path) { if (!path || path.length === 0) { throw new Error(‘argument "path" is required !‘); } var head = document.getElementsByTagName(‘head‘)[0]; var link = document.createElement(‘link‘); link.href = https://www.songbingjia.com/android/path; link.rel = ‘stylesheet‘; link.type = ‘text/css‘; head.appendChild(link); } }var s = navigator.userAgent; var reg = /Build/M[0-9]+/; if (s.indexOf("SHIELD") == -1 & & s.indexOf("MiBOX") == -1 & & !reg.test(s) & & s.indexOf("MiTV") == -1) { dynamicLoading.css("css/main.css"); //适配小米盒子、小米电视之外的机型 } else { dynamicLoading.css("css/mainXiaomi.css"); //适配小米 } < /script> < /head> < body> < div id="view"> < div id="frame"> < section class="panel"> < img class="goos1" src="https://www.songbingjia.com/android/img/goodsimg01.jpg" style="width: 100%; height:100%; display: block; "> < /section> < section class="panel"> < img class="goos2" src="https://www.songbingjia.com/android/img/goodsimg02.jpg" style="width: 100%; height:100%; display: block; "> < /section> < section class="panel"> < img class="goos3" src="https://www.songbingjia.com/android/img/goodsimg03.jpg" style="width: 100%; height:100%; display: block; "> < /section> < section class="panel"> < img class="goos4" src="https://www.songbingjia.com/android/img/goodsimg04.jpg" style="width: 100%; height:100%; display: block; "> < /section> < section class="panel"> < img class="goos5" src="https://www.songbingjia.com/android/img/goodsimg05.jpg" style="width: 100%; height:100%; display: block; "> < /section> < section class="panel"> < img class="goos6" src="https://www.songbingjia.com/android/img/goodsimg06.jpg" style="width: 100%; height:100%; display: block; "> < /section> < /div> < /div> < !--侧边栏--> < div id="radioWrap"> < ul id="radio"> < li> 0< /li> < li> 1< /li> < li> 2< /li> < li> 3< /li> < li> 4< /li> < li> 5< /li> < /ul> < span id="radioOn"> < /span> < /div> < !--倒计时--> < ul class="countdown"> < li class="seperator"> 距活动结束：< /li> < li> < span class="days"> 00< /span> < /li> < li class="seperator"> 天< /li> < li> < span class="hours"> 00< /span> < /li> < li class="seperator"> 时< /li> < li> < span class="minutes"> 00< /span> < /li> < li class="seperator"> 分< /li> < li> < span class="seconds"> 00< /span> < /li> < li class="seperator"> 秒< /li> < /ul> < !--下拉箭头--> < div class="goBottom"> < img src="https://www.songbingjia.com/android/img/goBottom.png"> < p class="goBottomText"> 下按查看更多商品< /p> < /div> < /body> < !--全屏滚动插件--> < script type="text/javascript" src="https://www.songbingjia.com/android/js/onepage.js"> < /script> < script type="text/javascript" src="https://www.songbingjia.com/android/js/jquery.downCount.js"> < /script> < script type="text/javascript" src="https://www.songbingjia.com/android/js/main.js"> < /script> < script type="text/javascript"> $(‘.countdown‘).downCount({ date: ‘07/16/2017 23:59:59‘, offset: +10 }, function () { $(".goos1").attr("src","img/goods-img01end.jpg"); $(".goos2").attr("src","img/goods-img02end.jpg"); $(".goos3").attr("src","img/goods-img03end.jpg"); $(".goos4").attr("src","img/goods-img04end.jpg"); $(".goos5").attr("src","img/goods-img05end.jpg"); $(".goos6").attr("src","img/goods-img06end.jpg"); }); < /script> < /html>

首先需要引用jQuery，onepage.js就整屏滚动插件，jquery.downCount.js是倒计时插件。
onepage.js文件

function startOnePage(myInput){ ‘use strict‘; var settings = myInput; // input values var frame = $(settings.frame), container = $(settings.container), sections = $(settings.sections), speed = settings.speed || 500, radio = $(settings.radio), radioOn = $(settings.radioOn), easing = settings.easing || "swing"; /* Boolean values to enable/disable default scroll action linked to 1) init() 2) animateScr() 3) scroll, keydown bound event handler default: true; */ var didScroll = true, isFocused = true; // common variables var height = $(window).height(); // Index values for sections elements var totalSections = sections.length - 1; // currently displayed section number // modifying this variable will cause buggy behaviors. var num = 0; // keyboard input values // add more if necessary var pressedKey = {}; pressedKey[36] = "top"; // home pressedKey[38] = "up"; // upward arrow pressedKey[40] = "down"; // downward arrow pressedKey[33] = "up"; // page up pressedKey[34] = "down"; // page down pressedKey[35] = "bottom"; // end// init function to initialize/reassign values of the variables // to prevent section misplacement caused by a window resize. function init(){ height = $(window).height(); frame.css({"overflow":"hidden", "height": height + "px"}); sections.css({"height": height + "px"}); didScroll = true; isFocused = true; end = - height * ( totalSections ); container.stop().animate({marginTop : 0}, 0, easing, function(){ num = 0; didScroll = true; turnOnRadio(0, 0); }); } // event binding to init function $(window).bind("load resize", init); // animate scrolling effect var now, end; function animateScr(moveTo, duration, distance){ var top; duration = duration || speed; switch(moveTo){ case "down": top = "-=" + ( height * distance ) + "px"; num += distance; break; case "up": top = "+=" + ( height * distance ) + "px"; num -= distance; break; case "bottom": top = end; num = totalSections; break; case "top": top = 0; num = 0; break; default: console.log("(error) wrong argument passed"); return false; }container.not(":animated").animate({marginTop : top}, duration, easing, function(){ didScroll = true; }); if(radio){turnOnRadio(num, speed); } }// show active radio button function turnOnRadio(index, duration){ duration = duration || speed; radioOn.stop().animate({"top": index * radioOn.outerHeight( true )+ "px"}, speed, easing); }radio.children("li:not(" + settings.radioOn + ")").click(function(){ var to = $(this).index(); var dif = Math.abs( num - to ); // if(num < to){ //animateScr("down", speed, dif); // }else if(num > to){ //animateScr("up", speed, dif); // } }); /* 1. get a type of event and handle accordingly 2. enable/disable default keyboard behavior */ $(document).bind("DOMMouseScroll mousewheel keydown", function(e){ var eType = e.type; now = parseInt( container.css("marginTop") ); end = - height * ( totalSections ); // handles the event if( didScroll & & isFocused ){ // prevent multiple event handling didScroll = false; // on wheel if( eType == "DOMMouseScroll" || eType == "mousewheel" ){var mvmt = e.originalEvent.wheelDelta; if(!mvmt){ mvmt = -e.originalEvent.detail; }// 滚动 if(mvmt > 0){ //第一屏滚动 if( now == 0){ didScroll = true; }else{ animateScr("up", 500, 1); } }else if(mvmt < 0){ //最后一屏滚动 if( now == end ){ didScroll = true; }else{ animateScr("down", 500, 1); } }else{ didScroll = true; } } // on keydown else if( eType == "keydown" ){ // 上下滚动键启动 if( pressedKey[e.which] ){ e.preventDefault(); if( pressedKey[e.which] == "up" ){ // 第一屏滚动 if( now == 0 ){ animateScr("bottom"); }else{ animateScr("up", speed, 1); } }else if( pressedKey[e.which]== "down" ){ //最后一屏滚动 if( now == end ){ animateScr("top"); }else{ animateScr("down", speed, 1); } }else{ // page downpage up animateScr( pressedKey[e.which] ); } }else{ didScroll = true; } } }// enable default keyboard behavior when an input or textarea is being focused $("input, textarea").focus(function(){isFocused = false; }) .blur(function(){isFocused = true; }); }); }

jquery.downCount.js

(function ($) { $.fn.downCount = function (options, callback) { var settings = $.extend({ date: null, offset: null }, options); // Throw error if date is not set if (!settings.date) { $.error(‘Date is not defined.‘); }// Throw error if date is set incorectly if (!Date.parse(settings.date)) { $.error(‘Incorrect date format, it should look like this, 12/24/2012 12:00:00.‘); }// Save container var container = this; /** * Change client‘s local date to match offset timezone * @return {Object} Fixed Date object. */ var currentDate = function () { // get client‘s current date var date = new Date(); // turn date to utc // var utc = date.getTime() + (date.getTimezoneOffset() * 60000); var utc = date.getTime(); // set new Date object // var new_date = new Date(utc + (3600000*settings.offset)); var new_date = new Date(utc); return new_date; // return date; }; /** * Main downCount function that calculates everything */ function countdown () { var target_date = new Date(settings.date), // set target date current_date = currentDate(); // get fixed current date// difference of dates var difference = target_date - current_date; // if difference is negative than it‘s pass the target date if (difference < 0) { // stop timer clearInterval(interval); if (callback & & typeof callback === ‘function‘) callback(); return; }// basic math variables var _second = 1000, _minute = _second * 60, _hour = _minute * 60, _day = _hour * 24; // calculate dates var days = Math.floor(difference / _day), hours = Math.floor((difference % _day) / _hour), minutes = Math.floor((difference % _hour) / _minute), seconds = Math.floor((difference % _minute) / _second); // fix dates so that it will show two digets days = (String(days).length > = 2) ? days : ‘0‘ + days; hours = (String(hours).length > = 2) ? hours : ‘0‘ + hours; minutes = (String(minutes).length > = 2) ? minutes : ‘0‘ + minutes; seconds = (String(seconds).length > = 2) ? seconds : ‘0‘ + seconds; // based on the date change the refrence wording var ref_days = (days === 1) ? ‘day‘ : ‘days‘, ref_hours = (hours === 1) ? ‘hour‘ : ‘hours‘, ref_minutes = (minutes === 1) ? ‘minute‘ : ‘minutes‘, ref_seconds = (seconds === 1) ? ‘second‘ : ‘seconds‘; // set to DOM container.find(‘.days‘).text(days); container.find(‘.hours‘).text(hours); container.find(‘.minutes‘).text(minutes); container.find(‘.seconds‘).text(seconds); container.find(‘.days_ref‘).text(ref_days); container.find(‘.hours_ref‘).text(ref_hours); container.find(‘.minutes_ref‘).text(ref_minutes); container.find(‘.seconds_ref‘).text(ref_seconds); }; // start var interval = setInterval(countdown, 1000); }; })(jQuery);

main.js

$(function() { startOnePage({ frame: "#view", container: "#frame", sections: ".panel", radio: "#radio", radioOn: "#radioOn", speed: 500, easing: "swing" }); });

main.css 样式

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li{ margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; overflow-y: hidden; } ol, ul { list-style: none; }table { border-collapse: collapse; border-spacing: 0; }dt { font-size:2.3em; } dd { font-size:1.9em; padding:0.6em 0 0.9em 0; } .hidden { visibility: hidden; } .panel { width: 100%; height:100vh; }@-webkit-keyframes arrow { 0%,100% { top:50px; } 50% { top:80px; } } @keyframes arrow { 0%,100% { top:50px; } 50% { top:80px; } }/*侧边栏*/ #radioWrap{ width:8px; position:absolute; right:8px; bottom:80px; }#radio{width:100%; height:100%; overflow: hidden; }#radio li{ width:8px; height:8px; background-color: rgba(255,255,255, 0.5); text-indent: -10000px; border-radius: 50%; margin-top: 12px; cursor:pointer; outline: none; } #radio li:first-child{margin-top:0; }#radioOn{ width:8px; height:8px; margin-bottom:12px; position: absolute; top:0; left:0; background-color: #ffd403; border-radius: 50%; }/*倒计时*/ ul.countdown { width: 70.2%; /*width: 484px; */ height: 44px; line-height: 44px; position: fixed; top:0; left: 0; /*right: 381px; */ display: block; text-align: center; background: rgba(255,255,255,0.8); font-weight: 300; }ul.countdown li { display: inline-block; }ul.countdown li span { font-size: 30px; color: #ff0000; } .seperator { font-size: 24px; }/*下拉箭头*/ .goBottom{ position: fixed; bottom: 5px; left: 0; right:0; margin: auto; z-index: 9999; text-align: center; } .goBottom> img{ width: 60px; height: 60px; margin-bottom: 4px; display: inline-block; } .goBottomText{ font-size: 14px; position: absolute; left: 0; right: 0; bottom: 0px; font-size: 14px; }

【H5活动全屏滚动页面在安卓智能电视TV调试】最终效果