├── image
├── dl.png
├── zd.png
└── dl-white.png
├── README.MD
├── api.php
├── css
├── onepage-scroll.css
└── wallpaper.css
├── js
├── jquery.lazyload.min.js
├── jquery.onepage-scroll.min.js
└── wallpaper.js
└── index.php
/image/dl.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/water1996/xben-wallpaper/HEAD/image/dl.png
--------------------------------------------------------------------------------
/image/zd.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/water1996/xben-wallpaper/HEAD/image/zd.png
--------------------------------------------------------------------------------
/image/dl-white.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/water1996/xben-wallpaper/HEAD/image/dl-white.png
--------------------------------------------------------------------------------
/README.MD:
--------------------------------------------------------------------------------
1 | 小笨自采集自适应壁纸网站源码
2 | ========
3 | 基于孟坤壁纸二次开发
4 |
5 | 壁纸种类多、自动更新,自动采集、瀑布流加载、全站 ajax!
6 |
7 | 壁纸采集自 360壁纸库、必应首页的每日图片以及金山词霸开放平台
8 |
9 | 相关api见 [https://funnnny.fun/article/detail?id=2](https://funnnny.fun/article/detail?id=2)
10 |
11 | 本作品禁止任何形式的倒卖,转载请注明出处!
12 |
13 |
14 | ### 更新日志
15 | -----
16 |
17 | #### 2020-07-21
18 | * 移动端预览增加横屏预览
19 |
20 | #### 2020-07-19
21 | * 首页壁纸、金山词霸每日英语、必应每日壁纸栏目适应移动端
22 |
23 | #### 2019-10-13
24 | * 支持https
25 | * 增加搜索入口,直接搜索自己想要的美图
26 |
27 |
28 | ### 相关链接
29 | -----
30 | **壁纸在线演示** [https://funnnny.fun/funny/bizhi/](https://funnnny.fun/funny/bizhi/)
31 |
32 | **壁纸详细介绍** [https://funnnny.fun/article/detail?id=3](https://funnnny.fun/article/detail?id=3)
33 |
34 | **GitHub** [https://github.com/water1996/xben-wallpaper](https://github.com/water1996/xben-wallpaper)
35 |
--------------------------------------------------------------------------------
/api.php:
--------------------------------------------------------------------------------
1 | j.failure_limit)return!1}else c.trigger("appear"),b=0})}var h,i=this,j={threshold:0,failure_limit:0,event:"scroll",effect:"show",container:b,data_attribute:"original",skip_invisible:!0,appear:null,load:null,placeholder:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC"};return f&&(d!==f.failurelimit&&(f.failure_limit=f.failurelimit,delete f.failurelimit),d!==f.effectspeed&&(f.effect_speed=f.effectspeed,delete f.effectspeed),a.extend(j,f)),h=j.container===d||j.container===b?e:a(j.container),0===j.event.indexOf("scroll")&&h.bind(j.event,function(){return g()}),this.each(function(){var b=this,c=a(b);b.loaded=!1,(c.attr("src")===d||c.attr("src")===!1)&&c.is("img")&&c.attr("src",j.placeholder),c.one("appear",function(){if(!this.loaded){if(j.appear){var d=i.length;j.appear.call(b,d,j)}a("
").bind("load",function(){var d=c.attr("data-"+j.data_attribute);c.hide(),c.is("img")?c.attr("src",d):c.css("background-image","url('"+d+"')"),c[j.effect](j.effect_speed),b.loaded=!0;var e=a.grep(i,function(a){return!a.loaded});if(i=a(e),j.load){var f=i.length;j.load.call(b,f,j)}}).attr("src",c.attr("data-"+j.data_attribute))}}),0!==j.event.indexOf("scroll")&&c.bind(j.event,function(){b.loaded||c.trigger("appear")})}),e.bind("resize",function(){g()}),/(?:iphone|ipod|ipad).*os 5/gi.test(navigator.appVersion)&&e.bind("pageshow",function(b){b.originalEvent&&b.originalEvent.persisted&&i.each(function(){a(this).trigger("appear")})}),a(c).ready(function(){g()}),this},a.belowthefold=function(c,f){var g;return g=f.container===d||f.container===b?(b.innerHeight?b.innerHeight:e.height())+e.scrollTop():a(f.container).offset().top+a(f.container).height(),g<=a(c).offset().top-f.threshold},a.rightoffold=function(c,f){var g;return g=f.container===d||f.container===b?e.width()+e.scrollLeft():a(f.container).offset().left+a(f.container).width(),g<=a(c).offset().left-f.threshold},a.abovethetop=function(c,f){var g;return g=f.container===d||f.container===b?e.scrollTop():a(f.container).offset().top,g>=a(c).offset().top+f.threshold+a(c).height()},a.leftofbegin=function(c,f){var g;return g=f.container===d||f.container===b?e.scrollLeft():a(f.container).offset().left,g>=a(c).offset().left+f.threshold+a(c).width()},a.inviewport=function(b,c){return!(a.rightoffold(b,c)||a.leftofbegin(b,c)||a.belowthefold(b,c)||a.abovethetop(b,c))},a.extend(a.expr[":"],{"below-the-fold":function(b){return a.belowthefold(b,{threshold:0})},"above-the-top":function(b){return!a.belowthefold(b,{threshold:0})},"right-of-screen":function(b){return a.rightoffold(b,{threshold:0})},"left-of-screen":function(b){return!a.rightoffold(b,{threshold:0})},"in-viewport":function(b){return a.inviewport(b,{threshold:0})},"above-the-fold":function(b){return!a.belowthefold(b,{threshold:0})},"right-of-fold":function(b){return a.rightoffold(b,{threshold:0})},"left-of-fold":function(b){return!a.rightoffold(b,{threshold:0})}})}(jQuery,window,document);
--------------------------------------------------------------------------------
/index.php:
--------------------------------------------------------------------------------
1 |
17 |
33 |
34 |
35 |
36 |
37 |
38 |
39 | 小笨电脑壁纸
40 |
41 | ";
44 | }
45 | ?>
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
95 |
96 |
97 |
98 |
99 |
100 |
101 |
小笨壁纸加载中……
102 |

