特效描述:html5全屏 双面板切换特效。html5全屏面板切换
代码结构
1. 引入CSS
2. 引入JS
3. HTML代码
"Changes and progress very rarely are gifts from above. They come out of struggles from below."
CSS3全屏双面板内容切换UI设计 Dual Sliding Panels with CSS3 & JavaScript
Buzz Aldrin
"The biggest benefit of Apollo was the inspiration it gave to a growing generation to get into science and aerospace."
$(function() {
var Panels = (function() {
var panelLeft = document.querySelector('.panels__side--left');
var panelRight = document.querySelector('.panels__side--right');
var openLeft = function() {
panelLeft.classList.toggle('panels__side--left-active');
panelRight.classList.toggle('panels__side--right-hidden');
};
var openRight = function() {
panelRight.classList.toggle('panels__side--right-active');
panelLeft.classList.toggle('panels__side--left-hidden');
};
var bindActions = function() {
panelLeft.addEventListener('click', openLeft, false);
panelRight.addEventListener('click', openRight, false);
};
var init = function() {
bindActions();
};
return {
init: init
};
}());
Panels.init();
});