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="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 = 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="img/goodsimg01.jpg" style="width: 100%;height:100%;display: block;"></section>
<section class="panel"><img class="goos2" src="img/goodsimg02.jpg" style="width: 100%;height:100%;display: block;"></section>
<section class="panel"><img class="goos3" src="img/goodsimg03.jpg" style="width: 100%;height:100%;display: block;"></section>
<section class="panel"><img class="goos4" src="img/goodsimg04.jpg" style="width: 100%;height:100%;display: block;"></section>
<section class="panel"><img class="goos5" src="img/goodsimg05.jpg" style="width: 100%;height:100%;display: block;"></section>
<section class="panel"><img class="goos6" src="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="img/goBottom.png">
<p class="goBottomText">下按查看更多商品</p>
</div>
</body>
<!--全屏滚动插件-->
<script type="text/javascript" src="js/onepage.js"></script>
<script type="text/javascript" src="js/jquery.downCount.js"></script>
<script type="text/javascript" src="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 down page 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调试的更多相关文章
- 基于html5和css3响应式全屏滚动页面切换效果
分享一款全屏响应式的HTML5和CSS3页面切换效果.这个页面布局效果对于那些页面要求固定100%高度和宽度的网站和APP来说是十分有用的.效果图如下: 在线预览 源码下载 HTML wrappe ...
- AlloyTouch全屏滚动插件发布--30秒搞定顺滑H5页
原文链接:https://github.com/AlloyTeam/AlloyTouch/wiki/AlloyTouch-FullPage-Plugin 先验货 插件代码可以在这里找到. 注意,虽然是 ...
- 拥抱单页网站! jQuery全屏滚动插件fullPage.js
不知道从什么时候开始,单页网站就悄悄走进人们的视线,尤其是国外的网站,更是钟爱单页网站.制作一个全屏滚动的效果,然后每个滚动页弄一个好看的背景色,配上一些描述性的文字,大家都喜欢这么弄,仿佛逼格瞬间可 ...
- 六一广告页H5全屏滚动效果实现
明天就六一儿童了(放假了),在这里提前祝大家周末快乐,每逢节假日公司必然会推出h5活动页的需求,这次六一儿童节也不例外,产品这次倒是没提什么互动效果需求,只不过根据UI妹子给的设计图,图片与图片中颜色 ...
- H5全屏滚动专题页最佳实践
1.slip.js + rem.js 主要插件: slip.js github: https://github.com/binnng/slip.js rem.js 插件为阿里淘宝的 rem 实现的基础 ...
- AlloyTouch全屏滚动插件搞定顺滑H5页
使用姿势 在设计全屏滚动插件的时候,希望开发者几乎: 不用写任何脚本快速生成精致H5 支持PC滚轮和移动触摸 酷炫的转场动效 灵活的时间轴管理 一切皆可配置 但是不写脚本肯定没有灵活性咯?!不是的.这 ...
- 学习笔记： js插件 —— fullPage.js （页面全屏滚动）
fullPage.js (页面全屏滚动) 必须依赖 jquery-ui.min.js, 233K 14760个星. 以后有时间再看. API挺全 https://github.com/alvaro ...
- 全屏滚动效果H5FullscreenPage.js
前提: 介于现在很多活动都使用了 类似全屏滚动效果 尤其在微信里面 我自己开发了一个快速构建 此类项目的控件 与市面上大部分控件不同的是此控件还支持元素的动画效果 并提供多种元素效果 基于zepto. ...
- 手机端实现fullPage——全屏滚动效果
封装了一个小插件模拟fullPage的全屏滚动效果,比较简单. 特点: 1. 纯js实现,小巧轻便. 2. 兼容性好.苹果.安卓都没问题,暂时没遇到问题机型. 缺点: 1. 仅封装了基础功能,H ...
随机推荐
- FoveaBox：细节差别，另一种DenseBox+FPN的Anchor-free方案 | IEEE TIP 2020
作为与FCOS和FSAF同期的Anchor-free论文,FoveaBox在整体结构上也是基于DenseBox加FPN的策略,主要差别在于FoveaBox只使用目标中心区域进行预测且回归预测的是归一化 ...
- jmeter + tomcat + ant + svn +jenkins 实现持续集成测试
l 安装jdk时候需要提前检查jdk是否安装成功 l 在dos下输入javac java -version l l 安装jmeter l 校验是否安装成功: l 进入jmeter目录下bin ...
- Jmeter--由PV估算tps和最大并发数
需求 "假设一个系统的业务有登录.浏览帖子.发送新贴.回复帖子,访问高峰是上午10点,日访问高峰PV约5208(含登录1300.浏览2706.发帖526.回帖676).系统响应时间要求小于3 ...
- Netty学习(四)FastThreadLocal
FastThreadLocal 前面介绍过 JDK 的 ThreadLocal , 使用不当的话容易造成内存泄漏最终导致OOM, 并且也有一些地方设计的不够好(相对于接下来要介绍的 FastThrea ...
- 2.3 C++STL vector容器详解
文章目录 2.3.1 引入 2.3.2 代码实例 2.3.3 运行结果 总结 2.3.1 引入 vector 容器 动态数组 可变数组 vector容器 单口容器(尾部操作效率高) vector动态增 ...
- 七天接手react项目 系列 —— react 路由
其他章节请看: 七天接手react项目 系列 react 路由 本篇首先讲解路由原理,接着以一个基础路由示例为起点讲述路由最基础的知识,然后讲解嵌套路由.路由传参,最后讲解路由组件和一般组件的区别,以 ...
- [源码解析] TensorFlow 分布式环境(4) --- WorkerCache
[源码解析] TensorFlow 分布式环境(4) --- WorkerCache 目录 [源码解析] TensorFlow 分布式环境(4) --- WorkerCache 1. WorkerCa ...
- 羽夏看Win系统内核—— x64 番外篇
写在前面 此系列是本人一个字一个字码出来的,包括示例和实验截图.由于系统内核的复杂性,故可能有错误或者不全面的地方,如有错误,欢迎批评指正,本教程将会长期更新. 如有好的建议,欢迎反馈.码字不易, ...
- 羽夏看Win系统内核—— VT 入门番外篇
写在前面 此系列是本人一个字一个字码出来的,包括示例和实验截图.由于系统内核的复杂性,故可能有错误或者不全面的地方,如有错误,欢迎批评指正,本教程将会长期更新. 如有好的建议,欢迎反馈.码字不易, ...
- 『忘了再学』Shell基础 — 4、Bash基本功能（history命令）
目录 1.history历史命令 2.设置命令历史记录的条数 3.清空历史命令 4.历史命令的调用 5.命令与文件的补全 在Linux系统中默认的Shell就是Bourne-AgainShell(简称 ...