104 |
105 |
106 |
107 |
108 |
109 |
110 |
111 |
112 |
113 |
114 |
115 |
116 |
117 |
--------------------------------------------------------------------------------
/js/jquery.onepage-scroll.min.js:
--------------------------------------------------------------------------------
1 | !function(e){var t={sectionContainer:"section",easing:"ease",animationTime:1e3,pagination:true,updateURL:false,keyboard:true,beforeMove:null,afterMove:null,loop:true,responsiveFallback:false,direction:"vertical"};e.fn.swipeEvents=function(){return this.each(function(){function i(e){var i=e.originalEvent.touches;if(i&&i.length){t=i[0].pageX;n=i[0].pageY;r.bind("touchmove",s)}}function s(e){var i=e.originalEvent.touches;if(i&&i.length){var o=t-i[0].pageX;var u=n-i[0].pageY;if(o>=50){r.trigger("swipeLeft")}if(o<=-50){r.trigger("swipeRight")}if(u>=50){r.trigger("swipeUp")}if(u<=-50){r.trigger("swipeDown")}if(Math.abs(o)>=50||Math.abs(u)>=50){r.unbind("touchmove",s)}}}var t,n,r=e(this);r.bind("touchstart",i)})};e.fn.onepage_scroll=function(n){function o(){var t=false;var n=typeof r.responsiveFallback;if(n=="number"){t=e(window).width()0){if(typeof r.beforeMove=="function")r.beforeMove(next.data("index"));current.removeClass("active");next.addClass("active");e(".onepage-pagination li a"+".active").removeClass("active");e(".onepage-pagination li a"+"[data-index='"+t+"']").addClass("active");e("body")[0].className=e("body")[0].className.replace(/\bviewing-page-\d.*?\b/g,"");e("body").addClass("viewing-page-"+next.data("index"));pos=(t-1)*100*-1;if(history.replaceState&&r.updateURL==true){var n=window.location.href.substr(0,window.location.href.indexOf("#"))+"#"+(t-1);history.pushState({},document.title,n)}i.transformPage(r,pos,t)}};i.addClass("onepage-wrapper").css("position","relative");e.each(s,function(t){e(this).css({position:"absolute",top:topPos+"%"}).addClass("section").attr("data-index",t+1);e(this).css({position:"absolute",left:r.direction=="horizontal"?leftPos+"%":0,top:r.direction=="vertical"||r.direction!="horizontal"?topPos+"%":0});if(r.direction=="horizontal")leftPos=leftPos+100;else topPos=topPos+100;if(r.pagination==true){paginationList+=""}});i.swipeEvents().bind("swipeDown",function(t){if(!e("body").hasClass("disabled-onepage-scroll"))t.preventDefault();i.moveUp()}).bind("swipeUp",function(t){if(!e("body").hasClass("disabled-onepage-scroll"))t.preventDefault();i.moveDown()});if(r.pagination==true){if(e("ul.onepage-pagination").length<1)e("").prependTo("body");if(r.direction=="horizontal"){posLeft=i.find(".onepage-pagination").width()/2*-1;i.find(".onepage-pagination").css("margin-left",posLeft)}else{posTop=i.find(".onepage-pagination").height()/2*-1;i.find(".onepage-pagination").css("margin-top",posTop)}e("ul.onepage-pagination").html(paginationList)}if(window.location.hash!=""&&window.location.hash!="#1"){init_index=window.location.hash.replace("#","");if(parseInt(init_index)<=total&&parseInt(init_index)>0){e(r.sectionContainer+"[data-index='"+init_index+"']").addClass("active");e("body").addClass("viewing-page-"+init_index);if(r.pagination==true)e(".onepage-pagination li a"+"[data-index='"+init_index+"']").addClass("active");next=e(r.sectionContainer+"[data-index='"+init_index+"']");if(next){next.addClass("active");if(r.pagination==true)e(".onepage-pagination li a"+"[data-index='"+init_index+"']").addClass("active");e("body")[0].className=e("body")[0].className.replace(/\bviewing-page-\d.*?\b/g,"");e("body").addClass("viewing-page-"+next.data("index"));if(history.replaceState&&r.updateURL==true){var a=window.location.href.substr(0,window.location.href.indexOf("#"))+"#"+init_index;history.pushState({},document.title,a)}}pos=(init_index-1)*100*-1;i.transformPage(r,pos,init_index)}else{e(r.sectionContainer+"[data-index='1']").addClass("active");e("body").addClass("viewing-page-1");if(r.pagination==true)e(".onepage-pagination li a"+"[data-index='1']").addClass("active")}}else{e(r.sectionContainer+"[data-index='1']").addClass("active");e("body").addClass("viewing-page-1");if(r.pagination==true)e(".onepage-pagination li a"+"[data-index='1']").addClass("active")}if(r.pagination==true){e(".onepage-pagination li a").click(function(){var t=e(this).data("index");i.moveTo(t)})}e(document).bind("mousewheel DOMMouseScroll MozMousePixelScroll",function(t){t.preventDefault();var n=t.originalEvent.wheelDelta||-t.originalEvent.detail;if(!e("body").hasClass("disabled-onepage-scroll"))u(t,n)});if(r.responsiveFallback!=false){e(window).resize(function(){o()});o()}if(r.keyboard==true){e(document).keydown(function(t){var n=t.target.tagName.toLowerCase();if(!e("body").hasClass("disabled-onepage-scroll")){switch(t.which){case 38:if(n!="input"&&n!="textarea")i.moveUp();break;case 40:if(n!="input"&&n!="textarea")i.moveDown();break;case 32:if(n!="input"&&n!="textarea")i.moveDown();break;case 33:if(n!="input"&&n!="textarea")i.moveUp();break;case 34:if(n!="input"&&n!="textarea")i.moveDown();break;case 36:i.moveTo(1);break;case 35:i.moveTo(total);break;default:return}}})}return false}}(window.jQuery)
2 |
--------------------------------------------------------------------------------
/css/wallpaper.css:
--------------------------------------------------------------------------------
1 |
2 | * {
3 | padding: 0;
4 | margin: 0;
5 | font-family: Microsoft Yahei, "微软雅黑", "Helvetica Neue", Helvetica, Hiragino Sans GB, WenQuanYi Micro Hei, sans-serif;
6 | }
7 |
8 | li {
9 | list-style-type: none;
10 | }
11 |
12 | /* 滚动条美化 */
13 | ::-webkit-scrollbar-track-piece {
14 | background-color: transparent;
15 | }
16 |
17 | ::-webkit-scrollbar {
18 | width: 9px;
19 | height: 8px;
20 | }
21 |
22 | ::-webkit-scrollbar-thumb {
23 | background-color: rgb(192, 199, 210);
24 | -webkit-border-radius: 7px;
25 | }
26 |
27 | ::-webkit-scrollbar-thumb:hover {
28 | background-color: #9f9f9f;
29 | }
30 |
31 | ::-webkit-scrollbar-arrow {
32 | color: #F00;
33 | backgound: #0F0;
34 | }
35 |
36 | body {
37 | overflow-y: scroll;
38 | height: 100%;
39 | background-color: #f2f3f4 !important;
40 | -moz-background-size: cover;
41 | -ms-background-size: cover;
42 | -webkit-background-size: cover;
43 | background-size: cover;
44 | }
45 |
46 | /* 页面导航栏 */
47 | .banner {
48 | position: fixed;
49 | z-index: 99999;
50 | height: auto;
51 | width: 100%;
52 | line-height: 50px;
53 | font-size: 16px;
54 | background-color: #fff;
55 | opacity: 0.77;
56 | -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=77);
57 | filter: alpha(opacity=77);
58 | transition: all 0.25s ease;
59 | -webkit-transition: all 0.25s ease;
60 | -moz-transition: all 0.25s ease;
61 | -o-transition: all 0.25s ease;
62 | -ms-transition: all 0.25s ease;
63 | }
64 |
65 | .banner:hover {
66 | opacity: 0.99;
67 | -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=99);
68 | filter: alpha(opacity=99);
69 | }
70 |
71 | /* 网站标题 */
72 | .banner .webTitle {
73 | font-size: 28px;
74 | font-weight: normal;
75 | display: inline-block;
76 | padding: 0 10px;
77 | color: #56AB78;;
78 | cursor: pointer;
79 | }
80 |
81 | /* 只有chrome才能这么用…… */
82 | @media screen and (-webkit-min-device-pixel-ratio: 0) {
83 | .banner .webTitle {
84 | background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2), color-stop(0.85, #ff2), color-stop(1, #f22));
85 | color: transparent;
86 | -webkit-background-clip: text;
87 | }
88 | }
89 |
90 | #banner {
91 | float: right;
92 | }
93 |
94 | #banner a {
95 | text-decoration: none;
96 | color: #000;
97 | }
98 |
99 | #banner li {
100 | height: 100%;
101 | display: inline-block;
102 | padding: 0 10px;
103 | cursor: pointer;
104 | font-size: 15px;
105 | list-style-type: none;
106 | }
107 |
108 | #banner li:hover, #banner li:hover a {
109 | color: #666;
110 | }
111 |
112 | /* 壁纸分类 */
113 | .tags:hover #tags {
114 | display: block;
115 | }
116 |
117 | #tags {
118 | z-index: 9999;
119 | display: none;
120 | position: absolute;
121 | width: 210px;
122 | line-height: 35px;
123 | background-color: #fff;
124 | border-top: 2px solid #9EAFFF;
125 | font-size: 14px;
126 | }
127 |
128 | #tags li {
129 | width: 90px;
130 | float: left;
131 | padding: 0 0 0 15px;
132 | color: #000;
133 | }
134 |
135 | #tags li:hover {
136 | background-color: #eee;
137 | }
138 |
139 | /* 页面主体部分 */
140 | .xben-container {
141 | padding-top: 50px;
142 | position: relative;
143 | width: 100%;
144 | height: 100%;
145 | }
146 |
147 | body[class *=viewing-page] .xben-container {
148 | padding-top: 0px;
149 | }
150 |
151 | #walBox {
152 | height: 100%;
153 | }
154 |
155 | /* 拼图框架 */
156 | .jigsaw .item {
157 | float: left;
158 | position: relative;
159 | }
160 |
161 | .jigsaw img {
162 | width: 100%;
163 | height: 100%;
164 | }
165 |
166 | /* 四分之一宽度 */
167 | .jigsaw .quater {
168 | width: 25%;
169 | display: inline-block;
170 | background: #999;
171 | }
172 |
173 | /* 一半宽度 */
174 | .jigsaw .half {
175 | width: 50%;
176 | display: inline-block;
177 | background: #EEE;
178 | }
179 |
180 | /* 每个小图片框 */
181 | .oneImg {
182 | position: relative;
183 | /*z-index: 2;*/
184 | overflow: hidden;
185 | transition: all 0.25s ease;
186 | -webkit-transition: all 0.25s ease;
187 | -moz-transition: all 0.25s ease;
188 | -o-transition: all 0.25s ease;
189 | -ms-transition: all 0.25s ease;
190 | }
191 |
192 | .oneImg:hover {
193 | z-index: 22;
194 | -moz-box-shadow: 0px 0px 20px #000000;
195 | -webkit-box-shadow: 0px 0px 20px #000000;
196 | box-shadow: 0px 0px 20px #000000;
197 | }
198 |
199 | .oneImg:hover .down {
200 | right: 0;
201 | display: inline-block;
202 | }
203 |
204 |
205 | /* 加载更多 */
206 | #loadmore {
207 | text-align: center;
208 | line-height: 40px;
209 | display: none;
210 | color: #666;
211 | }
212 |
213 | /* 必应翻页 */
214 | #walBox .section {
215 | -moz-background-size: cover;
216 | /*背景图片拉伸以铺满全屏*/
217 | -ms-background-size: cover;
218 | -webkit-background-size: cover;
219 | background-size: cover;
220 | color: #fff;
221 | position: relative;
222 | }
223 |
224 | #walBox .note {
225 | font-size: 14px;
226 | position: absolute;
227 | left: 10px;
228 | bottom: 10px;
229 | text-shadow: 0 0 5px #000000;
230 | color: #fff;
231 | }
232 | #walBox .xben-note{
233 | bottom: 60px;
234 | }
235 | /* 右侧翻页小点 */
236 | .onepage-pagination {
237 | top: 100px !important;
238 | }
239 |
240 | /* 右侧小球 */
241 | #toolBall {
242 | display: none;
243 | position: fixed;
244 | right: 20px;
245 | bottom: 20px;
246 | z-index: 999;
247 | width: 50px;
248 | height: 50px;
249 | border-radius: 50PX;
250 | background-position: center;
251 | background-size: 20px 20px;
252 | opacity: 0.77;
253 | -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=77);
254 | filter: alpha(opacity=77);
255 | transition: all 0.25s ease;
256 | -webkit-transition: all 0.25s ease;
257 | -moz-transition: all 0.25s ease;
258 | -o-transition: all 0.25s ease;
259 | -ms-transition: all 0.25s ease;
260 | background-color: rgb(22, 160, 134);
261 | }
262 |
263 | #toolBall:hover {
264 | opacity: 0.98;
265 | -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=98);
266 | filter: alpha(opacity=98);
267 | }
268 |
269 | /* 下载必应图片时显示下载图标 */
270 | .downBing {
271 | background: url("../image/dl-white.png") no-repeat;
272 | }
273 |
274 | /* 返回顶部时显示返回顶部图标 */
275 | .uptoTop {
276 | background: #666 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAADAFBMVEX///8TkhEmliImpSQzMzM5uTFCxEBOwEtU1lJl1ENm1ERn1UVn1UZo1Udq1Ulr1kps1kxu105x11J12VZ32Vl52lt+22GA22OF3WqK3nCM33ON33SR4HiZmZmZy5qZ44Od0aCd5Iifn5+g0p+mpqam5pKn55Sq26isrKys6Jmx6Z+zs7O5ubm8vLy+vr6+7bC/v7/AwMDBwcHCwsLDw8PExMTFxcXGxsbHx8fH77rIyMjJycnKysrK8L7Ly8vL8MDMzMzNzc3N8cPOzs7Pz9DP8sTQ0NDQ0NHS0tLU1NTU1NXW1tbZ2dna2tvb29vd3d3f39/g4ODg4OHg9tnh4eHh6dzi4uPj4+Tj993k5OTl5eXm5ubm5ufm5+Tn5+fo5+To6OLo6Ojp6enp7ubp7vDp+eTq6uXq6urr6+vr7/Ls7Ons7Ozt7e3u7u7u8e3v6+jv7+/w7+vw8PDx8fHy8vLy9Pby++/z8/Dz8/Pz9fL09PT09fb09vP0/PL19fX19vj29vb39fb39/f49PP4+Pj4/ff5+ff5+fn5+/n6+Pv6+vj6+vr6+vz6/fj6/vn7+/v7/Pz7/vv8/Pz8/fn9/f39/v3+hDP+k0z+oWP+rnn+uo3+wkn+wkr+w03+xlb+x1n+yFz+zGf+zWv+z3H+0HL+1H7+2In+25T+3p3+/f7+/v7+//7/ZgD/cBD/eSD/gzD/jED/llD/oGD/qXD/sn//vI//xZ//z6//z7D/2L//4Mz/4aT/4s//46z/59j/6b3/6sL/7N//7uL/787/8NH/8tj/8+v/9e//9+f/9/L/+ev/+/j//Pb//fz//vv//vz///////7S0tLT09PU1NTV1dXW1tbX19fY2NjZ2dna2trb29vc3Nzd3d3e3t7f39/g4ODh4eHi4uLj4+Pk5OTl5eXm5ubn5+fo6Ojp6enq6urr6+vs7Ozt7e3u7u7v7+/w8PDx8fHy8vLz8/P09PT19fX29vb39/f4+Pj5+fn6+vr7+/v8/Pz9/f3+/v7///+DxIdfAAAAAXRSTlMAQObYZgAAADlJREFUKM9jYBjs4OJFXOLYZS5exC5z8SJ2GYgYpgxMBF0GwUeVQebhYuPWDedfxO6Siwy43T4YAQD2mUY34y3BtwAAAABJRU5ErkJggg==) no-repeat;
277 | }
278 |
279 | /* 下载框 */
280 | .down {
281 | box-sizing: border-box;
282 | position: absolute;
283 | top: 0;
284 | height: auto;
285 | background: #000;
286 | background: rgba(0, 0, 0, .7);
287 | filter: alpha(opacity=70);
288 | font-size: 13px;
289 | padding: 10px;
290 | line-height: 22px;
291 | right: -130px;
292 | transition: all 0.25s ease;
293 | -webkit-transition: all 0.25s ease;
294 | -moz-transition: all 0.25s ease;
295 | -o-transition: all 0.25s ease;
296 | -ms-transition: all 0.25s ease;
297 | overflow-y: auto;
298 | }
299 |
300 | .down li {
301 | background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQBAMAAADt3eJSAAAAIVBMVEUAAADe3t7e3t7e3t7e3t7e3t7e3t7e3t7e3t7e3t7e3t4RmXU5AAAACnRSTlMAsKAQW6Z5c2lOCqK00wAAAEJJREFUCNdjwAaYVq1SIMAwNl21KtgYyMhaBQTLgAx2EKMAJNe1atUKsGKWVascICZ6LYEazTkB1SpBMAAyVoEBAwBXFRj52xzkuAAAAABJRU5ErkJggg==) no-repeat;
302 | background-position: 0 2px;
303 | padding-left: 20px;
304 | }
305 |
306 | .down a {
307 | color: #fff;
308 | text-decoration: none;
309 | }
310 |
311 | .down a:hover {
312 | color: #fff;
313 | text-decoration: underline;
314 | }
315 |
316 | /* 每日英语英语原文 */
317 | .ciba-eng {
318 | cursor: pointer;
319 | }
320 |
321 | .ciba-eng:hover {
322 | text-decoration: underline;
323 | }
324 |
325 | /* 每日英语点赞 */
326 | .ciba-love {
327 | moz-user-select: -moz-none;
328 | -moz-user-select: none;
329 | -o-user-select: none;
330 | -khtml-user-select: none;
331 | -webkit-user-select: none;
332 | -ms-user-select: none;
333 | user-select: none;
334 | cursor: pointer;
335 | }
336 |
337 | .blur {
338 | -webkit-filter: blur(3px);
339 | -moz-filter: blur(3px);
340 | -o-filter: blur(3px);
341 | -ms-filter: blur(3px);
342 | filter: blur(3px);
343 | }
344 |
345 | /* 全屏展示的图片 */
346 | #full-img {
347 | position: fixed;
348 | width: 100%;
349 | height: 100%;
350 | left: 0;
351 | top: 0;
352 | z-index: 9999999;
353 | }
354 |
355 | #xbenSearchBtn {
356 | margin-left: 10px;
357 | }
358 |
359 | .xben-day-img {
360 | width: 100%;
361 | height: 100%;
362 | position: fixed;
363 |
364 | }
365 |
366 | .xben-day-img > img {
367 | width: 100%;
368 | height: 100%;
369 | }
370 |
371 |
372 |
373 | #walBox .note > span {
374 | display: block;
375 | }
376 | .xben-nav{
377 | background-color:rgb(22, 160, 134) !important;
378 | box-shadow: 0 0 10px 1px rgba(0,0,0,0.2);
379 | }
380 | .xben-nav a{
381 | color: white !important;
382 | }
383 | .xben-nav .dropdown-item{
384 | color: #333 !important;
385 | }.xben-nav .dropdown-item:active{
386 |
387 | background-color: white;
388 | }
389 | .xben-nav .xben-toggler{
390 | border-color:#f2f3f4 !important;
391 | outline: none!important;
392 | }
393 | .xben-nav .xben-toggler .navbar-toggler-icon{
394 | background: url("../image/zd.png");
395 | background-size: 100% 100%;
396 | }
397 | .xben-dropdown-menu{
398 | max-height: 300px;
399 | overflow-y: auto;
400 | }
401 | .color-999{
402 | color: #999;
403 | }
404 | .xben-love{
405 | color: tomato;
406 | font-size: 14px;
407 | }
408 | .love-count{
409 | font-size: 14px;
410 | color: #999;
411 | }
412 | .xben-full-img{
413 | position: fixed;
414 | width: 100%;
415 | height: 100%;
416 | background-color:rgba(0,0,0,0.9);
417 | z-index: 99999999;
418 | justify-content: center;
419 | display: none;
420 | top: 0;
421 | }
422 | .xben-full-img>img{
423 | width: 100%;height:220px;position: absolute;top: 20%;
424 |
425 | }
426 | .xben-full-img>img.horizontal{
427 | transform:rotate(90deg);width: 150%;height:50%;top:24%;
428 | }
429 |
430 |
431 | .xben-full-img .horizontal-btn{
432 | position: absolute;
433 | top: 65%;
434 |
435 | }
436 | @media screen and (min-width: 768px) {
437 | #collapsibleNavbar{
438 |
439 | display: flex;
440 | justify-content: flex-end;
441 | }
442 | }
443 | @media screen and (max-width: 768px) {
444 | .jigsaw .item {
445 | width: 100%;
446 | height: auto !important;
447 | }
448 | #walBox .note {
449 | bottom: 60px;
450 | }
451 |
452 |
453 | .jigsaw .item .oneImg {
454 | height: auto !important;
455 | }
456 |
457 | .jigsaw .item.oneImg {
458 | height: auto !important;
459 | }
460 |
461 | .jigsaw.onepage-wrapper {
462 | margin-top: 56px;
463 | }
464 |
465 | .onepage-wrapper .section {
466 | height: 50% !important;
467 | }
468 |
469 | .xben-day-img {
470 | height: auto;
471 |
472 | }
473 |
474 | .xben-from {
475 | margin-top: 10px;
476 | }
477 |
478 | .text-360 {
479 | width: 68% !important;
480 | }
481 |
482 | #walBox .note {
483 | position: relative;
484 | margin-top: 20px;
485 | bottom: 0;
486 | left: 0;
487 | text-shadow: none;
488 | color: #191919;
489 | padding: 10px;
490 | font-size: 20px;
491 | }
492 |
493 | #walBox .note > span:nth-of-type(1) {
494 | margin-bottom: 10px;
495 | }
496 |
497 | #toolBall {
498 |
499 | bottom: 80px;
500 | opacity: 0.8;
501 | }
502 | .xben-by-img{
503 | width: 100%;
504 | display: flex;
505 | justify-content: center;
506 | margin: 30px 0;
507 | flex-direction: column;
508 |
509 | padding: 0 5%;
510 | }.xben-by-img>img{
511 | width: 100%;
512 | border-radius: 16px;
513 | margin: 6px 0;
514 | }
515 |
516 | .xben-by-img>p{
517 | font-size: 14px;
518 | margin: 0 !important;
519 | margin-top: 6px !important;
520 | padding: 0 6px;
521 | }
522 | .xben-by-img>p:nth-of-type(2){
523 | margin-top: 3px !important;
524 | }
525 |
526 |
527 | }
--------------------------------------------------------------------------------
/js/wallpaper.js:
--------------------------------------------------------------------------------
1 | var seting = {
2 | apiUrl: "api.php", // api地址
3 | ratio: 0.618, // 图片宽高比
4 | types: '360new', // 加载壁纸的种类
5 | downApi: 'http://image.baidu.com/search/down?tn=download&word=download&ie=utf8&fr=detail&url=' // 用于下载图片的api地址
6 | };
7 | var jigsaw = {
8 | count: 0, // 已加载的总数
9 | halfHtml: '',
10 | pageno: 0, // 最后一个加载的html
11 | value: '',
12 | loadBig: false, // 是否已加载最大的那个
13 | ajaxing: false //是否正在ajax加载
14 | };
15 | // 大小改变
16 | window.onresize = function () {
17 | resizeHeight();
18 | };
19 | // 初始化
20 | window.onload = function () {
21 | ajax360Tags();
22 | loadData(seting.types, true); // 初始加载壁纸
23 | loadData(seting.types, false);
24 | loadData(seting.types, false);
25 | resizeHeight();
26 | };
27 |
28 | $(function () {
29 |
30 | // 监听滚动消息
31 | $(window).scroll(function () {
32 |
33 | let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
34 |
35 | if (scrollTop + $(window).height() + 57 >= $(document).height() && scrollTop > 20) {
36 |
37 | if (seting.types === '360search') {
38 | loadDataSearch(seting.types, false, jigsaw.value);
39 | loadDataSearch(seting.types, false, jigsaw.value);
40 | } else {
41 | if (seting.types != "bing") {
42 | loadData(seting.types, false);
43 | loadData(seting.types, false);
44 | }
45 | }
46 | }
47 | if (seting.types != 'bing' && seting.types != 'ciba') {
48 | if (scrollTop >= 300) {
49 | $('#toolBall').fadeIn(400);
50 | } else {
51 | $('#toolBall').fadeOut(200);
52 | }
53 | }
54 | });
55 |
56 | $("#toolBall").click(function () {
57 | if (seting.types == 'bing' || seting.types == 'ciba') {
58 | return true;
59 | }
60 | $("html,body").animate({"scrollTop": top});
61 | return false;
62 | });
63 |
64 | // 点击关闭弹出层
65 | $("body").on("click", "#full-img", function () {
66 | $("#full-img").remove();
67 | });
68 |
69 | // 点击小图显示大图
70 | $("#walBox").on("click", "img", function () {
71 | showImg($(this).data('realurl'));
72 | });
73 | });
74 |
75 | // 加载壁纸容器中的壁纸
76 | function loadData(types, newload) {
77 | $(".navbar-collapse").removeClass("show");
78 | if (types != seting.types || newload === true) {
79 |
80 | seting.types = types;
81 | jigsaw = {
82 | count: 0, // 已加载的总数
83 | halfHtml: '', // 最后一个加载的html
84 | pageno: 0,
85 | value: '',
86 | loadBig: false, // 是否已加载最大的那个
87 | ajaxing: false //是否正在ajax加载
88 | };
89 | $("#walBox").html('');
90 | $(document).unbind('mousewheel DOMMouseScroll MozMousePixelScroll'); // 解除全屏滚动的绑定
91 | $(".onepage-pagination").remove();
92 | $("body").removeClass();
93 | $(".jigsaw").removeAttr("style");
94 | $("#toolBall").attr('href', 'javascript:void(0);');
95 | $("#toolBall").attr('class', 'uptoTop');
96 | $("#toolBall").attr('title', '返回顶部');
97 | $("#toolBall").hide();
98 | }
99 |
100 | switch (seting.types) {
101 | case 'bing': //加载必应壁纸
102 | ajaxBingWal(-1, 8);
103 | ajaxBingWal(7, 8);
104 | $("#toolBall").show();
105 | $("#toolBall").attr('class', 'downBing');
106 | $("#toolBall").attr('title', '下载这张图片');
107 | break;
108 |
109 | case 'ciba': // 加载金山词霸每日一句壁纸
110 | if (newload === false) return;
111 | ajaxCiba(1);
112 | $("#toolBall").show();
113 | $("#toolBall").attr('class', 'downBing');
114 | $("#toolBall").attr('title', '下载这张图片');
115 | break;
116 |
117 | default: // 加载来自360的壁纸
118 | ajax360Wal(seting.types, jigsaw.pageno, 10);
119 | }
120 | }
121 |
122 | // 加载壁纸容器中的壁纸
123 | function loadDataSearch(types, newload, content) {
124 | if (types != seting.types || newload === true) {
125 | seting.types = types;
126 | jigsaw = {
127 | count: 0, // 已加载的总数
128 | halfHtml: '', // 最后一个加载的html
129 | pageno: 0,
130 | value: '',
131 | loadBig: false, // 是否已加载最大的那个
132 | ajaxing: false //是否正在ajax加载
133 | };
134 | $("#walBox").html('');
135 | $(document).unbind('mousewheel DOMMouseScroll MozMousePixelScroll'); // 解除全屏滚动的绑定
136 | $(".onepage-pagination").remove();
137 | $("body").removeClass();
138 | $(".jigsaw").removeAttr("style");
139 | $("#toolBall").attr('href', 'javascript:void(0);');
140 | $("#toolBall").attr('class', 'uptoTop');
141 | $("#toolBall").attr('title', '返回顶部');
142 | $("#toolBall").hide();
143 | }
144 | switch (seting.types) {
145 | case '360search':
146 | jigsaw.value = content;
147 | ajax360WalSearch(seting.types, jigsaw.pageno, 10, content);
148 | break;
149 | }
150 | }
151 |
152 | resizeHeight();
153 |
154 | // 重新调整高度
155 | function resizeHeight() {
156 | switch (seting.types) {
157 | default:
158 | var newHeight = $("#walBox").width() * (seting.ratio / 2); // parseInt($(".jigsaw .half").css('width'))
159 | $(".jigsaw .item").css('height', newHeight);
160 | $(".jigsaw .Hhalf").css('height', newHeight / 2);
161 | }
162 | return true;
163 | }
164 |
165 | // 显示一张拼图壁纸
166 | function addJigsaw(img, alt) {
167 | var newHtml; // 新增的内容
168 | jigsaw.count++; // 已加载壁纸数自加
169 |
170 | if (jigsaw.halfHtml !== '') // 1/4 的壁纸,已加载完上面一半,接着加载下面那半
171 | {
172 | newHtml = ' '
173 | + '
![关键字:' + alt + ' ' + alt + ']()
'
174 | + '
'
175 | + '';
176 | contAdd(jigsaw.halfHtml + newHtml); //往容器中加入内容
177 | jigsaw.halfHtml = ''; // 另外半边加载完成
178 | return true; // 函数功能已完成
179 | }
180 |
181 | if (((jigsaw.count - 1) % 5) === 0) {
182 | jigsaw.loadBig = false;
183 | } // 新的一行,状态重置
184 |
185 | if ((jigsaw.loadBig === false) && ((Math.floor(Math.random() * 3) === 0) || ((jigsaw.count % 5) === 0))) // 随机加载大张壁纸
186 | {
187 | newHtml = ''
188 | + '
![关键字:' + alt + ' ' + alt + ']()
'
189 | + '
';
190 | contAdd(newHtml); //往容器中加入内容
191 | jigsaw.loadBig = true; // 大张壁纸已被加载
192 | return true; // 函数功能已完成
193 | }
194 |
195 | // 加载半张的壁纸
196 | jigsaw.halfHtml = ''
197 | + '
'
198 | + '
![关键字:' + alt + ' ' + alt + ']()
'
199 | + '
';
200 | return true;
201 | }
202 |
203 | // 往壁纸容器中加入内容
204 | function contAdd(html) {
205 | var myBox = $("#walBox"); // 装壁纸的容器
206 | var $newHtml = $(html);
207 | myBox.append($newHtml); // 加载到容器中
208 | $("img", $newHtml).lazyload({
209 | effect: 'fadeIn',
210 | threshold: 200 // 提前开始加载
211 | });
212 | }
213 | // ajax加载必应壁纸
214 | function ajaxBingWal(start, count) {
215 | $.ajax({
216 | type: "GET",
217 | url: seting.apiUrl,
218 | data: "cid=bing&start=" + start + "&count=" + count,
219 | dataType: "json",
220 | success: function (jsonData) {
221 | let newHtml = "";
222 | if (isPC()) {
223 | newHtml += '
', downUrl = '';
224 | $("#walBox").append(newHtml); // 全屏滚动插件css
225 | }
226 | for (var i = 0; i < jsonData.images.length; i++) {
227 | downUrl = seting.downApi+'http://cn.bing.com' + jsonData.images[i].url;
228 | if (isPC()) {
229 | newHtml += '
' + jsonData.images[i].copyright + '
';
230 | } else {
231 | let copyright = getParenthesesStr(jsonData.images[i].copyright);
232 | let title = jsonData.images[i].copyright.replace(copyright, "");
233 | copyright = copyright.substring(1, copyright.length - 1);
234 | newHtml += `
`;
235 | $("#toolBall").css("display", "none");
236 | }
237 |
238 | }
239 | $("#walBox").append(newHtml);
240 | if (isPC()) {
241 | $('#walBox').onepage_scroll({
242 | // sectionContainer: '#walBox',
243 | // direction: 'horizontal', // 水平滚动
244 | // pagination: false, // 不显示右侧圆点
245 | // easing: 'ease-in',
246 | loop: false, // 禁止循环滚动
247 | beforeMove: function (index) {
248 | $("#toolBall").attr('href', $(".section").eq(index - 1).attr('data-url'));
249 | $(".section").eq(index - 1).attr('style', 'background-image: url(' + $(".section").eq(index - 1).attr('data-img') + ')');
250 | },
251 | afterMove: function (index) {
252 | $(".section").eq(index).attr('style', 'background-image: url(' + $(".section").eq(index).attr('data-img') + ')');
253 | $(".section").eq(index - 2).attr('style', 'background-image: url(' + $(".section").eq(index - 2).attr('data-img') + ')');
254 | // $(".section").eq(index-1).attr('style','background-image: url('+ $(".section").eq(index-1).attr('data-img') +')');
255 | }
256 | });
257 | $("#toolBall").attr('href', $(".section").eq(0).attr('data-url'));
258 | $(".section").eq(0).attr('style', 'background-image: url(' + $(".section").eq(0).attr('data-img') + ')');
259 | }
260 | }
261 | });
262 | return true;
263 | }
264 | // ajax加载金山词霸每日图片
265 | function ajaxCiba(data) {
266 | $.ajax({
267 | type: "GET",
268 | url: "https://zhouxiaoben.info/iciba/dsapi/",
269 | dataType: "jsonp",
270 | jsonp: "callback",
271 | jsonpCallback:"jQuery111300015518879258571427_1609679126184",
272 | success: function (jsonData) {
273 | var newHtml = `

${jsonData.content}${jsonData.note} ♥ ${jsonData.love}
`;
274 | $("#walBox").append(newHtml);
275 | $("#toolBall").attr('href', seting.downApi + jsonData.picture2); // 下载链接
276 | }
277 | });
278 | return true;
279 | }
280 |
281 | // ajax加载360壁纸标签
282 | function ajax360Tags() {
283 | $.ajax({
284 | type: "GET",
285 | url: seting.apiUrl,
286 | data: "cid=360tags",
287 | dataType: "json",
288 | success: function (jsonData) {
289 | var newHtml = '';
290 | for (var i = 0; i < jsonData.data.length; i++) {
291 |
292 | newHtml += '
' + jsonData.data[i].category + '';
293 | }
294 | $("#xbenTags").append(newHtml);
295 | }
296 | });
297 | return true;
298 | }
299 |
300 | //ajax搜索360壁纸
301 | function ajax360WalSearch(cid, start, count, content) {
302 | if (jigsaw.ajaxing === true) return false;
303 | $("#loadmore").html('努力加载中……');
304 | $("#loadmore").show();
305 | jigsaw.ajaxing = true;
306 | jigsaw.pageno++;
307 | $.ajax({
308 | type: "GET",
309 | url: seting.apiUrl,
310 | data: "cid=" + cid + "&start=" + start + "&count=" + count + "&content=" + encodeURIComponent(content),
311 | dataType: "json",
312 | success: function (jsonData) {
313 | for (var i = 0; i < jsonData.data.list.length; i++) {
314 | addJigsawSearch(jsonData.data.list[i].url, jsonData.data.list[i].tag);
315 | }
316 | resizeHeight();
317 | jigsaw.ajaxing = false;
318 | if (jsonData.data.list.length === 0) {
319 | $("#loadmore").html('所有的壁纸都已经加载完啦!');
320 | } else {
321 | $("#loadmore").hide();
322 | }
323 | }
324 | });
325 | return true;
326 | }
327 |
328 | // 显示一张拼图壁纸(360搜索)
329 | function addJigsawSearch(img, alt) {
330 | var newHtml; // 新增的内容
331 | jigsaw.count++; // 已加载壁纸数自加
332 |
333 | if (jigsaw.halfHtml !== '') // 1/4 的壁纸,已加载完上面一半,接着加载下面那半
334 | {
335 |
336 | newHtml = '
'
337 | + '
![关键字:' + alt + ' ' + alt + ']()
'
338 | + '
'
339 | + '
';
340 | contAdd(jigsaw.halfHtml + newHtml); //往容器中加入内容
341 | jigsaw.halfHtml = ''; // 另外半边加载完成
342 | return true; // 函数功能已完成
343 | }
344 |
345 | if (((jigsaw.count - 1) % 5) === 0) {
346 | jigsaw.loadBig = false;
347 | } // 新的一行,状态重置
348 |
349 | if ((jigsaw.loadBig === false) && ((Math.floor(Math.random() * 3) === 0) || ((jigsaw.count % 5) === 0))) // 随机加载大张壁纸
350 | {
351 |
352 |
353 | newHtml = ''
354 | + '
![关键字:' + alt + ' ' + alt + ']()
'
355 | + '
';
356 | contAdd(newHtml); //往容器中加入内容
357 | jigsaw.loadBig = true; // 大张壁纸已被加载
358 | return true; // 函数功能已完成
359 | }
360 |
361 | // 加载半张的壁纸
362 | jigsaw.halfHtml = ''
363 | + '
'
364 | + '
![关键字:' + alt + ' ' + alt + ']()
'
365 | + '
';
366 | return true;
367 | }
368 |
369 | // ajax加载来自360的壁纸
370 | function ajax360Wal(cid, start, count) {
371 | if (jigsaw.ajaxing === true) return false;
372 |
373 | $("#loadmore").html('努力加载中……');
374 | $("#loadmore").show();
375 | jigsaw.ajaxing = true;
376 | jigsaw.pageno++;
377 | $.ajax({
378 | type: "GET",
379 | url: seting.apiUrl,
380 | data: "cid=" + cid + "&start=" + start + "&count=" + count,
381 | dataType: "json",
382 | success: function (jsonData) {
383 | for (var i = 0; i < jsonData.data.list.length; i++) {
384 | addJigsaw(jsonData.data.list[i].url, jsonData.data.list[i].tag);
385 | }
386 | resizeHeight();
387 | jigsaw.ajaxing = false;
388 | if (jsonData.data.list.length === 0) {
389 | $("#loadmore").html('所有的壁纸都已经加载完啦!');
390 | } else {
391 | $("#loadmore").hide();
392 | }
393 | }
394 | });
395 | return true;
396 | }
397 |
398 |
399 |
400 | // 解码360图片的链接,获得指定尺寸图片
401 | function decode360Url(oldUrl, width, height, quality) {
402 | return oldUrl.replace("r\/__85", "m\/" + parseInt(width) + "_" + parseInt(height) + "_" + quality);
403 | }
404 |
405 | function hoverJigsawSearch(obj) {
406 | if ($(obj).find('.down').length > 0) return true;
407 |
408 | var realUrl = $(obj).find('img').attr("data-realurl");
409 | var downBox = '';
410 | downBox = '
'
412 | $(obj).append(downBox);
413 | }
414 |
415 | // 同步改变浏览器标题
416 | function changeTitle(obj) {
417 | if ($(obj).html() == '') {
418 | $('title').html('小笨电脑壁纸-小笨在线壁纸-在线搜索');
419 | } else {
420 | $('title').html($(obj).html() + ' - 在线壁纸');
421 | }
422 | }
423 |
424 | var imgDom;
425 | // 全屏展示图片
426 | // 参数:图片链接
427 | function showImg(img) {
428 | if(isPC()){
429 | imgDom = $('
![]()
').attr('id', 'full-img').attr('src', img).appendTo('body');
430 | return;
431 | }
432 | if($(".xben-full-img").is(":hidden")){
433 | $(".xben-full-img").css("display","flex");
434 | $(".xben-full-img>img").attr("src",img);
435 | $(".xben-full-img>img").removeClass("horizontal");
436 | $(".horizontal-btn").show();
437 | }
438 |
439 | }
440 | //横屏显示
441 | $(".horizontal-btn").click(function(){
442 | $(".xben-full-img>img").addClass("horizontal");
443 | $(this).hide();
444 | })
445 |
446 | $(".xben-full-img").click(function(){
447 | $(this).hide();
448 | });
449 | $(".xben-full-img .horizontal-btn").click((e)=>{
450 | e.stopPropagation();
451 | })
452 |
453 | function loadData360Search() {
454 | var text = document.getElementById("360text").value;
455 | if (text === "") {
456 | text = '中国';
457 | }
458 | loadDataSearch('360search', true, text);
459 | }
460 |
461 | function isPC() {
462 | var userAgentInfo = navigator.userAgent;
463 | var Agents = ["Android", "iPhone",
464 | "SymbianOS", "Windows Phone",
465 | "iPad", "iPod"];
466 | var flag = true;
467 | for (var v = 0; v < Agents.length; v++) {
468 | if (userAgentInfo.indexOf(Agents[v]) > 0) {
469 | flag = false;
470 | break;
471 | }
472 | }
473 | return flag;
474 | }
475 | function getParenthesesStr(text) {
476 | let result = ''
477 | if ($.isEmptyObject(text))
478 | return result
479 | let regex = /\((.+?)\)/g;
480 | let options = text.match(regex)
481 | if (!$.isEmptyObject(options)) {
482 | let option = options[0]
483 | if (!$.isEmptyObject(option)) {
484 | result = option.substring(0, option.length)
485 | }
486 | }
487 | return result
488 | }
489 |
490 | console.info('小笨壁纸来源于:360壁纸库、必应首页壁纸以及金山词霸开放平台\n小笨分享站:https://zhouxiaoben.info\n基于孟坤壁纸二次开发\nGithub:https://github.com/water1996/xben-wallpaper');
491 |
--------------------------------------------------------------------------------