6-6 3D旋转视频

/** * 慕课网特制 * 圣诞主题效果 * @type {Object} */ /** * 中间调用 */ var Christmas = function() { //页面容器元素 var $pageB = $(".page-b"); //构建第二个场景页面对象 new pageB($pageB); }; $(function() { Christmas(); })

/** * 第二副场景页面 * */ function pageB(element, pageComplete) { //3d旋转节点 var $carousel = element.find("#carousel"); //旋转木马对象 var carousel = new Carousel($carousel, { imgUrls: [ "http://img1.sycdn.imooc.com//5662e29a0001905a14410901.png", "http://img1.sycdn.imooc.com//5662e2960001f16314410901.png", "http://img1.sycdn.imooc.com//5662e26f00010dea14410901.png" ], videoUrls: [ "http://www.imooc.com/upload/media/qx-one.mp4", "http://www.imooc.com/upload/media/qx-two.mp4", "http://www.imooc.com/upload/media/qx-three.mp4" ] }); var i = 0; $("button").on("click", function() { carousel.run(i++, function() { //播放视频 carousel.palyVideo() }) }) }

//================================================ //格式化字符串 var slice = Array.prototype.slice function toArray(a, i, j) { return slice.call(a, i || 0, j || a.length); } /** * 返回true,如果传递的值不是未定义。 * @param {Mixed} * @return {Boolean} */ function isDefined(v) { return typeof v !== 'undefined'; } /** * 拷贝对象，跳过已存在的 * @param {[type]} o [接受方对象] * @param {[type]} c [源对象] * @return {[type]} [description] */ function applyIf(o, c) { if (o) { for (var p in c) { //跳过已存在 if (!isDefined(o[p])) { o[p] = c[p]; } } } return o; } /** * @class String * 格式化字符串 */ applyIf(String, { format: function(format) { var args = toArray(arguments, 1); return format.replace(/\{(\d+)\}/g, function(m, i) { return args[i]; }); } }); /** * 3d旋转木马 * @param {[type]} argument [description] * @return {[type]} [description] */ function Carousel(carousel, options) { //图片 var imgUrls = options.imgUrls; //场景元素 var $carousel = carousel; //容器元素 var $spinner = carousel.find("#spinner"); var angle = 0; //图片数 var numpics = imgUrls.length; //角度 var rotate = 360 / numpics; var start = 0; var current = 1; //子元素 var $contentElements; //图片数量 this.numpics = numpics; /** * 创建结构 * @param {[type]} imgUrl [description] * @return {[type]} [description] */ function createStr(imgUrl) { var str = '<figure style="transform:rotateY({0}deg) translateZ({1}) scaleY(.9);position:absolute;">' + '<img src="{2}" style="width:100%;height:100%;">' + '</figure>'; return String.format(str, start, "2.5rem", imgUrl ) } /** * 初始化样式 * @return {[type]} [description] */ function initStyle() { //场景元素 $carousel.css({ // "transform": "scale(0.3)", "-webkit-perspective": "500", "-moz-perspective": "500px", "position": "absolute", "left": "6.8rem", "top": "4.5rem" }); //容器 $spinner.css({ "width": "4rem", "transform-style": "preserve-3d", "transition": "1s" }) } /** * 绘制页面节点 * @return {[type]} [description] */ function render() { //创建内容 var contentStr = ''; $.each(imgUrls, function(index, url) { contentStr += createStr(url); start = start + rotate; }) $contentElements = $(contentStr); $spinner.append($contentElements) } //样式 initStyle(); //绘制节点 render(); //旋转次数,游标,当前页码 var currIndex; /** * 运行旋转 * @param {[type]} count [description] * @param {Function} callback [description] * @return {[type]} [description] */ this.run = function(count, callback) { currIndex = count; //360 //480 //600 angle = (count - 1) * rotate + 360 $spinner .css("-moz-transform", "rotateY(-" + angle + "deg)") .css("transform", "rotateY(-" + angle + "deg)") .one("transitionend webkitTransitionend", function() { callback() }) } /** * 视频播放 * @param {[type]} index [description] * @param {[type]} element [description] * @return {[type]} [description] */ this.palyVideo = function() { //索引从0开始 var index = currIndex var element = element || $contentElements.eq(index) /** * vide标签 * @type {[type]} */ var $video = $('<video preload="auto" class="bounceIn" style="width:50%;height:50%;position:absolute;left:30%;top:35%;"></video>'); $video.css({ "position": "absolute", "z-index": "999" }) //地址 $video.attr('src', options.videoUrls[index]); //播放 ///? //停止 $video.on("ended", function() { $video[0].pause() //退出效果 $video.addClass("bounceOut").one("animationend webkitAnimationEnd", function() { $video.remove(); }) }) $carousel.after($video) } }

*{ margin: 0; padding: 0; } .container { width: 100%; height: 100%; position: relative; overflow: hidden; } .bg-adaptive { background-size: 100% 100%; }

.container .page-b { width : 100%; height : 100%; background-image: url("http://img1.sycdn.imooc.com//565d09fa000145a614410901.png"); position: absolute; z-index: 40; } @-webkit-keyframes bounceIn { from, 20%, 40%, 60%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 40% { -webkit-transform: scale3d(.9, .9, .9); transform: scale3d(.9, .9, .9); } 60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); } 80% { -webkit-transform: scale3d(.97, .97, .97); transform: scale3d(.97, .97, .97); } to { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes bounceIn { from, 20%, 40%, 60%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 40% { -webkit-transform: scale3d(.9, .9, .9); transform: scale3d(.9, .9, .9); } 60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); } 80% { -webkit-transform: scale3d(.97, .97, .97); transform: scale3d(.97, .97, .97); } to { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .bounceIn { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-name: bounceIn; animation-name: bounceIn; } @-webkit-keyframes bounceOut { 20% { -webkit-transform: scale3d(.9, .9, .9); transform: scale3d(.9, .9, .9); } 50%, 55% { opacity: 1; -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } to { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } } @keyframes bounceOut { 20% { -webkit-transform: scale3d(.9, .9, .9); transform: scale3d(.9, .9, .9); } 50%, 55% { opacity: 1; -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } to { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } } .bounceOut { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-name: bounceOut; animation-name: bounceOut; }