Skip to content
BranchesTags

Latest commit

History

22 Commits

Folders and files

NameName
Last commit message
Last commit date
css
css
images
images
js
js
music
music
index.html
index.html
readme.txt
readme.txt

Repository files navigation

/* -------------------------------------------------------------
@ 名称：移动H5场景模板
@ 版本：v1.0
@ 作者：繁花落尽|cici
@ 时间：2015/10/15
*/
项目结构：
入口演示页：index.html
CSS文件组成：animate.css 动画库--公用 style.css 站点主样式
small.css 小屏样式
JS文件组成： 引用jQuery/Zepto库
viewport.js 视窗缩放
pxloader-images.min.js 预加载
pageSlide.js 全屏页面滑动效果【可自定义添加animate.css里面任意动画】
base.js 自己整理的JS库，主要包含横竖屏判断，背景音乐，判断设备，微信分享等功能
main.js 项目主JS，根据需求自己定义
music文件： bg.mp3 根据项目需求，添加背景音乐
images文件： 项目引用图片
滑屏部分核心代码：
function pageMove(tw){
var lastPage = ".pg"+last,
nowPage = ".pg"+now;
switch(tw) {
case towards.up:
outClass = 'fadeOut';
inClass = 'fadeIn delay300';
break;
case towards.down:
outClass = 'fadeOut';
inClass = 'fadeIn delay300';
break;
}
isAnimating = true;
$(nowPage).show();
$(lastPage).addClass(outClass);
$(nowPage).addClass(inClass);
setTimeout(function(){
$(lastPage).removeClass('current');
$(lastPage).removeClass(outClass);
$(lastPage).hide();
$(lastPage).find("img, div").hide();
$(nowPage).addClass('current');
$(nowPage).removeClass(inClass);
$(nowPage).find("img, div").show();
isAnimating = false;
},600);
}
封装一个滑屏动作方法，判断当前手势为swipeUp or swipeDown时，传入方向参数，调用此方法。动画添加通过outclass/inclass巧妙的控制，这里可根据规则引用animate.css库里的任意动画。
base.js 基础库，主要通过一个构造函数来存放当前项目基础功能，如下：
var Cici = function(file){}
Cici.prototype = {
init: function(){ ... },
orient: function(){ ... },
device: function(){ ... }
}
通过main.js引用，如下：
var h5 = new Cici('您的项目名'); //这里传参，便于图片加载及分享调用
h5.init();
建议：一般H5场景应用类项目，可把所有场景放置一个页面，便于控制及添加动画。同时，要做好图片压缩及代码优化等多方面工作。移动端项目总文件大小尽量控制在2M内，对于目前4G网络加载比较理想。

About

HTML5制作场景应用基础模板

Resources

Readme
Activity

Stars

1 star

Watchers

1 watching

Forks

0 forks
Report repository

Releases

