摘要:前段時間公司做一個線上活動,在電視上商品促銷。文件滾動第一屏滾動最后一屏滾動上下滾動鍵啟動第一屏滾動最后一屏滾動樣式側邊欄倒計時下拉箭頭最終效果
前段時間公司做一個線上活動,在電視上商品促銷。產品的要求是每個商品介紹剛好滿一屏,按下遙控器向下鍵可以整屏切換。這種功能如果實在PC端,實現起來非常容易,引用jQuery插件就能實現。但是在安卓智能電視上就會有許多兼容性問題,因為各種廠家生產的電視機盒子、智能電視系統都不一樣。下面主要介紹一下我的這個項目。
下面是整個HTML代碼
超級會員日活動
- 0
- 1
- 2
- 3
- 4
- 5
下按查看更多商品
首先需要引用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; }
最終效果
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/84313.html
摘要:前段時間公司做一個線上活動,在電視上商品促銷。文件滾動第一屏滾動最后一屏滾動上下滾動鍵啟動第一屏滾動最后一屏滾動樣式側邊欄倒計時下拉箭頭最終效果 前段時間公司做一個線上活動,在電視上商品促銷。產品的要求是每個商品介紹剛好滿一屏,按下遙控器向下鍵可以整屏切換。這種功能如果實在PC端,實現起來非常容易,引用jQuery插件就能實現。但是在安卓智能電視上就會有許多兼容性問題,因為各種廠家生產...
摘要:輪播圖區域這里微信小程序給我們提供了組件,直接用就可以了。但是需要注意的是在微信小程序里,強烈推薦使用彈性布局首頁商品展示區這里的商品都是分塊展示,很有規律,因此整個商品展示都可以直接用遍歷出來。 showImg(https://user-gold-cdn.xitu.io/2018/6/11/163ed74a0fff9596?w=1262&h=676&f=jpeg&s=174374);...
摘要:輪播圖區域這里微信小程序給我們提供了組件,直接用就可以了。但是需要注意的是在微信小程序里,強烈推薦使用彈性布局首頁商品展示區這里的商品都是分塊展示,很有規律,因此整個商品展示都可以直接用遍歷出來。 showImg(https://user-gold-cdn.xitu.io/2018/6/11/163ed74a0fff9596?w=1262&h=676&f=jpeg&s=174374);...
閱讀 1634·2023-04-26 02:11
閱讀 2979·2023-04-25 16:18
閱讀 3711·2021-09-06 15:00
閱讀 2630·2019-08-30 15:55
閱讀 1934·2019-08-30 13:20
閱讀 2051·2019-08-26 18:36
閱讀 3121·2019-08-26 11:40
閱讀 2538·2019-08-26 10:11