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 ...
随机推荐
- python安装各种插件
http://www.lfd.uci.edu/~gohlke/pythonlibs/#pip 感受:如果编辑pip真的一直出问题,考虑降成32位的进行安装.毕竟合理搭配比木桶突出有用.
- Navicat for MySQL 安装软件和破解补丁
软件 链接:https://pan.baidu.com/s/1e8gpbyWM7ISrWpMwsw-MNg 提取码:fag3 安装好 Navicat 将破解文件放到安装目录下,然后双节运行 是的,你 ...
- CSS学习Day01
1.什么是CSS 如何学习 CSS是什么 CSS怎么用 CSS选择器(重点+难点) 美化网页(文字.阴影.超链接.列表.渐变) 盒子模型 浮动 定位 网页动画(特效效果) 1.1什么是CSS Casc ...
- CF498B题解
咋黑色啊,这不是看到数据范围就去想 \(O(nT)\) 的做法吗? 然后仔细想想最靠谱的就是 DP. 设 \(dp[n][T]\) 表示听完第 \(n\) 首歌,总共听了 \(T\) 秒. 很明显有 ...
- Java安全第一篇 ｜ 反射看这一篇就够了
什么是反射? Java安全可以从反序列化漏洞说起,反序列化漏洞又可以从反射说起.反射是⼤多数语⾔⾥都必不可少的组成部分,对象可以通过反射获取他的类,类可以通过反射拿到所有⽅法(包括私有),拿到的⽅法可 ...
- Java基础——日期类Date
一.概述 date代表一个特定的时间,精确到毫秒 二.构造方法 方法名 说明 public Date() 分配一个Date对象,并初始化,以便它代表被分配的时间,精确到毫秒 public Date(l ...
- Mybatis结果集ResultMap映射
基本使用: 解决属性名和数据库字段名不一致的问题 <resultMap id="user" type="com.guan.bean.UserBean"&g ...
- ZYNQ使用ymodem协议传输文件
SDK: V2014.4 协议: Ymodem 工具: USB转UART转接线.xshell6软件 可实现各种文件传输,大小不限,只是速度很慢 参考原代码如下: /****************** ...
- 前端知识之BOM和DOM
前端基础之BOM和DOM windw对象 指浏览器窗口,所有的浏览器都支持window对象 常用的window方法 window.innerHeight 浏览器窗口的内部高度 window.inner ...
- 随手用Java写的bilibili缓存视频转换器（合成分离的视频和音频）
使用java随手写成,有需要可以自行修改. 项目使用到了fastjson,可以自行替换成其他json解析工具. 写这个的原因是因为下载到的其他工具弄出来的视频标题过长(应该取entry.json中的s ...