20180110-20180115 学习日记

在慕课网中学习全屏竖屏切换图片效果：

部分CSS3代码：

#container,.sections,.section{
height: 100%;
position: relative;
}

#section0, #section1, #section2, #section3{
background-color: #000;
background-size: cover;
background-position: 50% 50%;
text-align: center;
color: white;
}
#section0{
background-image: url(img/彭格列.jpg);
}
#section1{
background-image: url(img/彭格列X.jpeg);
}
#section2{
background-image: url(img/Kurōmu.jpg);
}
#section3{
background-image: url(img/Kurōmu1.jpg);
}

.left{
float: left;
width: 25%; /*根据图片个数设置，4个25%，5个20%*/
}

p{
font-size: 2em;
margin:0.5em 0 2em 0;
}
.pages{
position:fixed;
list-style: none;
}
.vertical.pages{
right: 10px;
top: 50%;
}
.horizontal.pages{
left: 50%;
bottom: 10px;
}
.pages li{
width: 8px;
height: 8px;
border-radius: 50%;
background: #fff;
margin: 10px 5px;
cursor: pointer;
}
.horizontal.pages li{
display: inline-block;
vertical-align: middle;
}
.pages li.active{
width: 14px;
height: 14px;
border: 2px solid #FFFE00;
background: none;
margin-left: 0;
}
@-webkit-keyframes sectitle0{
0%{
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
100%{
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes sectitle0{
0%{
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
100%{
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@-webkit-keyframes sec0{
0%{
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
100%{
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes sec0{
0%{
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
100%{
-webkit-transform: translateX(0);
transform: translateX(0);
}
}

部分JavaScript代码：

(function($) {
/**
* 说明：获取浏览器前缀
* 实现：判断某元素的css样式中是否存在transition属性
* 参数：dom元素
* 返回值：boolean，有则返回浏览器样式前缀，否则返回false
*/

var _prefix = (function(temp){
var aPrefix = ["webkit", "Moz", "o", "ms"],
props = "";
for(var i in aPrefix){
props = aPrefix[i] + "Transition";
if(temp.style[ props ] !== undefined){
return "-" + aPrefix[i].toLowerCase() + "-";
}
}
return false;
})(document.createElement(PageSwitch));

var PageSwitch = (function() {
function PageSwitch(element, options) {
this.settings = $.extend(true, $.fn.PageSwitch.defaults, options || {});
this.element = element;
this.init();
}


PageSwitch.prototype = {
/*公有方法*/
/*说明：初始化插件*/
/*实现：初始化dom结构，布局，分页及绑定事件*/
init: function(){
var me = this; //this指的是PageSwitch对象,为了不混淆以后的this，将PageSwitch对象缓存到me中

/*setTimeout(function(){
console.log(this); //this指向window
},50);*/

//dom结构初始化
me.selectors = me.settings.selectors;
me.sections = me.element.find(me.selectors.sections);
me.section = me.sections.find(me.selectors.section);

me.direction = me.settings.direction == "vertical" ? true : false;

me.pagesCount = me.pagesCount();

me.index = (me.settings.index >= 0 && me.settings.index < me.pagesCount) ? me.settings.index : 0;

me.canScroll = true;

if(!me.direction || me.index){
me._initLayout();
}

if(me.settings.pagination){
me._initPaging();
}

me._initEvent();

},
/*说明：获取滑动页数*/
pagesCount: function() {
return this.section.length;
},
/*说明：获取滑动的宽度（横屏滑动）或高度（竖屏滑动）*/
switchLength: function() {
return this.direction == 1 ? this.element.height() : this.element.width();
},

/*说明：向前滑动即上一个页面*/
prev : function(){
var me = this;
if(me.index > 0){
me.index --;
}else if(me.settings.loop){
me.index = me.pagesCount - 1;
}

me._scrollPage();
},

/*说明：向后滑动即下一个页面*/
next : function(){
var me = this;
if(me.index < me.pagesCount){
me.index ++;
}else if(me.settings.loop){
me.index = 0;
} 

me._scrollPage();
},


/*私有方法*/
/*说明：主要针对横屏情况进行页面布局*/
_initLayout: function() {
var me = this;
if(!me.direction){
var width = (me.pagesCount * 100) + "%",
cellWidth = (100 / me.pagesCount).toFixed(2) + "%";
me.sections.width(width);
me.section.width(cellWidth).css("float","left");
}
if(me.index){
me._scrollPage(true);
}
},
/*说明：实现分页的dom结构及css样式*/
_initPaging: function() {
var me = this,
pagesClass = me.selectors.page.substring(1);
me.activeClass = me.selectors.active.substring(1);

var pageHtml = "<ul class="+pagesClass+">";
for(var i = 0; i < me.pagesCount; i++){
pageHtml += "<li></li>";
}

me.element.append(pageHtml);
var pages = me.element.find(me.selectors.page);
me.pageItem = pages.find("li");
me.pageItem.eq(me.index).addClass(me.activeClass);

if(me.direction){
pages.addClass("vertical");
}else{
pages.addClass("horizontal");
}
},
/*说明：初始化插件事件*/
_initEvent: function(){
var me = this;
//绑定分页click事件
me.element.on("click", me.selectors.pages + " li", function(){
me.index = $(this).index();
me._scrollPage();
});

if(me.settings.keyboard){
$(window).keydown(function(e){
var keyCode = e.keyCode;
if(keyCode == 37 || keyCode == 38){
me.prev();
}else if(keyCode == 39 || keyCode == 40){
me.next();
}
});
}

//绑定鼠标滚轮事件
me.element.on("mousewheel DOMMouseScroll", function(e){
e.preventDefault();
var delta = e.originalEvent.wheelDelta || -e.originalEvent.detail;
if(me.canScroll){
if(delta > 0 && (me.index && !me.settings.loop || me.settings.loop)){
me.prev();
}else if(delta < 0 && (me.index < (me.pagesCount - 1) && !me.settings.loop || me.settings.loop)){
me.next();
}
}

})

/*
*绑定窗口改变事件
* 为了不频繁调用resize的回调方法，做了延迟
*/
var resizeId;
$(window).resize(function(){
clearTimeout(resizeId);
resizeId = setTimeout(function(){
var currentLength = me.switchLength();
var offset = me.settings.direction ? me.section.eq(me.index).offset().top : me.section.eq(me.index).offset().left;

if(Math.abs(offset) > currentLength / 2 && me.index < (me.pagesCount - 1)){
me.index ++;
}
if(me.index){
me._scrollPage();
}
},500);
});

if(_prefix){
me.sections.on("transitionend webkitTransitionEnd oTransitionEnd otransitionend", function(){
me.canScroll = true;
if(me.settings.callback && $.type(me.settings.callback) === "function"){
me.settings.callback();
}
})
}
},

/*说明：滑动动画*/
_scrollPage : function(init){
var me = this;
var dest = me.section.eq(me.index).position();
if(!dest) return;

me.canScroll = false;
if(_prefix){
var translate = me.direction ? "translateY(-"+dest.top+"px)" : "translateX(-"+dest.left+"px)";
me.sections.css(_prefix + "transition", " all " +me.settings.duration + "ms " + me.settings.easing);
me.sections.css(_prefix + "transform", translate);
}else{
var animateCss = me.direction ? {top : -dest.top} : {left : -dest.left};
me.sections.animate(animateCss, me.settings.duration, function(){
me.canscroll = true;
if(me.settings.callback){
me.settings.callback();
}
});
}

if(me.settings.pagination && !init){
me.pageItem.eq(me.index).addClass(me.activeClass).siblings("li").removeClass(me.activeClass);
}
}
};
return PageSwitch;
})();

/*$.fn.PageSwitch.defaults = {
selectors : {
sections : ".sections",
section : ".section",
page : ".pages",
active : ".active",
},
index: 0, //页面开始的索引
easing: "ease", //动画效果
duration: 500, //动画执行时间
loop: false, //是否循环切换
pagination: true, //是否进行分页
keyboard: true, //是否出发键盘事件
direction: "vertical", //滑动方向 horizontal，vertical
callback: "" //回调函数
};*/



$.fn.PageSwitch = function(options) {
return this.each(function() {
var me = $(this),
instance = me.data("PageSwitch");
if(!instance) {
me.data("PageSwitch", (instance = new PageSwitch(me, options)));
}
if($.type(options) === "string")
return instance[options]();
//$("div").PageSwitch("init");
});
};

$.fn.PageSwitch.defaults = {
selectors : {
sections : ".sections",
section : ".section",
page : ".pages",
active : ".active",
},
index : 0,
easing : "ease",
duration : 500,
loop : false,
pagination : true,
keyboard : true,
direction : "vertical",
callback : ""
};

$(function(){
$('[data-PageSwitch]').PageSwitch();
});
})(jQuery);