97 lines
3.1 KiB
JavaScript
97 lines
3.1 KiB
JavaScript
$(function() {
|
|
var mySwiper = new Swiper ('.swiper-container', {
|
|
direction: 'horizontal',
|
|
loop: true,
|
|
|
|
// 如果需要分页器
|
|
pagination: {
|
|
el: '.swiper-pagination'
|
|
},
|
|
|
|
// 如果需要前进后退按钮
|
|
navigation: {
|
|
nextEl: '.swiper-button-next',
|
|
prevEl: '.swiper-button-prev'
|
|
},
|
|
|
|
// 如果需要滚动条
|
|
scrollbar: {
|
|
el: '.swiper-scrollbar'
|
|
}
|
|
});
|
|
|
|
$.scrollify({
|
|
section:".panel",
|
|
interstitialSection:"#layout-page-header,#layout-page-footer",
|
|
scrollbars:false,
|
|
before:function(i,panels) {
|
|
var ref = panels[i].attr("data-section-name");
|
|
$(".pagination .active").removeClass("active");
|
|
$(".pagination").find("a[href=\"#" + ref + "\"]").addClass("active");
|
|
$('.swiper-container').height('100%');
|
|
$('section.panel div.container').each(function(elem){
|
|
$(this).css({position: 'relative', top: ($(window).height() -$(this).height()) / 2 });
|
|
});
|
|
},
|
|
afterRender:function() {
|
|
var pagination = "<div class=\"pagination\">";
|
|
var activeClass = "";
|
|
$(".panel").each(function(i) {
|
|
activeClass = "";
|
|
if(i===0) {
|
|
activeClass = "active";
|
|
}
|
|
pagination += "<a class=\"" + activeClass + "\" href=\"#" + $(this).attr("data-section-name") + "\"><span class=\"hover-text\">" + $(this).attr("data-section-name") + "</span></a>";
|
|
});
|
|
|
|
pagination += "</div>";
|
|
|
|
$(".home").append(pagination);
|
|
/*
|
|
|
|
Tip: The two click events below are the same:
|
|
|
|
$(".pagination a").on("click",function() {
|
|
$.scrollify.move($(this).attr("href"));
|
|
});
|
|
|
|
*/
|
|
$(".pagination a").on("click",$.scrollify.move);
|
|
}
|
|
});
|
|
|
|
$('section.panel div.container').each(function(elem){
|
|
$(this).css({position: 'relative', top: ($(window).height() -$(this).height()) / 2 });
|
|
});
|
|
|
|
var video = document.querySelector('video')
|
|
, container = document.querySelector('#video_silder');
|
|
|
|
var setVideoDimensions = function () {
|
|
var w = video.videoWidth
|
|
, h = video.videoHeight;
|
|
var videoRatio = (w / h).toFixed(2);
|
|
|
|
var containerStyles = window.getComputedStyle(container)
|
|
, minW = parseInt( containerStyles.getPropertyValue('width') )
|
|
, minH = parseInt( containerStyles.getPropertyValue('height') );
|
|
var widthRatio = minW / w
|
|
, heightRatio = minH / h;
|
|
|
|
if (widthRatio > heightRatio) {
|
|
var newWidth = minW;
|
|
var newHeight = Math.ceil( newWidth / videoRatio );
|
|
}
|
|
else {
|
|
var newHeight = minH;
|
|
var newWidth = Math.ceil( newHeight * videoRatio );
|
|
}
|
|
|
|
video.style.width = newWidth + 'px';
|
|
video.style.height = newHeight + 'px';
|
|
};
|
|
|
|
video.addEventListener('loadedmetadata', setVideoDimensions, false);
|
|
window.addEventListener('resize', setVideoDimensions, false);
|
|
});
|