碼上歡樂
相關內容    簡體    繁體

H5活動全屏滾動頁面在安卓智能電視TV調試

本文轉載自   查看原文   2020-05-12 13:03   709 

前段時間公司做一個線上活動，在電視上商品促銷。產品的要求是每個商品介紹剛好滿一屏，按下遙控器向下鍵可以整屏切換。這種功能如果實在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;
}

最終效果
圖片描述


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 安卓Native和H5頁面進行交互 H5頁面js和ios 安卓 互相調用 H5 video安卓默認點擊不能全屏播放解決辦法 H5判斷是安卓還是ios訪問 h5調用安卓方法 ios和安卓H5交互橋接 h5與安卓、ios交互 video 在微信中，安卓全屏和ios上如何內聯播放？H5同層播放器相關接入規范 H5與安卓傳遞多個參數 使用谷歌瀏覽器調試安卓app（h5）之遇到坑
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM