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 ...
随机推荐
- VS Code 启动占用100%Cpu问题解决办法
打开VS Code之后,点击文件->首选项->设置 search.followSymlinks
- 爬虫之爬取豆瓣top250电影排行榜及爬取斗图啦表情包解读及爬虫知识点补充
今日内容概要 如何将爬取的数据直接导入Excel表格 #如何通过Python代码操作Excel表格 #前戏 import requests import time from openpyxl impo ...
- JZ-002-替换空格
替换空格 题目描述 请实现一个函数,将一个字符串中的每个空格替换成"%20".例如,当字符串为We Are Happy.则经过替换之后的字符串为We%20Are%20Happy. ...
- cmd 连接宝塔终端
- think php 删除
表单页面 <a href="/examtest/test/edit/id/{$v['id']}">修改</a> <a href="/exam ...
- 【简记】Linux界面连接WPA2-Enterprise Wifi
背景 公司从去年(2021)年开始使用 WPS2-Enterprise 安全方式,我的笔记本来公司就得用网线才能连(因为当时没意识到,只是以为连不上可能和驱动有关系,这是大错特错的理解..)赶上今天去 ...
- Java学习笔记:02面向对象-重写_this_super_抽象类
02面向对象-重写/this/super/抽象类 ****1.this和super 作用: this: 区分本类的成员变量和局部变量同名情况 super:区分父类的成员变量和局部变量同名情况 用法: ...
- Django基础三之路由、视图、模板
Django基础三之路由.视图.模板 目录 Django基础三之路由.视图.模板 1. Django 请求和返回周期 1.1 路由层之路由匹配 1.2 有名分组 1.3 无名分组 2. 反射解析 3. ...
- G1垃圾回收器在并发场景调优
一.序言 目前企业级主流使用的Java版本是8,垃圾回收器支持手动修改为G1,G1垃圾回收器是Java 11的默认设置,因此G1垃圾回收器可以用很长时间,现阶段垃圾回收器优化意味着针对G1垃圾回收器优 ...
- 移动APP开发框架盘点2：Web移动前端框架大全
前言 自上次发布了<移动APP开发框架盘点>后,时间已经过去了三年, 为什么突然又写一篇续集呢?是因为有一个非常有意思的发现. 开源项目其实有一个成熟周期,这个周期大概是三年左右,自Rea ...