├── 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 + '' 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 + '' 189 | + '
    '; 190 | contAdd(newHtml); //往容器中加入内容 191 | jigsaw.loadBig = true; // 大张壁纸已被加载 192 | return true; // 函数功能已完成 193 | } 194 | 195 | // 加载半张的壁纸 196 | jigsaw.halfHtml = '
    ' 197 | + '
    ' 198 | + ' ' + 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 += `

    ${title} | 立即下载

    `; 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 + '' 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 + '' 355 | + '
    '; 356 | contAdd(newHtml); //往容器中加入内容 357 | jigsaw.loadBig = true; // 大张壁纸已被加载 358 | return true; // 函数功能已完成 359 | } 360 | 361 | // 加载半张的壁纸 362 | jigsaw.halfHtml = '
    ' 363 | + '
    ' 364 | + ' ' + 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 | --------------------------------------------------------------------------------