Html 全屏切换效果
来源 http://www.imooc.com/learn/374
pageswitch.js
(function ($) {
var defaults = {
'container': '#container', //容器
'sections': '.section', //子容器
'easing': 'ease', //特效方式，ease-in,ease-out,linear
'duration': 1000, //每次动画执行的时间
'pagination': true, //是否显示分页
'loop': true, //是否循环
'keyboard': true, //是否支持键盘
'direction': 'vertical', //滑动的方向 horizontal,vertical,
'onpageSwitch': function (pagenum) { }
};
var win = $(window),
container, sections;
var opts = {},
canScroll = true;
var iIndex = 0;
var arrElement = [];
var SP = $.fn.switchPage = function (options) {
opts = $.extend({}, defaults, options || {});
container = $(opts.container),
sections = container.find(opts.sections);
sections.each(function () {
arrElement.push($(this));
});
return this.each(function () {
if (opts.direction == "horizontal") {
initLayout();
}
if (opts.pagination) {
initPagination();
}
if (opts.keyboard) {
keyDown();
}
});
}
//滚轮向上滑动事件
SP.moveSectionUp = function () {
if (iIndex) {
iIndex--;
} else if (opts.loop) {
iIndex = arrElement.length - 1;
}
scrollPage(arrElement[iIndex]);
};
//滚轮向下滑动事件
SP.moveSectionDown = function () {
if (iIndex < (arrElement.length - 1)) {
iIndex++;
} else if (opts.loop) {
iIndex = 0;
}
scrollPage(arrElement[iIndex]);
};
//私有方法
//页面滚动事件
function scrollPage(element) {
var dest = element.position();
if (typeof dest === 'undefined') { return; }
initEffects(dest, element);
}
//重写鼠标滑动事件
$(document).on("mousewheel DOMMouseScroll", MouseWheelHandler);
function MouseWheelHandler(e) {
e.preventDefault();
var value = e.originalEvent.wheelDelta || -e.originalEvent.detail;
var delta = Math.max(-1, Math.min(1, value));
if (canScroll) {
if (delta < 0) {
SP.moveSectionDown();
} else {
SP.moveSectionUp();
}
}
return false;
}
//横向布局初始化
function initLayout() {
var length = sections.length,
width = (length * 100) + "%",
cellWidth = (100 / length).toFixed(2) + "%";
container.width(width).addClass("left");
sections.width(cellWidth).addClass("left");
}
//初始化分页
function initPagination() {
var length = sections.length;
if (length) {
}
var pageHtml = '<ul id="pages"><li class="active"></li>';
for (var i = 1; i < length; i++) {
pageHtml += '<li></li>';
}
pageHtml += '</ul>';
$("body").append(pageHtml);
}
//分页事件
function paginationHandler() {
var pages = $("#pages li");
pages.eq(iIndex).addClass("active").siblings().removeClass("active");
}
//是否支持css的某个属性
function isSuportCss(property) {
var body = $("body")[0];
for (var i = 0; i < property.length; i++) {
if (property[i] in body.style) {
return true;
}
}
return false;
}
//渲染效果
function initEffects(dest, element) {
var transform = ["-webkit-transform", "-ms-transform", "-moz-transform", "transform"],
transition = ["-webkit-transition", "-ms-transition", "-moz-transition", "transition"];
canScroll = false;
if (isSuportCss(transform) && isSuportCss(transition)) {
var traslate = "";
if (opts.direction == "horizontal") {
traslate = "-" + dest.left + "px, 0px, 0px";
} else {
traslate = "0px, -" + dest.top + "px, 0px";
}
container.css({
"transition": "all " + opts.duration + "ms " + opts.easing,
"transform": "translate3d(" + traslate + ")"
});
container.on("webkitTransitionEnd msTransitionend mozTransitionend transitionend", function () {
canScroll = true;
});
} else {
var cssObj = (opts.direction == "horizontal") ? { left: -dest.left} : { top: -dest.top };
container.animate(cssObj, opts.duration, function () {
canScroll = true;
});
}
element.addClass("active").siblings().removeClass("active");
if (opts.pagination) {
paginationHandler();
}
}
//窗口Resize
var resizeId;
win.resize(function () {
clearTimeout(resizeId);
resizeId = setTimeout(function () {
reBuild();
}, 500);
});
function reBuild() {
var currentHeight = win.height(),
currentWidth = win.width();
var element = arrElement[iIndex];
if (opts.direction == "horizontal") {
var offsetLeft = element.offset().left;
if (Math.abs(offsetLeft) > currentWidth / 2 && iIndex < (arrElement.length - 1)) {
iIndex++;
}
} else {
var offsetTop = element.offset().top;
if (Math.abs(offsetTop) > currentHeight / 2 && iIndex < (arrElement.length - 1)) {
iIndex++;
}
}
if (iIndex) {
paginationHandler();
var cuerrentElement = arrElement[iIndex],
dest = cuerrentElement.position();
initEffects(dest, cuerrentElement);
}
}
//绑定键盘事件
function keyDown() {
var keydownId;
win.keydown(function (e) {
clearTimeout(keydownId);
keydownId = setTimeout(function () {
var keyCode = e.keyCode;
if (keyCode == 37 || keyCode == 38) {
SP.moveSectionUp();
} else if (keyCode == 39 || keyCode == 40) {
SP.moveSectionDown();
}
}, 150);
});
}
})(jQuery);
demo.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>页面切换</title>
<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="pageswitch.js"></script>
<script type="text/javascript">
$(function () {
$("#container").switchPage({
});
});
</script>
<style type="text/css">
h1, body, html
{
padding: 0;
margin: 0;
}
body
{
font-family: Arial, "Microsoft YaHei" , "Hiragino Sans GB" ,sans-serif;
}
html, body
{
height: 100%;
overflow: hidden;
}
#container, .section
{
height: 100%;
position: relative;
}
div.section
{
background-color: #000;
background-size: cover;
background-position: 50% 50%;
}
#section0
{
background-image: url(images/1.jpg);
}
#section1
{
background-image: url(images/2.jpg);
}
#section2
{
background-image: url(images/3.jpg);
}
#section3
{
background-image: url(images/7.jpg);
}
#section4
{
background-image: url(images/5.jpg);
}
#section5
{
background-image: url(images/6.jpg);
}
#section6
{
background-image: url(images/4.jpg);
}
.left
{
float: left;
}
#pages
{
position: fixed;
right: 10px;
top: 50%;
list-style: none;
}
#pages li
{
width: 8px;
height: 8px;
border-radius: 50%;
background: #fff;
margin: 0 0 10px 5px;
}
#pages li.active
{
width: 14px;
height: 14px;
border: 2px solid #FFFE00;
background: none;
margin-left: 0;
}
</style>
</head>
<body>
<div id="container">
<div class="section active" id="section0">
</div>
<div class="section" id="section1">
</div>
<div class="section" id="section2">
</div>
<div class="section" id="section3">
</div>
<div class="section" id="section4">
</div>
<div class="section" id="section5">
</div>
<div class="section" id="section6">
</div>
</div>
</body>
</html>