资讯专栏INFORMATION COLUMN

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

CompileYouth / 1559人阅读

摘要:前段时间公司做一个线上活动,在电视上商品促销。文件滚动第一屏滚动最后一屏滚动上下滚动键启动第一屏滚动最后一屏滚动样式侧边栏倒计时下拉箭头最终效果

前段时间公司做一个线上活动,在电视上商品促销。产品的要求是每个商品介绍刚好满一屏,按下遥控器向下键可以整屏切换。这种功能如果实在PC端,实现起来非常容易,引用jQuery插件就能实现。但是在安卓智能电视上就会有许多兼容性问题,因为各种厂家生产的电视机盒子、智能电视系统都不一样。下面主要介绍一下我的这个项目。
下面是整个HTML代码




    
    超级会员日活动
    
    
    
    
    
    



  • 0
  • 1
  • 2
  • 3
  • 4
  • 5
  • 距活动结束:
  • 00
  • 00
  • 00
  • 00

下按查看更多商品

首先需要引用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;
}

最终效果

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/84313.html

相关文章

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

    摘要:前段时间公司做一个线上活动,在电视上商品促销。文件滚动第一屏滚动最后一屏滚动上下滚动键启动第一屏滚动最后一屏滚动样式侧边栏倒计时下拉箭头最终效果 前段时间公司做一个线上活动,在电视上商品促销。产品的要求是每个商品介绍刚好满一屏,按下遥控器向下键可以整屏切换。这种功能如果实在PC端,实现起来非常容易,引用jQuery插件就能实现。但是在安卓智能电视上就会有许多兼容性问题,因为各种厂家生产...

    JerryC 评论0 收藏0
  • 小爱童鞋@你,一起来撸个小程序吧

    摘要:轮播图区域这里微信小程序给我们提供了组件,直接用就可以了。但是需要注意的是在微信小程序里,强烈推荐使用弹性布局首页商品展示区这里的商品都是分块展示,很有规律,因此整个商品展示都可以直接用遍历出来。 showImg(https://user-gold-cdn.xitu.io/2018/6/11/163ed74a0fff9596?w=1262&h=676&f=jpeg&s=174374);...

    MiracleWong 评论0 收藏0
  • 小爱童鞋@你,一起来撸个小程序吧

    摘要:轮播图区域这里微信小程序给我们提供了组件,直接用就可以了。但是需要注意的是在微信小程序里,强烈推荐使用弹性布局首页商品展示区这里的商品都是分块展示,很有规律,因此整个商品展示都可以直接用遍历出来。 showImg(https://user-gold-cdn.xitu.io/2018/6/11/163ed74a0fff9596?w=1262&h=676&f=jpeg&s=174374);...

    Pink 评论0 收藏0

发表评论

0条评论

CompileYouth

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<