上传html模板
This commit is contained in:
shuaikangzhou
290
app/data/html/0.html
Normal file
290
app/data/html/0.html
Normal file
File diff suppressed because one or more lines are too long
706
app/data/html/1.html
Normal file
706
app/data/html/1.html
Normal file
File diff suppressed because one or more lines are too long
1243
app/data/html/2.html
Normal file
1243
app/data/html/2.html
Normal file
File diff suppressed because one or more lines are too long
652
app/data/html/3.html
Normal file
652
app/data/html/3.html
Normal file
File diff suppressed because one or more lines are too long
1232
app/data/html/4.html
Normal file
1232
app/data/html/4.html
Normal file
File diff suppressed because one or more lines are too long
7567
app/data/html/5.html
Normal file
7567
app/data/html/5.html
Normal file
File diff suppressed because one or more lines are too long
1344
app/data/html/6.html
Normal file
1344
app/data/html/6.html
Normal file
File diff suppressed because one or more lines are too long
252
app/data/html/index.html
Normal file
252
app/data/html/index.html
Normal file
@@ -0,0 +1,252 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
|
||||
<title></title>
|
||||
<!--
|
||||
@time: 2018-08-04
|
||||
@version: 0.0.1
|
||||
@author: Mortal
|
||||
-->
|
||||
<style type="text/css">
|
||||
/*
|
||||
* 说明：
|
||||
* 标注为慎删的属性暂时认定可以删除，即在作者测试的环境下删除暂时没有影响，但不代表所有环境下删除都没有影响
|
||||
* 其他属性一概不可以删除
|
||||
*/
|
||||
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body,
|
||||
ul,
|
||||
li,
|
||||
a,
|
||||
p,
|
||||
div {
|
||||
/*慎删*/
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
#wrap {
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#main {
|
||||
top: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.page {
|
||||
/*谨删*/
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#pageUl {
|
||||
position: fixed;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!--
|
||||
每个全屏页面div的class为page，其中的图片的class为pageImg
|
||||
ul为右侧的导航栏
|
||||
pageUlLi和page的数目必须相等，修改数目时还应修改最下面js鼠标悬停的跳转代码
|
||||
-->
|
||||
<div id="wrap">
|
||||
<div id="main">
|
||||
<ul id="pageUl" type="circle">
|
||||
<li id="pageUlLi1" class="pageUlLi" style="color: red;"> </li>
|
||||
<li id="pageUlLi2" class="pageUlLi"> </li>
|
||||
<li id="pageUlLi3" class="pageUlLi"> </li>
|
||||
<li id="pageUlLi4" class="pageUlLi"> </li>
|
||||
<li id="pageUlLi5" class="pageUlLi"> </li>
|
||||
<li id="pageUlLi6" class="pageUlLi"> </li>
|
||||
<li id="pageUlLi7" class="pageUlLi"> </li>
|
||||
</ul>
|
||||
<div id="page1" class="page">
|
||||
<iframe src="0.html" frameborder="0" height="100%"
|
||||
width="100%"></iframe>
|
||||
</div>
|
||||
<div id="page2" class="page">
|
||||
<iframe src="1.html" frameborder="0" height="100%"
|
||||
width="100%"></iframe>
|
||||
</div>
|
||||
<div style="background-color: #8a6d3b" id="page3" class="page">
|
||||
<iframe src="2.html" frameborder="0" id="iframe0" height="100%"
|
||||
width="100%"></iframe>
|
||||
</div>
|
||||
<div style="background-color: #337ab7" id="page4" class="page">
|
||||
<iframe src="3.html" frameborder="0" id="iframe3" height="100%"
|
||||
width="100%"></iframe>
|
||||
</div>
|
||||
<div style="background-color: #337ab7" id="page5" class="page">
|
||||
<iframe src="4.html" frameborder="0" id="iframe4" height="100%"
|
||||
width="100%"></iframe>
|
||||
</div>
|
||||
<div style="background-color: #337ab7" id="page6" class="page">
|
||||
<iframe src="5.html" frameborder="0" id="iframe5" height="100%"
|
||||
width="100%"></iframe>
|
||||
</div>
|
||||
<div style="background-color: #337ab7" id="page7" class="page">
|
||||
<iframe src="6.html" frameborder="0" id="iframe6" height="100%"
|
||||
width="100%"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<script type="text/javascript">
|
||||
//改变窗口大小时调整图片大小
|
||||
window.onload = resizeImages;
|
||||
window.onresize = resizeImages;
|
||||
|
||||
function resizeImages() {
|
||||
$(function (e) {
|
||||
var screenWeight = document.documentElement.clientWidth;
|
||||
var screenHeight = document.documentElement.clientHeight;
|
||||
$("[name=pageImg]").css("width", screenWeight).css("height", screenHeight);
|
||||
$("#pageUl").css("bottom", screenHeight >> 1);
|
||||
});
|
||||
}
|
||||
|
||||
var index = 1;
|
||||
var curIndex = 1;
|
||||
var wrap = document.getElementById("wrap");
|
||||
var main = document.getElementById("main");
|
||||
var hei = document.body.clientHeight;
|
||||
wrap.style.height = hei + "px";
|
||||
var obj = document.getElementsByTagName("div");
|
||||
for (var i = 0; i < obj.length; i++) {
|
||||
if (obj[i].className == 'page') {
|
||||
obj[i].style.height = hei + "px";
|
||||
}
|
||||
}
|
||||
var pageNum = document.querySelectorAll(".page").length;
|
||||
//如果不加时间控制，滚动会过度灵敏，一次翻好几屏
|
||||
var startTime = 0, //翻屏起始时间
|
||||
endTime = 0,
|
||||
now = 0;
|
||||
//浏览器兼容
|
||||
if ((navigator.userAgent.toLowerCase().indexOf("firefox") != -1)) {
|
||||
document.addEventListener("DOMMouseScroll", scrollFun, false);
|
||||
} else if (document.addEventListener) {
|
||||
document.addEventListener("mousewheel", scrollFun, false);
|
||||
} else if (document.attachEvent) {
|
||||
document.attachEvent("onmousewheel", scrollFun);
|
||||
} else {
|
||||
document.onmousewheel = scrollFun;
|
||||
}
|
||||
|
||||
//滚动事件处理函数
|
||||
function scrollFun(event) {
|
||||
startTime = new Date().getTime();
|
||||
var delta = event.detail || (-event.wheelDelta);
|
||||
//mousewheel事件中的 “event.wheelDelta” 属性值：返回的如果是正值说明滚轮是向上滚动
|
||||
//DOMMouseScroll事件中的 “event.detail” 属性值：返回的如果是负值说明滚轮是向上滚动
|
||||
if ((endTime - startTime) < -1000) {
|
||||
if (delta > 0 && parseInt(main.offsetTop) > -(hei * (pageNum - 1))) {
|
||||
//向下滚动
|
||||
index++;
|
||||
toPage(index);
|
||||
}
|
||||
if (delta < 0 && parseInt(main.offsetTop) < 0) {
|
||||
//向上滚动
|
||||
index--;
|
||||
toPage(index);
|
||||
}
|
||||
endTime = new Date().getTime();
|
||||
} else {
|
||||
event.preventDefault();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function toPage(idx) {
|
||||
//jquery实现动画效果
|
||||
if(idx!=curIndex){
|
||||
index=idx
|
||||
var delta=idx - curIndex;
|
||||
now = now - delta * hei;
|
||||
$("#main").animate({
|
||||
top: (now + 'px')
|
||||
}, 500);
|
||||
curIndex = idx;
|
||||
//更改列表的选中项
|
||||
$(".pageUlLi").css("color", "black");
|
||||
$("#pageUlLi" + idx).css("color", "red");
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
// //鼠标悬停翻页
|
||||
// document.getElementById("pageUlLi1").onmouseover = function () {
|
||||
// toPage(1);
|
||||
// }
|
||||
// document.getElementById("pageUlLi2").onmouseover = function () {
|
||||
// toPage(2);
|
||||
// }
|
||||
// document.getElementById("pageUlLi3").onmouseover = function () {
|
||||
// toPage(3);
|
||||
// }
|
||||
// document.getElementById("pageUlLi4").onmouseover = function () {
|
||||
// toPage(4);
|
||||
// }
|
||||
// document.getElementById("pageUlLi5").onmouseover = function () {
|
||||
// toPage(5);
|
||||
// }
|
||||
//鼠标点击翻页
|
||||
document.getElementById("pageUlLi1").onclick = function () {
|
||||
toPage(1);
|
||||
}
|
||||
document.getElementById("pageUlLi2").onclick = function () {
|
||||
toPage(2);
|
||||
}
|
||||
document.getElementById("pageUlLi3").onclick = function () {
|
||||
toPage(3);
|
||||
}
|
||||
document.getElementById("pageUlLi4").onclick = function () {
|
||||
toPage(4);
|
||||
}
|
||||
document.getElementById("pageUlLi5").onclick = function () {
|
||||
toPage(5);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
</html>
|
||||
1
app/data/icons/back.svg
Normal file
1
app/data/icons/back.svg
Normal file
@@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1699273771059" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12579" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16"><path d="M700.371228 394.525472 174.028569 394.525472l255.952416-227.506551c12.389168-11.011798 13.505595-29.980825 2.492774-42.369993-11.011798-12.386098-29.977755-13.506619-42.367947-2.492774L76.425623 400.975371c-6.960529 5.496178-11.434423 14.003945-11.434423 23.561625 0 0.013303 0.001023 0.026606 0.001023 0.039909 0 0.01228-0.001023 0.025583-0.001023 0.037862 0 0.473791 0.01535 0.946558 0.037862 1.418302 0.001023 0.016373 0.001023 0.032746 0.001023 0.049119 0.39295 8.030907 3.992941 15.595186 10.034541 20.962427l315.040163 280.028764c5.717212 5.083785 12.83533 7.580652 19.925818 7.580652 8.274454 0 16.514115-3.403516 22.442128-10.07445 11.011798-12.387122 9.896394-31.357172-2.492774-42.367947l-256.128425-227.665163 526.518668 0c109.219517 0 198.075241 88.855724 198.075241 198.075241s-88.855724 198.075241-198.075241 198.075241L354.324888 850.696955c-16.57449 0-30.011524 13.437034-30.011524 30.011524s13.437034 30.011524 30.011524 30.011524l346.046341 0c142.31631 0 258.098289-115.783003 258.098289-258.098289S842.686515 394.525472 700.371228 394.525472z" fill="#272636" p-id="12580"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
1
app/data/icons/output.svg
Normal file
1
app/data/icons/output.svg
Normal file
@@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1699272892992" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4188" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16"><path d="M182.857143 146.285714h360.594286L768 370.834286V438.857143h146.285714V310.125714L604.16 0H36.571429v1024h877.714285v-146.285714H182.857143V146.285714z" fill="#272536" p-id="4189"></path><path d="M987.428571 658.285714l-219.428571-146.285714v73.142857H475.428571v146.285714h292.571429v73.142858l219.428571-146.285715z" fill="#272536" p-id="4190"></path></svg>
|
||||
|
After Width: | Height: | Size: 690 B |
Reference in New Issue
Block a user