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 ...
随机推荐
- numpy.random模块用法小结
原文作者:aircraft 原文链接:https://www.cnblogs.com/DOMLX/p/9751471.html 1.np.random.random()函数参数 np.random.r ...
- Thread线程基本写法用法
//线程属性 protected Thread workerThread; protected bool isWorkerThreadStopped = true; public void Initi ...
- csrf跨站请求、相关装饰器、auth模块使用
昨日内容回顾 django操作cookie和session # 作用:就是保存用户信息,保存一系列数据,还可以做缓存 保留一段时间 # session是基于cookie工作的 1. 数据是保存在服务端 ...
- 使用 Xshell 连接矩池云 GPU服务器
下单租用 租用成功 打开软件 完成 错误用法不能这样使用
- java后端工程师学习路线
根据自己的经历和见识梳理了一份java后端工程师的学习路线(不含安卓方向),难免有局限性和疏漏,请在评论区反馈意见和建议! 很明显的是我的学习路线过于庞大了[尴尬],你可以认为这些只是我的一家之言,具 ...
- jmeter关于入参转码encode问题
我们的工作中,通过抓包经常会发现有很多入参都是被encode过一层,形成了如上图所示的样子: 这些参数我们是可以通过fiddler去转码的:但是如果我们要做jmeter的脚本,不可能每一次都手动去转码 ...
- 测试杂谈——一条SQL引发的思考
此篇只是个人记录,相信各位大神早已轻车熟路,不喜勿喷:有错之处,欢迎指正. 有一天收到新人的咨询,是关于sql的问题. 问题1:为什么sql查询的数据与界面展示的不准确: 问题2:为什么sql查询时间 ...
- Ubuntu系统中防火墙的使用和开放端口
目录 Ubuntu系统 防火墙的使用和开放端口 1.安装防火墙 2.查看防火墙状态 3.开启.重启.关闭防火墙 4.Ubuntu添加开放.关闭端口 5.开放规定协议的端口 6.关闭指定协议端口 7.开 ...
- Nginx配置不当（CRLF注入 、目录穿越）
基于vulhub漏洞环境 环境搭建参考:https://blog.csdn.net/qq_36374896/article/details/84102101 1.漏洞名称 CRLF注入 2.漏洞原理 ...
- VULNCMS
靶机准备 导入虚拟机,并将网络模式设置为NAT 扫描ip netdiscover -r 192.168.164.0/24 渗透测试 扫描端口 nmap -sS -sV -T5 -A -p- 192.1 ...