Packages

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { // Add copy buttons to all 
 blocks
(function() {
function addCopyButtons() {
document.querySelectorAll('pre code').forEach(function(codeBlock) {
if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;
codeBlock.parentElement.setAttribute('data-copy-added', 'true');
var btn = document.createElement('button');
btn.textContent = 'Copy';
btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';
btn.onmouseover = function() { this.style.opacity = '1'; };
btn.onmouseout = function() { this.style.opacity = '0.7'; };
btn.onclick = function() {
navigator.clipboard.writeText(codeBlock.textContent).then(function() {
btn.textContent = 'Copied!';
setTimeout(function() { btn.textContent = 'Copy'; }, 1500);
});
};
codeBlock.parentElement.style.position = 'relative';
codeBlock.parentElement.appendChild(btn);
});
}
addCopyButtons();
// Re-run on dynamic content
var observer = new MutationObserver(addCopyButtons);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
GitHub - FrontEndRoad/html5-frame: HTML5制作场景应用基础模板 · GitHub
Skip to content
BranchesTags
Latest commit
History
22 Commits
Folders and files
NameName
Last commit message
Last commit date
css
css
images
images
js
js
music
music
index.html
index.html
readme.txt
readme.txt
Repository files navigation
/* -------------------------------------------------------------
@ 名称：移动H5场景模板
@ 版本：v1.0
@ 作者：繁花落尽|cici
@ 时间：2015/10/15
*/
项目结构：
入口演示页：index.html
CSS文件组成：animate.css 动画库--公用 style.css 站点主样式
small.css 小屏样式
JS文件组成： 引用jQuery/Zepto库
viewport.js 视窗缩放
pxloader-images.min.js 预加载
pageSlide.js 全屏页面滑动效果【可自定义添加animate.css里面任意动画】
base.js 自己整理的JS库，主要包含横竖屏判断，背景音乐，判断设备，微信分享等功能
main.js 项目主JS，根据需求自己定义
music文件： bg.mp3 根据项目需求，添加背景音乐
images文件： 项目引用图片
滑屏部分核心代码：
function pageMove(tw){
var lastPage = ".pg"+last,
nowPage = ".pg"+now;
switch(tw) {
case towards.up:
outClass = 'fadeOut';
inClass = 'fadeIn delay300';
break;
case towards.down:
outClass = 'fadeOut';
inClass = 'fadeIn delay300';
break;
}
isAnimating = true;
$(nowPage).show();
$(lastPage).addClass(outClass);
$(nowPage).addClass(inClass);
setTimeout(function(){
$(lastPage).removeClass('current');
$(lastPage).removeClass(outClass);
$(lastPage).hide();
$(lastPage).find("img, div").hide();
$(nowPage).addClass('current');
$(nowPage).removeClass(inClass);
$(nowPage).find("img, div").show();
isAnimating = false;
},600);
}
封装一个滑屏动作方法，判断当前手势为swipeUp or swipeDown时，传入方向参数，调用此方法。动画添加通过outclass/inclass巧妙的控制，这里可根据规则引用animate.css库里的任意动画。
base.js 基础库，主要通过一个构造函数来存放当前项目基础功能，如下：
var Cici = function(file){}
Cici.prototype = {
init: function(){ ... },
orient: function(){ ... },
device: function(){ ... }
}
通过main.js引用，如下：
var h5 = new Cici('您的项目名'); //这里传参，便于图片加载及分享调用
h5.init();
建议：一般H5场景应用类项目，可把所有场景放置一个页面，便于控制及添加动画。同时，要做好图片压缩及代码优化等多方面工作。移动端项目总文件大小尽量控制在2M内，对于目前4G网络加载比较理想。

About
HTML5制作场景应用基础模板
Resources
Readme
Activity
Stars
1 star
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Force GitHub README to respect dark mode
(function() {
var style = document.createElement('style');
style.textContent = '
.markdown-body {
color-scheme: dark light;
}
.markdown-body pre { background: #161b22 !important; }
.markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }
.markdown-body table th, .markdown-body table td { border-color: #30363d !important; }
.markdown-body img { background: #0d1117; }
.markdown-body blockquote { border-left-color: #8b949e; }
.markdown-body hr { border-color: #30363d; }
';
document.head.appendChild(style);
})();
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
GitHub - FrontEndRoad/html5-frame: HTML5制作场景应用基础模板 · GitHub
Skip to content
BranchesTags
Latest commit
History
22 Commits
Folders and files
NameName
Last commit message
Last commit date
css
css
images
images
js
js
music
music
index.html
index.html
readme.txt
readme.txt
Repository files navigation
/* -------------------------------------------------------------
@ 名称：移动H5场景模板
@ 版本：v1.0
@ 作者：繁花落尽|cici
@ 时间：2015/10/15
*/
项目结构：
入口演示页：index.html
CSS文件组成：animate.css 动画库--公用 style.css 站点主样式
small.css 小屏样式
JS文件组成： 引用jQuery/Zepto库
viewport.js 视窗缩放
pxloader-images.min.js 预加载
pageSlide.js 全屏页面滑动效果【可自定义添加animate.css里面任意动画】
base.js 自己整理的JS库，主要包含横竖屏判断，背景音乐，判断设备，微信分享等功能
main.js 项目主JS，根据需求自己定义
music文件： bg.mp3 根据项目需求，添加背景音乐
images文件： 项目引用图片
滑屏部分核心代码：
function pageMove(tw){
var lastPage = ".pg"+last,
nowPage = ".pg"+now;
switch(tw) {
case towards.up:
outClass = 'fadeOut';
inClass = 'fadeIn delay300';
break;
case towards.down:
outClass = 'fadeOut';
inClass = 'fadeIn delay300';
break;
}
isAnimating = true;
$(nowPage).show();
$(lastPage).addClass(outClass);
$(nowPage).addClass(inClass);
setTimeout(function(){
$(lastPage).removeClass('current');
$(lastPage).removeClass(outClass);
$(lastPage).hide();
$(lastPage).find("img, div").hide();
$(nowPage).addClass('current');
$(nowPage).removeClass(inClass);
$(nowPage).find("img, div").show();
isAnimating = false;
},600);
}
封装一个滑屏动作方法，判断当前手势为swipeUp or swipeDown时，传入方向参数，调用此方法。动画添加通过outclass/inclass巧妙的控制，这里可根据规则引用animate.css库里的任意动画。
base.js 基础库，主要通过一个构造函数来存放当前项目基础功能，如下：
var Cici = function(file){}
Cici.prototype = {
init: function(){ ... },
orient: function(){ ... },
device: function(){ ... }
}
通过main.js引用，如下：
var h5 = new Cici('您的项目名'); //这里传参，便于图片加载及分享调用
h5.init();
建议：一般H5场景应用类项目，可把所有场景放置一个页面，便于控制及添加动画。同时，要做好图片压缩及代码优化等多方面工作。移动端项目总文件大小尽量控制在2M内，对于目前4G网络加载比较理想。

About
HTML5制作场景应用基础模板
Resources
Readme
Activity
Stars
1 star
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Highlight search terms from Google/DuckDuckGo/Bing referrer
(function() {
var ref = document.referrer;
var terms = [];
if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {
var url = new URL(ref);
var q = url.searchParams.get('q') || url.searchParams.get('p');
if (q) {
terms = q.split(/\s+/).filter(function(t) { return t.length > 2; });
}
}
if (terms.length === 0) return;
var style = document.createElement('style');
style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';
document.head.appendChild(style);
function highlight(node) {
if (node.nodeType === 3) { // text node
var text = node.textContent;
var found = false;
terms.forEach(function(term) {
var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\]\\]/g, '\\') + ')', 'gi');
if (regex.test(text)) {
found = true;
var frag = document.createDocumentFragment();
var parts = text.split(regex);
parts.forEach(function(part, i) {
if (i % 2 === 0) {
frag.appendChild(document.createTextNode(part));
} else {
var span = document.createElement('span');
span.className = 'userscript-highlight';
span.textContent = part;
frag.appendChild(span);
}
});
node.parentNode.replaceChild(frag, node);
}
});
} else if (node.nodeType === 1 && node.childNodes) { // element
var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];
if (!skipTags.includes(node.tagName)) {
Array.from(node.childNodes).forEach(highlight);
}
}
}
highlight(document.body);
// Re-highlight on dynamic content
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1 || node.nodeType === 3) highlight(node);
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
GitHub - FrontEndRoad/html5-frame: HTML5制作场景应用基础模板 · GitHub
Skip to content
BranchesTags
Latest commit
History
22 Commits
Folders and files
NameName
Last commit message
Last commit date
css
css
images
images
js
js
music
music
index.html
index.html
readme.txt
readme.txt
Repository files navigation
/* -------------------------------------------------------------
@ 名称：移动H5场景模板
@ 版本：v1.0
@ 作者：繁花落尽|cici
@ 时间：2015/10/15
*/
项目结构：
入口演示页：index.html
CSS文件组成：animate.css 动画库--公用 style.css 站点主样式
small.css 小屏样式
JS文件组成： 引用jQuery/Zepto库
viewport.js 视窗缩放
pxloader-images.min.js 预加载
pageSlide.js 全屏页面滑动效果【可自定义添加animate.css里面任意动画】
base.js 自己整理的JS库，主要包含横竖屏判断，背景音乐，判断设备，微信分享等功能
main.js 项目主JS，根据需求自己定义
music文件： bg.mp3 根据项目需求，添加背景音乐
images文件： 项目引用图片
滑屏部分核心代码：
function pageMove(tw){
var lastPage = ".pg"+last,
nowPage = ".pg"+now;
switch(tw) {
case towards.up:
outClass = 'fadeOut';
inClass = 'fadeIn delay300';
break;
case towards.down:
outClass = 'fadeOut';
inClass = 'fadeIn delay300';
break;
}
isAnimating = true;
$(nowPage).show();
$(lastPage).addClass(outClass);
$(nowPage).addClass(inClass);
setTimeout(function(){
$(lastPage).removeClass('current');
$(lastPage).removeClass(outClass);
$(lastPage).hide();
$(lastPage).find("img, div").hide();
$(nowPage).addClass('current');
$(nowPage).removeClass(inClass);
$(nowPage).find("img, div").show();
isAnimating = false;
},600);
}
封装一个滑屏动作方法，判断当前手势为swipeUp or swipeDown时，传入方向参数，调用此方法。动画添加通过outclass/inclass巧妙的控制，这里可根据规则引用animate.css库里的任意动画。
base.js 基础库，主要通过一个构造函数来存放当前项目基础功能，如下：
var Cici = function(file){}
Cici.prototype = {
init: function(){ ... },
orient: function(){ ... },
device: function(){ ... }
}
通过main.js引用，如下：
var h5 = new Cici('您的项目名'); //这里传参，便于图片加载及分享调用
h5.init();
建议：一般H5场景应用类项目，可把所有场景放置一个页面，便于控制及添加动画。同时，要做好图片压缩及代码优化等多方面工作。移动端项目总文件大小尽量控制在2M内，对于目前4G网络加载比较理想。

About
HTML5制作场景应用基础模板
Resources
Readme
Activity
Stars
1 star
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Strip utm_, fbclid, gclid, etc. from all links on page
(function() {
var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',
'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',
'ref', 'ref_src', 'source', 'medium', 'campaign'];
function cleanUrl(url) {
try {
var u = new URL(url, window.location.origin);
var changed = false;
trackingParams.forEach(function(p) {
if (u.searchParams.has(p)) {
u.searchParams.delete(p);
changed = true;
}
});
return changed ? u.toString() : url;
} catch (e) {
return url;
}
}
function cleanLinks() {
document.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
cleanLinks();
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1) {
if (node.tagName === 'A') cleanLinks();
node.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '
GitHub - FrontEndRoad/html5-frame: HTML5制作场景应用基础模板 · GitHub
Skip to content
BranchesTags
Latest commit
History
22 Commits
Folders and files
NameName
Last commit message
Last commit date
css
css
images
images
js
js
music
music
index.html
index.html
readme.txt
readme.txt
Repository files navigation
/* -------------------------------------------------------------
@ 名称：移动H5场景模板
@ 版本：v1.0
@ 作者：繁花落尽|cici
@ 时间：2015/10/15
*/
项目结构：
入口演示页：index.html
CSS文件组成：animate.css 动画库--公用 style.css 站点主样式
small.css 小屏样式
JS文件组成： 引用jQuery/Zepto库
viewport.js 视窗缩放
pxloader-images.min.js 预加载
pageSlide.js 全屏页面滑动效果【可自定义添加animate.css里面任意动画】
base.js 自己整理的JS库，主要包含横竖屏判断，背景音乐，判断设备，微信分享等功能
main.js 项目主JS，根据需求自己定义
music文件： bg.mp3 根据项目需求，添加背景音乐
images文件： 项目引用图片
滑屏部分核心代码：
function pageMove(tw){
var lastPage = ".pg"+last,
nowPage = ".pg"+now;
switch(tw) {
case towards.up:
outClass = 'fadeOut';
inClass = 'fadeIn delay300';
break;
case towards.down:
outClass = 'fadeOut';
inClass = 'fadeIn delay300';
break;
}
isAnimating = true;
$(nowPage).show();
$(lastPage).addClass(outClass);
$(nowPage).addClass(inClass);
setTimeout(function(){
$(lastPage).removeClass('current');
$(lastPage).removeClass(outClass);
$(lastPage).hide();
$(lastPage).find("img, div").hide();
$(nowPage).addClass('current');
$(nowPage).removeClass(inClass);
$(nowPage).find("img, div").show();
isAnimating = false;
},600);
}
封装一个滑屏动作方法，判断当前手势为swipeUp or swipeDown时，传入方向参数，调用此方法。动画添加通过outclass/inclass巧妙的控制，这里可根据规则引用animate.css库里的任意动画。
base.js 基础库，主要通过一个构造函数来存放当前项目基础功能，如下：
var Cici = function(file){}
Cici.prototype = {
init: function(){ ... },
orient: function(){ ... },
device: function(){ ... }
}
通过main.js引用，如下：
var h5 = new Cici('您的项目名'); //这里传参，便于图片加载及分享调用
h5.init();
建议：一般H5场景应用类项目，可把所有场景放置一个页面，便于控制及添加动画。同时，要做好图片压缩及代码优化等多方面工作。移动端项目总文件大小尽量控制在2M内，对于目前4G网络加载比较理想。

About
HTML5制作场景应用基础模板
Resources
Readme
Activity
Stars
1 star
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Auto-enable theater mode on YouTube
(function() {
function tryTheater() {
var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]');
if (btn && !btn.classList.contains('activated')) {
btn.click();
}
}
// Try immediately
tryTheater();
// Try after navigation (SPA)
var lastUrl = location.href;
setInterval(function() {
if (location.href !== lastUrl) {
lastUrl = location.href;
setTimeout(tryTheater, 500);
}
}, 1000);
// Also try on player load
var observer = new MutationObserver(tryTheater);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
GitHub - FrontEndRoad/html5-frame: HTML5制作场景应用基础模板 · GitHub
Skip to content
BranchesTags
Latest commit
History
22 Commits
Folders and files
NameName
Last commit message
Last commit date
css
css
images
images
js
js
music
music
index.html
index.html
readme.txt
readme.txt
Repository files navigation
/* -------------------------------------------------------------
@ 名称：移动H5场景模板
@ 版本：v1.0
@ 作者：繁花落尽|cici
@ 时间：2015/10/15
*/
项目结构：
入口演示页：index.html
CSS文件组成：animate.css 动画库--公用 style.css 站点主样式
small.css 小屏样式
JS文件组成： 引用jQuery/Zepto库
viewport.js 视窗缩放
pxloader-images.min.js 预加载
pageSlide.js 全屏页面滑动效果【可自定义添加animate.css里面任意动画】
base.js 自己整理的JS库，主要包含横竖屏判断，背景音乐，判断设备，微信分享等功能
main.js 项目主JS，根据需求自己定义
music文件： bg.mp3 根据项目需求，添加背景音乐
images文件： 项目引用图片
滑屏部分核心代码：
function pageMove(tw){
var lastPage = ".pg"+last,
nowPage = ".pg"+now;
switch(tw) {
case towards.up:
outClass = 'fadeOut';
inClass = 'fadeIn delay300';
break;
case towards.down:
outClass = 'fadeOut';
inClass = 'fadeIn delay300';
break;
}
isAnimating = true;
$(nowPage).show();
$(lastPage).addClass(outClass);
$(nowPage).addClass(inClass);
setTimeout(function(){
$(lastPage).removeClass('current');
$(lastPage).removeClass(outClass);
$(lastPage).hide();
$(lastPage).find("img, div").hide();
$(nowPage).addClass('current');
$(nowPage).removeClass(inClass);
$(nowPage).find("img, div").show();
isAnimating = false;
},600);
}
封装一个滑屏动作方法，判断当前手势为swipeUp or swipeDown时，传入方向参数，调用此方法。动画添加通过outclass/inclass巧妙的控制，这里可根据规则引用animate.css库里的任意动画。
base.js 基础库，主要通过一个构造函数来存放当前项目基础功能，如下：
var Cici = function(file){}
Cici.prototype = {
init: function(){ ... },
orient: function(){ ... },
device: function(){ ... }
}
通过main.js引用，如下：
var h5 = new Cici('您的项目名'); //这里传参，便于图片加载及分享调用
h5.init();
建议：一般H5场景应用类项目，可把所有场景放置一个页面，便于控制及添加动画。同时，要做好图片压缩及代码优化等多方面工作。移动端项目总文件大小尽量控制在2M内，对于目前4G网络加载比较理想。

About
HTML5制作场景应用基础模板
Resources
Readme
Activity
Stars
1 star
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Remove or un-stick sticky/fixed headers that block content
(function() {
function unstick() {
document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) {
if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {
el.style.position = 'static';
el.style.top = 'auto';
el.style.zIndex = 'auto';
}
});
}
unstick();
var observer = new MutationObserver(unstick);
observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });
})();
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
})();
GitHub - FrontEndRoad/html5-frame: HTML5制作场景应用基础模板 · GitHub
Skip to content
BranchesTags
Latest commit
History
22 Commits
Folders and files
NameName
Last commit message
Last commit date
css
css
images
images
js
js
music
music
index.html
index.html
readme.txt
readme.txt
Repository files navigation
/* -------------------------------------------------------------
@ 名称：移动H5场景模板
@ 版本：v1.0
@ 作者：繁花落尽|cici
@ 时间：2015/10/15
*/
项目结构：
入口演示页：index.html
CSS文件组成：animate.css 动画库--公用 style.css 站点主样式
small.css 小屏样式
JS文件组成： 引用jQuery/Zepto库
viewport.js 视窗缩放
pxloader-images.min.js 预加载
pageSlide.js 全屏页面滑动效果【可自定义添加animate.css里面任意动画】
base.js 自己整理的JS库，主要包含横竖屏判断，背景音乐，判断设备，微信分享等功能
main.js 项目主JS，根据需求自己定义
music文件： bg.mp3 根据项目需求，添加背景音乐
images文件： 项目引用图片
滑屏部分核心代码：
function pageMove(tw){
var lastPage = ".pg"+last,
nowPage = ".pg"+now;
switch(tw) {
case towards.up:
outClass = 'fadeOut';
inClass = 'fadeIn delay300';
break;
case towards.down:
outClass = 'fadeOut';
inClass = 'fadeIn delay300';
break;
}
isAnimating = true;
$(nowPage).show();
$(lastPage).addClass(outClass);
$(nowPage).addClass(inClass);
setTimeout(function(){
$(lastPage).removeClass('current');
$(lastPage).removeClass(outClass);
$(lastPage).hide();
$(lastPage).find("img, div").hide();
$(nowPage).addClass('current');
$(nowPage).removeClass(inClass);
$(nowPage).find("img, div").show();
isAnimating = false;
},600);
}
封装一个滑屏动作方法，判断当前手势为swipeUp or swipeDown时，传入方向参数，调用此方法。动画添加通过outclass/inclass巧妙的控制，这里可根据规则引用animate.css库里的任意动画。
base.js 基础库，主要通过一个构造函数来存放当前项目基础功能，如下：
var Cici = function(file){}
Cici.prototype = {
init: function(){ ... },
orient: function(){ ... },
device: function(){ ... }
}
通过main.js引用，如下：
var h5 = new Cici('您的项目名'); //这里传参，便于图片加载及分享调用
h5.init();
建议：一般H5场景应用类项目，可把所有场景放置一个页面，便于控制及添加动画。同时，要做好图片压缩及代码优化等多方面工作。移动端项目总文件大小尽量控制在2M内，对于目前4G网络加载比较理想。

About
HTML5制作场景应用基础模板
Resources
Readme
Activity
Stars
1 star
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages