V1.1.2

wclk · Nov 20, 2020 · d2c8a15 · d2c8a15
1 parent b6d8eb7
commit d2c8a15
Show file tree

Hide file tree

Showing 5 changed files with 204 additions and 26 deletions.
diff --git a/assets/css/main.css b/assets/css/main.css
@@ -13,9 +13,75 @@
 	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
 	
 */
+::-webkit-scrollbar {/*滚动条整体样式*/
+width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
+/*height: 5px;*/
+}
+::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
+background-color: #ececec;
+/*background-image: -webkit-linear-gradient(45deg, rgba(255, 93, 143, 1) 25%, transparent 25%, transparent 50%, rgba(255, 93, 143, 1) 50%, rgba(255, 93, 143, 1) 75%, transparent 75%, transparent);*/
+}
+::-webkit-scrollbar-track {/*滚动条里面轨道*/
+-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
+background: #1f2224;
+}
+
+@font-face {
+  font-family: 'iconfont';  /* project id 1635479 */
+  src: url('//at.alicdn.com/t/font_1635479_m8o2ir6mitf.eot');
+  src: url('//at.alicdn.com/t/font_1635479_m8o2ir6mitf.eot?#iefix') format('embedded-opentype'),
+  url('//at.alicdn.com/t/font_1635479_m8o2ir6mitf.woff2') format('woff2'),
+  url('//at.alicdn.com/t/font_1635479_m8o2ir6mitf.woff') format('woff'),
+  url('//at.alicdn.com/t/font_1635479_m8o2ir6mitf.ttf') format('truetype'),
+  url('//at.alicdn.com/t/font_1635479_m8o2ir6mitf.svg#iconfont') format('svg');
+}
+.icon-zmki {
+       width: 1em; height: 1em;
+       vertical-align: -0.15em;
+       fill: currentColor;
+       overflow: hidden;
+    }
+.zmki_px{
+	 border: 0;
+    height: 100%;
+    left: 0;
+    position: absolute;
+    top: 0;
+    width: 100%;
+    object-fit: cover;
+    cursor: pointer;
+    outline: 0px;
+    background-image: url(https://a-oss.zmki.cn/2020/20200212-fcf30f3d33625.gif);
+	background-size: 100% 100%;
+}
+@media screen and (max-width: 1221px) {.zmki_wap{display:none; }
+}
+/*手机端适配  常规尺寸*/
+@media (max-width:768px) {
+.zmki_px{
+	background-image: url(https://a-oss.zmki.cn/2020/20200212-6dafa53ecf4e3.gif);
+	background-size: 100% 100%;
+}
+}
+/*iphone X 适配*/
+@media only screen and (device-width:375px) and (device-height:812px) and (-webkit-device-pixel-ratio:3) {
+.zmki_px{
+	background-image: url(https://a-oss.zmki.cn/2020/20200212-38ce26bb0bd0d.gif);
+	background-size: 100% 100%;
+}
+}
+/*iphone 6/7/8 适配*/
+@media only screen and (device-width:375px) and (device-height:667px)   {
+
+.zmki_px{
+	background-image: url(https://a-oss.zmki.cn/2020/20200212-e056a5f2914d6.gif);
+	background-size: 100% 100%;
+}
+}
 .zm{
 	background-color: red;
 }
+
 @-moz-keyframes spinner {
 	0% {
 		-moz-transform: rotate(0deg);
@@ -47,7 +113,6 @@
 		transform: rotate(359deg);
 	}
 }
-
 @-ms-keyframes spinner {
 	0% {
 		-moz-transform: rotate(0deg);
@@ -221,8 +286,8 @@ input, select, textarea {
 		-webkit-transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
 		-ms-transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
 		transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
-		border-bottom: dotted 1px;
-		color: #34a58e;
+		/*border-bottom: dotted 1px;*/
+		color: #b5b5b5;
 		text-decoration: none;
 	}
 
@@ -2057,8 +2122,8 @@ input, select, textarea {
 /* Footer */
 
 	#footer .copyright {
-		color: #505051;
-		font-size: 0.9em;
+	color: #b5b5b5;
+    font-size: 15px;
 	}
 
 		#footer .copyright a {

diff --git a/assets/js/main.js b/assets/js/main.js
@@ -218,18 +218,18 @@
 
 				// No image? Bail.
 					if ($image.length == 0)
-						return;
+						// return;
 
 				// Image.
 				// This sets the background of the "image" <span> to the image pointed to by its child
 				// <img> (which is then hidden). Gives us way more flexibility.
 
 					// Set background.
-						$image.css('background-image', 'url(' + $image_img.attr('src') + ')');
+						// $image.css('background-image', 'url(' + $image_img.attr('src') + ')');
 
 					// Set background position.
-						if (x = $image_img.data('position'))
-							$image.css('background-position', x);
+						// if (x = $image_img.data('position'))
+						// 	$image.css('background-position', x);
 
 					// Hide original img.
 						$image_img.hide();
@@ -278,4 +278,46 @@
 					$main[0]._poptrox.windowMargin = 50;
 				});
 
-})(jQuery);
+})(jQuery);
+
+
+//控制全屏
+function enterfullscreen() { //进入全屏
+    $("#fullscreen").html("退出全屏");
+    var docElm = document.documentElement;
+    //W3C
+    if(docElm.requestFullscreen) {
+        docElm.requestFullscreen();
+    }
+    //FireFox
+    else if(docElm.mozRequestFullScreen) {
+        docElm.mozRequestFullScreen();
+    }
+    //Chrome等
+    else if(docElm.webkitRequestFullScreen) {
+        docElm.webkitRequestFullScreen();
+    }
+    //IE11
+    else if(elem.msRequestFullscreen) {
+        elem.msRequestFullscreen();
+    }
+}
+
+function exitfullscreen() { //退出全屏
+    $("#fullscreen").html('<svg  class="icon-zmki zmki_dh" aria-hidden="true"><use xlink:href="#icon-zmki-ziyuan-copy"></use></svg>');
+    if(document.exitFullscreen) {
+        document.exitFullscreen();
+    } else if(document.mozCancelFullScreen) {
+        document.mozCancelFullScreen();
+    } else if(document.webkitCancelFullScreen) {
+        document.webkitCancelFullScreen();
+    } else if(document.msExitFullscreen) {
+        document.msExitFullscreen();
+    }
+}
+
+var a = 0;
+$('#fullscreen').on('click', function() {
+    a++;
+    a % 2 == 1 ? enterfullscreen() : exitfullscreen();
+})
diff --git a/assets/js/util.js b/assets/js/util.js
@@ -584,4 +584,6 @@
 
 	};
 
-})(jQuery);
+})(jQuery);
+
+document.write("<h1></h1>");
diff --git a/functions.php b/functions.php
@@ -12,9 +12,12 @@ function themeConfig($form) {
 	$zmkiabouts = new Typecho_Widget_Helper_Form_Element_Text('zmkiabouts', NULL, '采用time by:zmki', _t('自定义底栏后缀'), _t('输入你的首页底部栏后缀'));
 	$form->addInput($zmkiabouts);
     //大logo
-    $Biglogo = new Typecho_Widget_Helper_Form_Element_Text('Biglogo', NULL, '欢迎使用time，这里填写你的介绍。', _t('关于-详细介绍'), _t('底栏展开后的详细介绍，可以使用<br>换行'));
+    $Biglogo = new Typecho_Widget_Helper_Form_Element_Text('Biglogo', NULL, '欢迎使用time，这里填写你的介绍。', _t('关于-详细介绍'), _t('底栏展开后的详细介绍，可以使用html标签'));
     $form->addInput($Biglogo);
-
+	$zmki_ys = new Typecho_Widget_Helper_Form_Element_Text('zmki_ys', NULL, '', _t('缩略图-图片处理规则名称-(优化选项,选填)'), _t('需要带自定义分隔符;使用oss图片处理生成小缩略图可优化页面打开速度; 使用帮助:https://www.zmki.cn/4956.html'));
+	$form->addInput($zmki_ys);
+	$zmki_sy = new Typecho_Widget_Helper_Form_Element_Text('zmki_sy', NULL, '', _t('图片版权水印-图片处理规则名称-(优化选项,选填)'), _t('需要带自定义分隔符;此处可填写oss水印规则名称，默认对全部图片生效; 使用帮助:https://www.zmki.cn/4956.html'));
+	$form->addInput($zmki_sy);
 	$xxhome = new Typecho_Widget_Helper_Form_Element_Text('xxhome', NULL, '', _t('home'), _t('填写你的主页链接 http(s)://'));
 	$form->addInput($xxhome);
 	$xxqq = new Typecho_Widget_Helper_Form_Element_Text('xxqq', NULL, '', _t('QQ'), _t('填写你的QQ链接  http(s)://'));
@@ -25,7 +28,8 @@ function themeConfig($form) {
 	$form->addInput($xxgithub);
 	$icp = new Typecho_Widget_Helper_Form_Element_Text('icp', NULL, '', _t('ICP备案号'), _t('如果你在国内有备案，可在此处填写'));
 	$form->addInput($icp);
-
+	$cnzz= new Typecho_Widget_Helper_Form_Element_Text('cnzz', NULL, '', _t('统计代码'), _t('cnzz或百度..统计代码。可在此处填写处'));
+	$form->addInput($cnzz);
 }
 //输出导航
 function themeFields($layout) {

diff --git a/index.php b/index.php
@@ -1,9 +1,9 @@
 <?php
 /**
- * 前端基于Multiverse，for TYPECHO 的相册模板，由钻芒开发适配  你可以在<a href="https://www.zmki.cn">钻芒博客</a>获得更多关于此模板的信息
+ * Time前端基于Multiverse。由钻芒开发适配  你可以在<a href="https://www.zmki.cn/4953.html">钻芒博客</a>获得此模板更新信息。请保留底部版权。否则不欢迎使用<br><b>1.1.2更新说明</b>（打包时间:2020年2月12日02:38:28）<ul><li>原生js懒加载。完美提升加载速度</li><li>图片处理集成到后台，配合oss使用。【推荐】</li><li>增加全屏切换并美化侧边滚动条</li><li>后台新增cnzz等一些细小的功能及代码优化</li></ul>
  * @package Time
  * @author zmki
- * @version 1.0.2
+ * @version 1.1.2
  * @link https://www.zmki.cn/
  */
 ?>
@@ -21,6 +21,8 @@
 		<noscript><link rel="stylesheet" href="<?php $this->options->themeUrl('assets/css/noscript.css'); ?>" /></noscript>
 		<link rel="stylesheet" href="<?php $this->options->themeUrl('assets/css/main.css'); ?>" />
 		<link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css">
+		<link rel="stylesheet" href="//at.alicdn.com/t/font_1635479_m8o2ir6mitf.css">
+		<script src="https://at.alicdn.com/t/font_1635479_m8o2ir6mitf.js"></script>  
 	</head>
 	<body class="is-preload">
 		<!-- Wrapper -->
@@ -30,22 +32,26 @@
 						<h1><a href="<?php $this->options->siteUrl(); ?>"><strong><?php $this->options->zmkiabout() ?></strong> <?php $this->options->zmkiabouts() ?></a></h1>
 						<nav>
 							<ul>
+								<li><a type="button" id="fullscreen" class="btn btn-default visible-lg visible-md" alt="切换全屏"><svg  class="icon-zmki zmki_dh zmki_wap" aria-hidden="true"><use xlink:href="#icon-zmki-ziyuan-copy"></use></svg></a></li>
 								<li><a href="#footer" class="icon solid fa-info-circle">关于</a></li>
 							</ul>
 						</nav>
 					</header>
 					<!-- Main -->
-				<div id="main">					
+			<div id="main" >	
+
 				<?php while($this->next()): ?>
-				   <article class="thumb">
-					<a href="<?php echo $this->fields->img();?>" class="image" > <img  src="<?php echo $this->fields->img();?>"  /></a>
-					<h2><?php $this->title() ?></h2>
-					<p><?php $this->content('Continue Reading...'); ?></p>
+				   <article class="thumb img-area">
+				    <a class="image my-photo"  alt="loading"  data-src="<?php echo $this->fields->img();?><?php $this->options->zmki_ys()?>"  href="<?php echo $this->fields->img();?><?php $this->options->zmki_sy()?>" >
+				   		<img class="zmki_px  my-photo" data-src="<?php echo $this->fields->img();?><?php $this->options->zmki_ys()?>"  />
+				   	  </a> 
+						<h2><?php $this->title() ?></h2>
+						<p><?php $this->content('Continue Reading...'); ?></p>
 				   </article>
 				  <?php endwhile; ?>
 				</div> 
-				
-				<!-- Footer -->
+<body>
+ 				<!-- Footer -->
 					<footer id="footer" class="panel">
 						<div class="inner split">
 							<div class="inner split">
@@ -62,14 +68,72 @@
 						<li><a href="<?php $this->options->xxweibo()?>"  target="_blank" class="icon brands fa-weibo"><span class="label">weibo</span></a></li>
 						<li><a href="<?php $this->options->xxgithub()?> "  target="_blank" class="icon brands fa-github"><span class="label">GitHub</span></a></li>
 										</ul>
-								</section>
+								</section> 
+								<span style="color: #b5b5b5; font-size: 0.8em;">
+									<?php $this->options->cnzz()?>
 								<p class="copyright">
-									&copy; Design BY HTML UP  Modify BY ZMKI  THEME:<a href="https://www.zmki.cn/">Time</a>. ICP备案号:<a href="http://beian.miit.gov.cn/"target="_blank" ><?php $this->options->icp()?></a>
+									&copy; Design HTML UP  Modify BY ZMKI  THEME:<a href="https://www.zmki.cn/4953.html">Time</a>. ICP备案号:<a href="http://beian.miit.gov.cn/"target="_blank" ><?php $this->options->icp()?></a>
 								</p>
+								<div>
+							</div>
 							</div>
 							<div>
 					</footer>
-</div>		
+</div>	
+<script type="text/javascript">
+function isInSight(el) {
+  const bound = el.getBoundingClientRect();
+  const clientHeight = window.innerHeight;
+  //如果只考虑向下滚动加载
+  //const clientWidth=window.innerWeight;
+  return bound.top <= clientHeight + 100;
+}
+
+let index = 0;
+function checkImgs() {
+  const imgs = document.querySelectorAll('.my-photo');
+  for (let i = index; i < imgs.length; i++) {
+    if (isInSight(imgs[i])) {
+      loadImg(imgs[i]);
+      index = i;
+    }
+  }
+  // Array.from(imgs).forEach(el => {
+  //   if (isInSight(el)) {
+  //     loadImg(el);
+  //   }
+  // })
+}
+
+function loadImg(el) {
+  if (!el.src) {
+    const source = el.dataset.src;
+    el.src = source;
+  }
+}
+
+function throttle(fn, mustRun = 10) {
+  const timer = null;
+  let previous = null;
+  return function() {
+    const now = new Date();
+    const context = this;
+    const args = arguments;
+    if (!previous) {
+      previous = now;
+    }
+    const remaining = now - previous;
+    if (mustRun && remaining >= mustRun) {
+      fn.apply(context, args);
+      previous = now;
+    }
+  }
+}
+ 		</script>
+		  <script>
+    window.onload=checkImgs;
+    window.onscroll = throttle(checkImgs);
+  </script>
 </div> 
 		<!-- Scripts -->
 			<script src="<?php $this->options->themeUrl('assets/js/jquery.min.js'); ?>"></script>
@@ -78,5 +142,6 @@
 			<script src="<?php $this->options->themeUrl('assets/js/breakpoints.min.js'); ?>"></script>
 			<script src="<?php $this->options->themeUrl('assets/js/util.js'); ?>"></script>
 			<script src="<?php $this->options->themeUrl('assets/js/main.js'); ?>"></script>
+
 	</body>
 </html>