-
Notifications
You must be signed in to change notification settings - Fork 54
/
view.html
159 lines (143 loc) · 4.64 KB
/
view.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<meta http-equiv=X-UA-Compatible content="IE=edge">
<meta name=viewport content="width=device-width,initial-scale=1">
<title>mmpic</title>
<style>
html,body{margin:0;padding:0;width:100%;height:100%}
body{background-size:contain}
#img{width:100%;height:100%}
.row{width:100%;position: fixed;bottom:5%;opacity:0.7}
.col-md-4{width:33.333%;float: left;text-align: center;line-height:80px;}
.mainbtn{color: #fff;background-color: #d9534f;border-color: #d43f3a;width:100%;height:80px;border-radius: 50px;font-size: 20px;}
#top{width: 100%; position: fixed;top:0;opacity: 0.7;height: 10%;}
.col-md-6{width:50%;float: left;text-align: center;}
#center{width:100%;height:70%;position: fixed;top:10%;}
#footer{position:fixed;bottom:0;text-align:center;width:100%}
</style>
</head>
<body>
<div id="top">
<div class="col-md-6">分类
<select id ="cat">
<option value="">全部</option>
<option value="xinggan">性感</option>
<option value="qingchun">清纯</option>
<option value="xiaohua">校花</option>
<option value="chemo">车模</option>
<option value="qipao">旗袍</option>
<option value="mingxing">明星</option>
</select>
</div>
<div class="col-md-6">幻灯
<select id="autoload">
<option value="">关</option>
<option value="3">3秒</option>
<option value="5">5秒</option>
<option value="10">10秒</option>
<option value="20">20秒</option>
<option value="40">40秒</option>
<option value="60">60秒</option>
</select>
</div>
</div>
<div id="center"></div>
<div class="row">
<div class="col-md-4" id="saveas">保存图片</div>
<div class="col-md-4"><button class="mainbtn" id="random">换一张</button></div>
<div class="col-md-4" id="imgRange">查看图集</div>
</div>
<div id="footer">技术支持：<a href="https://yantuz.cn/339.html" title="岩兔站-关注互联网折腾服务器分享码农的日常">岩兔站</a></div>
<script src="https://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script>
//随机换图；
function randImg(t=""){
t=$("#cat").val();
$("body").css("background","url(index.php?t="+t+"&v="+Math.random()+") no-repeat center").css("background-size","contain");
}
//图集
function imgRange(id,num){
$("body").css("background","url(index.php?id="+id+"&num="+num+"&v="+Math.random()+") no-repeat center").css("background-size","contain");
}
$("#saveas").click(function(){
var id = $.cookie("mmpic_id");
var num = $.cookie("mmpic_num");
var url = "index.php?down=1&id="+id+"&num="+num;
window.open(url);
});
//返回随机图模式
function returnRand(){
$("#random").text("换一张");
$("#imgRange").text("查看图集");
$.cookie("mmpic_mode","rand");
randImg();
}
randImg();
//点击自动换时触发
$("#random").click(function(){
if($.cookie("mmpic_mode") == "range"){
//图集模式，切换下一张
var id = $.cookie("mmpic_id");
var num = $.cookie("mmpic_num");
if(num == $.cookie("mmpic_count")){
returnRand();
}else{
num++;
//修改一下提示文字
if(num ==$.cookie("mmpic_count")){
$("#random").text("看完返回");
}
//下一张图
imgRange(id,num);
}
}else{
randImg();
}
//log();
});
//点击图集时
$("#imgRange").click(function(){
if($.cookie("mmpic_mode") == "range"){
returnRand();
}else{
id = $.cookie("mmpic_id");
//先显示第一张
imgRange(id,1);
$("#random").text("下一张");
$("#imgRange").text("返回");
//设置为图集模式
$.cookie("mmpic_mode","range");
}
});
function log(){
console.log("id:"+$.cookie("mmpic_id"));
console.log("page:"+$.cookie("mmpic_num"));
console.log("count:"+$.cookie("mmpic_count"));
console.log("mode:"+$.cookie("mmpic_mode"));
};
//隐藏按钮
$("#center").click(function(){
$(".row").slideToggle();
$("#top").slideToggle();
});
//幻灯
var timer;
$("#autoload").change(function(){
var sec = $(this).val();
//console.log(sec);
if(sec>0){
timer = setInterval(function(){
randImg();
},sec*1000);
$(".row").slideUp();
$("#top").slideUp();
}else{
clearInterval(timer);
}
});
</script>
</body>
</html>