nicecode/nicenote
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
0dd7b3c7e6
nicenote/public/论轮播图的原理.html
江志雄 0dd7b3c7e6 新增评论模块
2018-05-23 15:56:28 +08:00

1278 lines
51 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html style="display: none;" lang="zh">
<head>
<meta charset="utf-8">
<!--
© Material Theme
https://github.com/viosey/hexo-theme-material
Version: 1.5.2 -->
<script>
window.materialVersion = "1.5.2"
// Delete localstorage with these tags
window.oldVersion = [
'codestartv1',
'1.3.4',
'1.4.0',
'1.4.0b1',
'1.5.0'
]
</script>
<!-- dns prefetch -->
<meta http-equiv="x-dns-prefetch-control" content="on">
<link rel="dns-prefetch" href="https://cdn1.lncld.net"/>
<!-- Meta & Info -->
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<!-- Title -->
<title>
解析卡片式轮播图 |
Jzxer&#39;s Blog
</title>
<!-- Favicons -->
<link rel="icon shortcut" type="image/ico" href="/img/favicon.ico">
<link rel="icon" href="/img/favicon.png">
<meta name="format-detection" content="telephone=no"/>
<meta name="description" itemprop="description" content="web全栈工程师,摇滚,vue,vuex,react,webpack,git,koa2">
<meta name="keywords" content="全栈,javascript,react,vue,webpack,koa2,轮播图">
<meta name="theme-color" content="#70c2cd">
<!-- Disable Fucking Bloody Baidu Tranformation -->
<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<!--[if lte IE 9]>
<link rel="stylesheet" href="/css/ie-blocker.css">
<script src="/js/ie-blocker.zhCN.js"></script>
<![endif]-->
<!-- Import lsloader -->
<script>(function(){window.lsloader={jsRunSequence:[],jsnamemap:{},cssnamemap:{}};lsloader.removeLS=function(a){try{localStorage.removeItem(a)}catch(b){}};lsloader.setLS=function(a,c){try{localStorage.setItem(a,c)}catch(b){}};lsloader.getLS=function(a){var c="";try{c=localStorage.getItem(a)}catch(b){c=""}return c};versionString="/*"+(window.materialVersion||"unknownVersion")+"*/";lsloader.clean=function(){try{var b=[];for(var a=0;a<localStorage.length;a++){b.push(localStorage.key(a))}b.forEach(function(e){var f=lsloader.getLS(e);if(window.oldVersion){var d=window.oldVersion.reduce(function(g,h){return g||f.indexOf("/*"+h+"*/")!==-1},false);if(d){lsloader.removeLS(e)}}})}catch(c){}};lsloader.clean();lsloader.load=function(f,a,b,d){if(typeof b==="boolean"){d=b;b=undefined}d=d||false;b=b||function(){};var e;e=this.getLS(f);if(e&&e.indexOf(versionString)===-1){this.removeLS(f);this.requestResource(f,a,b,d);return}if(e){var c=e.split(versionString)[0];if(c!=a){console.log("reload:"+a);this.removeLS(f);this.requestResource(f,a,b,d);return}e=e.split(versionString)[1];if(d){this.jsRunSequence.push({name:f,code:e});this.runjs(a,f,e)}else{document.getElementById(f).appendChild(document.createTextNode(e));b()}}else{this.requestResource(f,a,b,d)}};lsloader.requestResource=function(b,e,a,c){var d=this;if(c){this.iojs(e,b,function(h,f,g){d.setLS(f,h+versionString+g);d.runjs(h,f,g)})}else{this.iocss(e,b,function(f){document.getElementById(b).appendChild(document.createTextNode(f));d.setLS(b,e+versionString+f)},a)}};lsloader.iojs=function(d,b,g){var a=this;a.jsRunSequence.push({name:b,code:""});try{var f=new XMLHttpRequest();f.open("get",d,true);f.onreadystatechange=function(){if(f.readyState==4){if((f.status>=200&&f.status<300)||f.status==304){if(f.response!=""){g(d,b,f.response);return}}a.jsfallback(d,b)}};f.send(null)}catch(c){a.jsfallback(d,b)}};lsloader.iocss=function(f,c,h,a){var b=this;try{var g=new XMLHttpRequest();g.open("get",f,true);g.onreadystatechange=function(){if(g.readyState==4){if((g.status>=200&&g.status<300)||g.status==304){if(g.response!=""){h(g.response);a();return}}b.cssfallback(f,c,a)}};g.send(null)}catch(d){b.cssfallback(f,c,a)}};lsloader.iofonts=function(f,c,h,a){var b=this;try{var g=new XMLHttpRequest();g.open("get",f,true);g.onreadystatechange=function(){if(g.readyState==4){if((g.status>=200&&g.status<300)||g.status==304){if(g.response!=""){h(g.response);a();return}}b.cssfallback(f,c,a)}};g.send(null)}catch(d){b.cssfallback(f,c,a)}};lsloader.runjs=function(f,c,e){if(!!c&&!!e){for(var b in this.jsRunSequence){if(this.jsRunSequence[b].name==c){this.jsRunSequence[b].code=e}}}if(!!this.jsRunSequence[0]&&!!this.jsRunSequence[0].code&&this.jsRunSequence[0].status!="failed"){var a=document.createElement("script");a.appendChild(document.createTextNode(this.jsRunSequence[0].code));a.type="text/javascript";document.getElementsByTagName("head")[0].appendChild(a);this.jsRunSequence.shift();if(this.jsRunSequence.length>0){this.runjs()}}else{if(!!this.jsRunSequence[0]&&this.jsRunSequence[0].status=="failed"){var d=this;var a=document.createElement("script");a.src=this.jsRunSequence[0].path;a.type="text/javascript";this.jsRunSequence[0].status="loading";a.onload=function(){d.jsRunSequence.shift();if(d.jsRunSequence.length>0){d.runjs()}};document.body.appendChild(a)}}};lsloader.tagLoad=function(b,a){this.jsRunSequence.push({name:a,code:"",path:b,status:"failed"});this.runjs()};lsloader.jsfallback=function(c,b){if(!!this.jsnamemap[b]){return}else{this.jsnamemap[b]=b}for(var a in this.jsRunSequence){if(this.jsRunSequence[a].name==b){this.jsRunSequence[a].code="";this.jsRunSequence[a].status="failed";this.jsRunSequence[a].path=c}}this.runjs()};lsloader.cssfallback=function(e,c,b){if(!!this.cssnamemap[c]){return}else{this.cssnamemap[c]=1}var d=document.createElement("link");d.type="text/css";d.href=e;d.rel="stylesheet";d.onload=d.onerror=b;var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(d,a)};lsloader.runInlineScript=function(c,b){var a=document.getElementById(b).innerText;this.jsRunSequence.push({name:c,code:a});this.runjs()}})();</script>
<!-- Import queue -->
<script>function Queue(){this.dataStore=[];this.offer=b;this.poll=d;this.execNext=a;this.debug=false;this.startDebug=c;function b(e){if(this.debug){console.log("Offered a Queued Function.")}if(typeof e==="function"){this.dataStore.push(e)}else{console.log("You must offer a function.")}}function d(){if(this.debug){console.log("Polled a Queued Function.")}return this.dataStore.shift()}function a(){var e=this.poll();if(e!==undefined){if(this.debug){console.log("Run a Queued Function.")}e()}}function c(){this.debug=true}}var queue=new Queue();</script>
<!-- Import CSS -->
<style id="material_css"></style><script>if(typeof window.lsLoadCSSMaxNums === "undefined")window.lsLoadCSSMaxNums = 0;window.lsLoadCSSMaxNums++;lsloader.load("material_css","/css/material.min.css?Z7a72R1E4SxzBKR/WGctOA==",function(){if(typeof window.lsLoadCSSNums === "undefined")window.lsLoadCSSNums = 0;window.lsLoadCSSNums++;if(window.lsLoadCSSNums == window.lsLoadCSSMaxNums)document.documentElement.style.display="";}, false)</script>
<style id="style_css"></style><script>if(typeof window.lsLoadCSSMaxNums === "undefined")window.lsLoadCSSMaxNums = 0;window.lsLoadCSSMaxNums++;lsloader.load("style_css","/css/style.min.css?MKetZV3cUTfDxvMffaOezg==",function(){if(typeof window.lsLoadCSSNums === "undefined")window.lsLoadCSSNums = 0;window.lsLoadCSSNums++;if(window.lsLoadCSSNums == window.lsLoadCSSMaxNums)document.documentElement.style.display="";}, false)</script>
<style id="prettify_css"></style><script>if(typeof window.lsLoadCSSMaxNums === "undefined")window.lsLoadCSSMaxNums = 0;window.lsLoadCSSMaxNums++;lsloader.load("prettify_css","/css/prettify.min.css?zp8STOU9v89XWFEnN+6YmQ==",function(){if(typeof window.lsLoadCSSNums === "undefined")window.lsLoadCSSNums = 0;window.lsLoadCSSNums++;if(window.lsLoadCSSNums == window.lsLoadCSSMaxNums)document.documentElement.style.display="";}, false)</script>
<style id="prettify_theme"></style><script>if(typeof window.lsLoadCSSMaxNums === "undefined")window.lsLoadCSSMaxNums = 0;window.lsLoadCSSMaxNums++;lsloader.load("prettify_theme","/css/prettify/vibrant-ink.min.css?e5E/qqGcGveS7VTH4M896w==",function(){if(typeof window.lsLoadCSSNums === "undefined")window.lsLoadCSSNums = 0;window.lsLoadCSSNums++;if(window.lsLoadCSSNums == window.lsLoadCSSMaxNums)document.documentElement.style.display="";}, false)</script>
<!-- Config CSS -->
<!-- Other Styles -->
<style>
body, html {
font-family: Roboto, "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
overflow-x: hidden !important;
}
code {
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
}
a {
color: #679cc5;
}
.mdl-card__media,
#search-label,
#search-form-label:after,
#scheme-Paradox .hot_tags-count,
#scheme-Paradox .sidebar_archives-count,
#scheme-Paradox .sidebar-colored .sidebar-header,
#scheme-Paradox .sidebar-colored .sidebar-badge{
background-color: #785470 !important;
}
/* Sidebar User Drop Down Menu Text Color */
#scheme-Paradox .sidebar-colored .sidebar-nav>.dropdown>.dropdown-menu>li>a:hover,
#scheme-Paradox .sidebar-colored .sidebar-nav>.dropdown>.dropdown-menu>li>a:focus {
color: #785470 !important;
}
#post_entry-right-info,
.sidebar-colored .sidebar-nav li:hover > a,
.sidebar-colored .sidebar-nav li:hover > a i,
.sidebar-colored .sidebar-nav li > a:hover,
.sidebar-colored .sidebar-nav li > a:hover i,
.sidebar-colored .sidebar-nav li > a:focus i,
.sidebar-colored .sidebar-nav > .open > a,
.sidebar-colored .sidebar-nav > .open > a:hover,
.sidebar-colored .sidebar-nav > .open > a:focus,
#ds-reset #ds-ctx .ds-ctx-entry .ds-ctx-head a {
color: #785470 !important;
}
.toTop {
background: #1a1d3a !important;
}
.material-layout .material-post>.material-nav,
.material-layout .material-index>.material-nav,
.material-nav a {
color: #1a1d3a;
}
#scheme-Paradox .MD-burger-layer {
background-color: #1a1d3a;
}
#scheme-Paradox #post-toc-trigger-btn {
color: #1a1d3a;
}
.post-toc a:hover {
color: #679cc5;
text-decoration: underline;
}
</style>
<!-- Theme Background Related-->
<style>
body{
background-image: url(/img/bg.png);
}
</style>
<!-- Fade Effect -->
<style>
.fade {
transition: all 800ms linear;
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
opacity: 1;
}
.fade.out{
opacity: 0;
}
</style>
<!-- Import Font -->
<!-- Import Roboto -->
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
<!-- Import Material Icons -->
<style id="material_icons"></style><script>if(typeof window.lsLoadCSSMaxNums === "undefined")window.lsLoadCSSMaxNums = 0;window.lsLoadCSSMaxNums++;lsloader.load("material_icons","/css/material-icons.css?pqhB/Rd/ab0H2+kZp0RDmw==",function(){if(typeof window.lsLoadCSSNums === "undefined")window.lsLoadCSSNums = 0;window.lsLoadCSSNums++;if(window.lsLoadCSSNums == window.lsLoadCSSMaxNums)document.documentElement.style.display="";}, false)</script>
<!-- Import jQuery -->
<script>lsloader.load("jq_js","/js/jquery.min.js?qcusAULNeBksqffqUM2+Ig==", true)</script>
<!-- WebAPP Icons -->
<meta name="mobile-web-app-capable" content="yes">
<meta name="application-name" content="Jzxer&#39;s Blog">
<meta name="msapplication-starturl" content="/论轮播图的原理.html">
<meta name="msapplication-navbutton-color" content="#70c2cd">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-title" content="Jzxer&#39;s Blog">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="apple-touch-icon" href="/img/favicon.png">
<!-- Site Verification -->
<meta name="baidu-site-verification" content="z1eJ8hGeNJ" />
<!-- RSS -->
<!-- The Open Graph protocol -->
<meta property="og:url" content="/论轮播图的原理.html">
<meta property="og:type" content="blog">
<meta property="og:title" content="解析卡片式轮播图 | Jzxer&#39;s Blog">
<meta property="og:image" content="/img/favicon.png">
<meta property="og:description" content="web全栈工程师,摇滚,vue,vuex,react,webpack,git,koa2">
<meta property="og:article:tag" content="轮播图">
<meta property="article:published_time" content="Sat Jun 24 2017 23:18:35 GMT+0800">
<meta property="article:modified_time" content="Mon Jan 22 2018 14:43:23 GMT+0800">
<!-- The Twitter Card protocol -->
<meta name="twitter:card" content="summary_large_image">
<!-- Add canonical link for SEO -->
<link rel="canonical" href="/论轮播图的原理.html" />
<!-- Structured-data for SEO -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BlogPosting",
"mainEntityOfPage": "/论轮播图的原理.html",
"headline": "解析卡片式轮播图",
"datePublished": "Sat Jun 24 2017 23:18:35 GMT+0800",
"dateModified": "Mon Jan 22 2018 14:43:23 GMT+0800",
"author": {
"@type": "Person",
"name": "Jzxer",
"image": {
"@type": "ImageObject",
"url": "/img/avatar.png"
},
"description": "对的，坚持！,,错的，放弃！"
},
"publisher": {
"@type": "Organization",
"name": "Jzxer&#39;s Blog",
"logo": {
"@type":"ImageObject",
"url": "/img/favicon.png"
}
},
"keywords": ",轮播图全栈,javascript,react,vue,webpack,koa2",
"description": "web全栈工程师,摇滚,vue,vuex,react,webpack,git,koa2",
}
</script>
<!-- Analytics -->
<script>
var _hmt = _hmt || [];
(function() {var hm = document.createElement('script');
hm.src = 'https://hm.baidu.com/hm.js?fd3e8c663917a054564de87b31397113';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
<!-- Custom Head -->
</head>
<body id="scheme-Paradox" class="lazy">
<div class="material-layout mdl-js-layout has-drawer is-upgraded">
<!-- Main Container -->
<main class="material-layout__content" id="main">
<!-- Top Anchor -->
<div id="top"></div>
<!-- Hamburger Button -->
<button class="MD-burger-icon sidebar-toggle">
<span class="MD-burger-layer"></span>
</button>
<!-- Post TOC -->
<!-- Back Button -->
<!--
<div class="material-back" id="backhome-div" tabindex="0">
<a class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon"
href="#" onclick="window.history.back();return false;"
target="_self"
role="button"
data-upgraded=",MaterialButton,MaterialRipple">
<i class="material-icons" role="presentation">arrow_back</i>
<span class="mdl-button__ripple-container">
<span class="mdl-ripple"></span>
</span>
</a>
</div>
-->
<!-- Left aligned menu below button -->
<button id="post-toc-trigger-btn"
class="mdl-button mdl-js-button mdl-button--icon">
<i class="material-icons">format_list_numbered</i>
</button>
<ul class="post-toc-wrap mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect" for="post-toc-trigger-btn" style="max-height:80vh; overflow-y:scroll;">
<ol class="post-toc"><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#原理"><span class="post-toc-number">1.</span> <span class="post-toc-text">原理</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#无限滚动"><span class="post-toc-number">2.</span> <span class="post-toc-text">无限滚动</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#小按钮切换"><span class="post-toc-number">3.</span> <span class="post-toc-text">小按钮切换</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#延迟动画函数"><span class="post-toc-number">4.</span> <span class="post-toc-text">延迟动画函数</span></a></li></ol>
</ul>
<!-- Layouts -->
<!-- Post Module -->
<div class="material-post_container">
<div class="material-post mdl-grid">
<div class="mdl-card mdl-shadow--4dp mdl-cell mdl-cell--12-col">
<!-- Post Header(Thumbnail & Title) -->
<!-- Paradox Post Header -->
<!-- Random Thumbnail -->
<div class="post_thumbnail-random mdl-card__media mdl-color-text--grey-50">
<script type="text/ls-javascript" id="post-thumbnail-script">
var randomNum = Math.floor(Math.random() * 19 + 1);
$('.post_thumbnail-random').attr('data-original', '/img/random/material-' + randomNum + '.png');
$('.post_thumbnail-random').addClass('lazy');
</script>
<p class="article-headline-p">
解析卡片式轮播图
</p>
</div>
<!-- Paradox Post Info -->
<div class="mdl-color-text--grey-700 mdl-card__supporting-text meta">
<!-- Author Avatar -->
<div id="author-avatar">
<img src="/img/avatar.png" width="44px" height="44px" alt="Author Avatar"/>
</div>
<!-- Author Name & Date -->
<div>
<strong>Jzxer</strong>
<span>6月 24, 2017</span>
</div>
<div class="section-spacer"></div>
<!-- Favorite -->
<!--
<button id="article-functions-like-button" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon btn-like">
<i class="material-icons" role="presentation">favorite</i>
<span class="visuallyhidden">favorites</span>
</button>
-->
<!-- Qrcode -->
<button id="article-functions-qrcode-button" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon">
<i class="material-icons" role="presentation">devices other</i>
<span class="visuallyhidden">devices other</span>
</button>
<ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" for="article-functions-qrcode-button">
<li class="mdl-menu__item">在其它设备中阅读本文章</li>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMYAAADGCAAAAACs8KCBAAAB5ElEQVR42u3aO3LDMAwFQN//0kmbJswDIMUWuaw8E324Kl4Igq+vLcYLAwMDAwMDA+NjGK94JHf9/Gv1+vIcMDAwDmP8EW3LKeZPW3+UfA4YGBgnM64K0OSuC+aAgYGBETCiWPzl+RgYGBj3MZJJrKN5fRcGBgbGvIhNStNk4fjmWhwDA+OBjHxT/r7f/9rfwMDAeBRjdNwh3m7LWwtvODOCgYHx8YxqOE6o+fXR1h4GBsZhjMmmW++wV748LRexGBgYBzASZO9DXBvrGBgYpzHy10xitxeyzaP2GBgY2zHyx+Vl5ySmR0UsBgbGdowk2pKtsZxdbVsWWpgYGBibMnql5qQQzQ+Q/fEhMDAwDmMkD622JCf45B8ABgbGOYzqplg1ZKsxWrgGAwPjMMZVTc3J9lnebMDAwDiNMTk8UW1nzpuaGBgYZzLmS8Be+7N6wGLU38DAwHg4o/rKdUxPIvWCMyMYGBibMqojeU21DL6lFsfAwNiIMQnB+SHX6gIUAwPjZEavoVidei9wMTAwMHoNgHnUVtsAzVocAwPjSEavlO01FTAwMDCuCtz1grL3mUZFLAYGxtaMa4vYZCHYuxIDA+NMRl5Y9rb+1+x1KN/SwsTAwHgU47kDAwMDAwMDA+Ot4xvlgJxx+8L4+wAAAABJRU5ErkJggg==">
</ul>
<!-- Tags (bookmark) -->
<button id="article-functions-viewtags-button" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon">
<i class="material-icons" role="presentation">bookmark</i>
<span class="visuallyhidden">bookmark</span>
</button>
<ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" for="article-functions-viewtags-button">
<li class="mdl-menu__item">
<a class="post_tag-link" href="/tags/轮播图/">轮播图</a>
</ul>
<!-- Share -->
<button id="article-fuctions-share-button" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon">
<i class="material-icons" role="presentation">share</i>
<span class="visuallyhidden">share</span>
</button>
<ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" for="article-fuctions-share-button">
<!-- Leancloud Views -->
<a class="post_share-link" href="#">
<li class="mdl-menu__item">
<span id="/论轮播图的原理.html" class="leancloud-views_num" data-flag-title="解析卡片式轮播图">
&nbsp;浏览量
</span>
</li>
</a>
<!-- Share Weibo -->
<a class="post_share-link" href="http://service.weibo.com/share/share.php?appkey=&title=解析卡片式轮播图&url=/论轮播图的原理.html&pic=/img/favicon.ico&searchPic=false&style=simple" target="_blank">
<li class="mdl-menu__item">
分享到微博
</li>
</a>
<!-- Share Twitter -->
<a class="post_share-link" href="https://twitter.com/intent/tweet?text=解析卡片式轮播图&url=/论轮播图的原理.html&via=Jzxer" target="_blank">
<li class="mdl-menu__item">
分享到 Twitter
</li>
</a>
<!-- Share Facebook -->
<a class="post_share-link" href="https://www.facebook.com/sharer/sharer.php?u=/论轮播图的原理.html" target="_blank">
<li class="mdl-menu__item">
分享到 Facebook
</li>
</a>
<!-- Share Google+ -->
<a class="post_share-link" href="https://plus.google.com/share?url=/论轮播图的原理.html" target="_blank">
<li class="mdl-menu__item">
分享到 Google+
</li>
</a>
<!-- Share LinkedIn -->
<a class="post_share-link" href="https://www.linkedin.com/shareArticle?mini=true&url=/论轮播图的原理.html&title=解析卡片式轮播图" target="_blank">
<li class="mdl-menu__item">
分享到 LinkedIn
</li>
</a>
<!-- Share QQ -->
<a class="post_share-link" href="http://connect.qq.com/widget/shareqq/index.html?site=Jzxer&#39;s Blog&title=解析卡片式轮播图&summary=web全栈工程师,摇滚,vue,vuex,react,webpack,git,koa2&pics=/img/favicon.ico&url=/论轮播图的原理.html" target="_blank">
<li class="mdl-menu__item">
分享到 QQ
</li>
</a>
<!-- Share Telegram -->
</ul>
</div>
<!-- Post Content -->
<div id="post-content" class="mdl-color-text--grey-700 mdl-card__supporting-text fade out">
<blockquote>
<p>小记：前两天面试，展现项目过程中经理问我轮播图的原理，我一脸懵逼，因为当时有现成的插件，所以我没怎么去研究，当然，我也知道该来的还是要来的…</p>
</blockquote>
<p>首先我大概讲一下，传统轮播图的主要部分：</p>
<ul>
<li>图片（废话）</li>
<li>左右两边的button</li>
<li>可以跳转的小点<br><a href="http://jzxer.cn/card/" target="_blank" rel="noopener">demo</a></li>
</ul>
<h3 id="原理"><a href="#原理" class="headerlink" title="原理"></a>原理</h3><ul>
<li>轮播图的原理就是一个长图，里面有很多张图，外面包一层展示窗口，将属性设置成overflow：hidden，达到只显示一张的效果，当点击左右两边的按钮时会按照像素来跳转</li>
</ul>
<h3 id="无限滚动"><a href="#无限滚动" class="headerlink" title="无限滚动"></a>无限滚动</h3><ul>
<li>我给两个按钮设为 <b>prev next</b> 一个在点击后，长图会增加一张图的宽度，一个是减少一个图的宽度,在图片的头和尾部加一张图，结构大概为：<pre><code>&lt;div id=&quot;list&quot; style=&quot;left:-200px&quot;&gt;
&lt;img src=&quot;./img/5.jpg&quot; alt=&quot;&quot;&gt;
&lt;img src=&quot;./img/1.jpg&quot; alt=&quot;&quot;&gt;
&lt;img src=&quot;./img/2.jpg&quot; alt=&quot;&quot;&gt;
&lt;img src=&quot;./img/3.jpg&quot; alt=&quot;&quot;&gt;
&lt;img src=&quot;./img/4.jpg&quot; alt=&quot;&quot;&gt;
&lt;img src=&quot;./img/5.jpg&quot; alt=&quot;&quot;&gt;
&lt;img src=&quot;./img/1.jpg&quot; alt=&quot;&quot;&gt;
&lt;/div&gt;
</code></pre>当是最后一张图或第一张图时，将第一张上一张跳转为最后一张时的宽，最后一张跳转为第一张时的宽<pre><code>if (newList &lt; -1000) {
dot = 1
list.style.left = -200 + &#39;px&#39;
}
if (newList &gt; -200) {
dot = 5
list.style.left = -1000 + &#39;px&#39;
}
</code></pre></li>
</ul>
<h3 id="小按钮切换"><a href="#小按钮切换" class="headerlink" title="小按钮切换"></a>小按钮切换</h3><p>这要实现的思想有</p>
<ul>
<li>点了小按钮，背景色会变</li>
<li>当点击切换到其他按钮，图片切换，且上一个按钮会变回原来的颜色</li>
</ul>
<pre><code>function showBtn() {
for (var i = 0; i &lt; btns.length; i++) {
if (btns[i].className == &#39;show-btn&#39;) {
btns[i].className = &#39;&#39;
break
}
}
btns[dot-1].className = &#39;show-btn&#39;
}
//遍历数组，将有该属性设为空
for (var i = 0; i &lt; btns.length; i++) {
btns[i].onclick = function () {
if (this.className == &#39;showBtn&#39;) {
return
}
var myIndex = parseInt(this.getAttribute(&#39;index&#39;))
var leng = -200 * (myIndex - dot)
animate(leng)
dot = myIndex
showBtn()
}
}
//遍历数组，将每一个小按钮设了个index属性，这里用到 getAttribute 可以获取除了普通style 或 class 之外的一些属性，获取index值，点击时得到当前的index值，正好和当前的dot值相减，可得跳转的距离
</code></pre><blockquote>
<p>这里要注意的是，当小按钮被重复按的时候，给他一个判断，不然重复点击同一个图标会重复发生相同事件，占内存，耗cpu</p>
</blockquote>
<h3 id="延迟动画函数"><a href="#延迟动画函数" class="headerlink" title="延迟动画函数"></a>延迟动画函数</h3><p>就是当用户点击时，有一个慢慢偏移的过程，而不是闪现的动作，我们来看看实现原理</p>
<ul>
<li><p>首先，定义参数</p>
<pre><code>var time = 300 //位移总时间
var interval = 10 //位移时间间隔
var speed = leng/(time/interval) //每次位移量，就是一共调用多少次的意思
</code></pre></li>
<li><p>设置递归函数</p>
<pre><code>if ((speed &lt; 0 &amp;&amp; parseInt(list.style.left) &gt; newList) || (speed &gt; 0 &amp;&amp; parseInt(list.style.left) &lt; newList)) {
list.style.left = parseInt(list.style.left) + speed + &#39;px&#39;
setTimeout(go, interval) //递归,调用自身函数
</code></pre></li>
<li><p>判断是否仍在动画<br>如果用户一直在点击切换图时，如果电脑配置不好，或是其他一些因素，可能会轮播卡顿，为了防止这一现象，就用一个判断来看上一次动画是否完成，若未完成就不能继续切换，等到这次动画跳转完为止<br><code>`</code><br>var animated = false //设初值</p>
</li>
</ul>
<p>if(!animated) {<br> animate(200)<br>} //如果为false，则继续动画</p>
<pre><code>
### 自动播放
首先给个思路，当鼠标移入的时候，自动播放停止，移出的时候开始自动播放
* 我们设两个函数，play（） 和 stop（）
</code></pre><p>function play() {<br> timer = setTimeout(function() {<br> next.onclick()<br> play()<br> },interval)<br> }<br> function stop() {<br> clearTimeout(timer)<br> }<br><code>`</code><br>给整个 container 容器添加该鼠标事件</p>
<p>这年头还是不能偷懒啊，说不定当时知道这个人家就把给我要了呢，好气哦…</p>
<blockquote>
<p>改天再研究下旋转木马的那种装个13…</p>
</blockquote>
<blockquote style="margin: 2em 0 0;padding: 0.5em 1em;border-left: 3px solid #F44336;background-color: #F5F5F5;list-style: none;">
<p><strong>
<a href="#" target="_blank">出自 Feax</a>
</strong>
<br>
<strong>本文链接：</strong><a href="/论轮播图的原理.html">/论轮播图的原理.html</a>
</p>
</blockquote>
</div>
<!-- Post Comments -->
<div id="comment" style='padding:10px;' class="vcomment"></div>
<script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
<script src="//unpkg.com/valine/dist/Valine.min.js"></script>
<script>
var GUEST_INFO = ['nick','mail','link'];
var guest_info = 'nick,mail,link'.split(',').filter(function(item){
return GUEST_INFO.indexOf(item) > -1
});
var notify = 'false' == true;
var verify = 'false' == true;
new Valine({
el: '.vcomment',
notify: notify,
verify: verify,
appId: "ONAFtjxhaBqrA7LGAQFYsmUx-gzGzoHsz",
appKey: "hUSwCACEEbPBcGUh42RMzy6P",
placeholder: "Just go go",
pageSize:'10',
avatar:'identicon',
lang:'zh-cn'
});
</script>
</div>
<!-- Post Prev & Next Nav -->
<nav class="material-nav mdl-color-text--grey-50 mdl-cell mdl-cell--12-col">
<!-- Prev Nav -->
<a href="/四种常见的布局.html" id="post_nav-newer" class="prev-content">
<button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon mdl-color--white mdl-color-text--grey-900" role="presentation">
<i class="material-icons">arrow_back</i>
</button>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
新篇
</a>
<!-- Section Spacer -->
<div class="section-spacer"></div>
<!-- Next Nav -->
<a href="/vue学习笔记（一）.html" id="post_nav-older" class="next-content">
旧篇
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon mdl-color--white mdl-color-text--grey-900" role="presentation">
<i class="material-icons">arrow_forward</i>
</button>
</a>
</nav>
</div>
</div>
<!-- Overlay For Active Sidebar -->
<div class="sidebar-overlay"></div>
<!-- Material sidebar -->
<aside id="sidebar" class="sidebar sidebar-colored sidebar-fixed-left" role="navigation">
<div id="sidebar-main">
<!-- Sidebar Header -->
<div class="sidebar-header header-cover" style="background-image: url(/img/sidebar_header.png);">
<!-- Top bar -->
<div class="top-bar"></div>
<!-- Sidebar toggle button -->
<button type="button" class="sidebar-toggle mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon" style="display: initial;" data-upgraded=",MaterialButton,MaterialRipple">
<i class="material-icons">clear_all</i>
<span class="mdl-button__ripple-container">
<span class="mdl-ripple">
</span>
</span>
</button>
<!-- Sidebar Avatar -->
<div class="sidebar-image">
<img src="/img/avatar.png" alt="Jzxer's avatar">
</div>
<!-- Sidebar Email -->
<a data-toggle="dropdown" class="sidebar-brand" href="#settings-dropdown">
710328466@qq.com
<b class="caret"></b>
</a>
</div>
<!-- Sidebar Navigation -->
<ul class="nav sidebar-nav">
<!-- User dropdown -->
<li class="dropdown">
<ul id="settings-dropdown" class="dropdown-menu">
<li>
<a href="710328466@qq.com" target="_blank" title="给我发邮件">
<i class="material-icons sidebar-material-icons sidebar-indent-left1pc-element">email</i>
给我发邮件
</a>
</li>
</ul>
</li>
<!-- Homepage -->
<li id="sidebar-first-li">
<a href="/">
<i class="material-icons sidebar-material-icons">home</i>
主页
</a>
</li>
<li class="divider"></li>
<!-- Archives -->
<li class="dropdown">
<a href="#" class="ripple-effect dropdown-toggle" data-toggle="dropdown">
<i class="material-icons sidebar-material-icons">inbox</i>
归档
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>
<a class="sidebar_archives-link" href="/archives/2018/04/">四月 2018<span class="sidebar_archives-count">8</span></a></li><li><a class="sidebar_archives-link" href="/archives/2018/03/">三月 2018<span class="sidebar_archives-count">3</span></a></li><li><a class="sidebar_archives-link" href="/archives/2018/02/">二月 2018<span class="sidebar_archives-count">2</span></a></li><li><a class="sidebar_archives-link" href="/archives/2018/01/">一月 2018<span class="sidebar_archives-count">6</span></a></li><li><a class="sidebar_archives-link" href="/archives/2017/12/">十二月 2017<span class="sidebar_archives-count">4</span></a></li><li><a class="sidebar_archives-link" href="/archives/2017/11/">十一月 2017<span class="sidebar_archives-count">1</span></a></li><li><a class="sidebar_archives-link" href="/archives/2017/10/">十月 2017<span class="sidebar_archives-count">4</span></a></li><li><a class="sidebar_archives-link" href="/archives/2017/09/">九月 2017<span class="sidebar_archives-count">3</span></a></li><li><a class="sidebar_archives-link" href="/archives/2017/08/">八月 2017<span class="sidebar_archives-count">5</span></a></li><li><a class="sidebar_archives-link" href="/archives/2017/07/">七月 2017<span class="sidebar_archives-count">8</span></a></li><li><a class="sidebar_archives-link" href="/archives/2017/06/">六月 2017<span class="sidebar_archives-count">8</span></a></li><li><a class="sidebar_archives-link" href="/archives/2017/04/">四月 2017<span class="sidebar_archives-count">1</span></a></li><li><a class="sidebar_archives-link" href="/archives/2017/03/">三月 2017<span class="sidebar_archives-count">3</span></a></li><li><a class="sidebar_archives-link" href="/archives/2017/02/">二月 2017<span class="sidebar_archives-count">2</span></a></li><li><a class="sidebar_archives-link" href="/archives/2017/01/">一月 2017<span class="sidebar_archives-count">1</span></a></li><li><a class="sidebar_archives-link" href="/archives/2016/11/">十一月 2016<span class="sidebar_archives-count">1</span></a></li><li><a class="sidebar_archives-link" href="/archives/2016/08/">八月 2016<span class="sidebar_archives-count">1</span></a>
</ul>
</li>
<li class="divider"></li>
<!-- Categories -->
<li class="dropdown">
<a href="#" class="ripple-effect dropdown-toggle" data-toggle="dropdown">
<i class="material-icons sidebar-material-icons">chrome_reader_mode</i>
分类
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>
<a class="sidebar_archives-link" href="/categories/APP/">APP<span class="sidebar_archives-count">1</span></a></li><li><a class="sidebar_archives-link" href="/categories/CSS/">CSS<span class="sidebar_archives-count">2</span></a></li><li><a class="sidebar_archives-link" href="/categories/HTML/">HTML<span class="sidebar_archives-count">2</span></a></li><li><a class="sidebar_archives-link" href="/categories/IDE/">IDE<span class="sidebar_archives-count">1</span></a></li><li><a class="sidebar_archives-link" href="/categories/JS/">JS<span class="sidebar_archives-count">5</span></a></li><li><a class="sidebar_archives-link" href="/categories/nodeJS/">nodeJS<span class="sidebar_archives-count">4</span></a></li><li><a class="sidebar_archives-link" href="/categories/storage/">storage<span class="sidebar_archives-count">1</span></a></li><li><a class="sidebar_archives-link" href="/categories/vue/">vue<span class="sidebar_archives-count">2</span></a></li><li><a class="sidebar_archives-link" href="/categories/web前端/">web前端<span class="sidebar_archives-count">10</span></a></li><li><a class="sidebar_archives-link" href="/categories/web项目/">web项目<span class="sidebar_archives-count">3</span></a></li><li><a class="sidebar_archives-link" href="/categories/代理/">代理<span class="sidebar_archives-count">1</span></a></li><li><a class="sidebar_archives-link" href="/categories/博客搭建/">博客搭建<span class="sidebar_archives-count">2</span></a></li><li><a class="sidebar_archives-link" href="/categories/安全/">安全<span class="sidebar_archives-count">1</span></a></li><li><a class="sidebar_archives-link" href="/categories/数据库/">数据库<span class="sidebar_archives-count">2</span></a></li><li><a class="sidebar_archives-link" href="/categories/服务器/">服务器<span class="sidebar_archives-count">2</span></a></li><li><a class="sidebar_archives-link" href="/categories/本地储存/">本地储存<span class="sidebar_archives-count">1</span></a></li><li><a class="sidebar_archives-link" href="/categories/版本管理/">版本管理<span class="sidebar_archives-count">1</span></a></li><li><a class="sidebar_archives-link" href="/categories/生活/">生活<span class="sidebar_archives-count">10</span></a></li><li><a class="sidebar_archives-link" href="/categories/阅读/">阅读<span class="sidebar_archives-count">1</span></a></li><li><a class="sidebar_archives-link" href="/categories/音乐/">音乐<span class="sidebar_archives-count">6</span></a>
</ul>
</li>
<li class="divider"></li>
<!-- Pages -->
<li>
<a href="/gallery" title="图库">
<i class="material-icons sidebar-material-icons">dashboard</i>
图库
</a>
</li>
<li class="divider"></li>
<li>
<a href="/tags" title="标签">
<i class="material-icons sidebar-material-icons">label</i>
标签
</a>
</li>
<li class="divider"></li>
<li>
<a href="/footprint" title="我的足迹">
<i class="material-icons sidebar-material-icons">flight</i>
我的足迹
</a>
</li>
<li class="divider"></li>
<li>
<a href="/about" title="关于我">
<i class="material-icons sidebar-material-icons">face</i>
关于我
</a>
</li>
<!-- Article Number -->
<li>
<a href="/archives">
文章总数
<span class="sidebar-badge">61</span>
</a>
</li>
</ul>
<!-- Sidebar Footer -->
<!--
I'm glad you use this theme, the development is no so easy, I hope you can keep the copyright, I will thank you so much.
If you still want to delete the copyrights, could you still retain the first one? Which namely "Theme Material"
It will not impact the appearance and can give developers a lot of support :)
很高兴您使用并喜欢该主题，开发不易 十分谢谢与希望您可以保留一下版权声明。
如果您仍然想删除的话 能否只保留第一项呢？即 "Theme Material"
它不会影响美观并可以给开发者很大的支持和动力。 :)
-->
<!-- Sidebar Divider -->
<!-- Theme Material -->
<!-- Help & Support -->
<!--
<a href="mailto:hiviosey@gmail.com" class="sidebar-footer-text-a">
<div class="sidebar-text mdl-button mdl-js-button mdl-js-ripple-effect sidebar-footer-text-div" data-upgraded=",MaterialButton,MaterialRipple">
sidebar.help
<span class="mdl-button__ripple-container">
<span class="mdl-ripple"></span>
</span>
</div>
</a>
-->
<!-- Feedback -->
<!--
<a href="https://github.com/viosey/hexo-theme-material/issues" target="_blank" class="sidebar-footer-text-a">
<div class="sidebar-text mdl-button mdl-js-button mdl-js-ripple-effect sidebar-footer-text-div" data-upgraded=",MaterialButton,MaterialRipple">
sidebar.feedback
<span class="mdl-button__ripple-container"><span class="mdl-ripple"></span></span></div>
</a>
-->
<!-- About Theme -->
<!--
-->
</div>
<!-- Sidebar Image -->
<span id="footer-image">
<a href="#" target="_blank" title="upyun_logo">
<img src="/img/favicon.ico" alt="upyun_logo"><!--
--></a>
</span>
</aside>
<!-- Footer Top Button -->
<div id="back-to-top" class="toTop-wrap">
<a href="#top" class="toTop">
<i class="material-icons footer_top-i">expand_less</i>
</a>
</div>
<!--Footer-->
<footer class="mdl-mini-footer" id="bottom">
<!-- Paradox Footer Left Section -->
<div class="mdl-mini-footer--left-section sns-list">
<!-- Twitter -->
<a href="https://twitter.com/Rockhellbear" target="_blank">
<button class="mdl-mini-footer--social-btn social-btn footer-sns-twitter">
<span class="visuallyhidden">Twitter</span>
</button><!--
--></a>
<!-- Facebook -->
<!-- Google + -->
<!-- Weibo -->
<a href="http://weibo.com/5330486979/fans?topnav=1&amp;wvr=6&amp;mod=message&amp;need_filter=1" target="_blank">
<button class="mdl-mini-footer--social-btn social-btn footer-sns-weibo">
<span class="visuallyhidden">Weibo</span>
</button><!--
--></a>
<!-- Instagram -->
<a href="https://www.instagram.com/jzxer/?hl=zh-cn" target="_blank">
<button class="mdl-mini-footer--social-btn social-btn footer-sns-instagram">
<span class="visuallyhidden">Instagram</span>
</button><!--
--></a>
<!-- Tumblr -->
<!-- Github -->
<a href="https://github.com/j710328466" target="_blank">
<button class="mdl-mini-footer--social-btn social-btn footer-sns-github">
<span class="visuallyhidden">Github</span>
</button><!--
--></a>
<!-- LinkedIn -->
<a href="http://www.linkedin.com/in/%E5%BF%97%E9%9B%84-%E6%B1%9F-338928105/" target="_blank">
<button class="mdl-mini-footer--social-btn social-btn footer-sns-linkedin">
<span class="visuallyhidden">LinkedIn</span>
</button><!--
--></a>
<!-- Zhihu -->
<!-- Bilibili -->
<a href="https://space.bilibili.com/73148384/#/" target="_blank">
<button class="mdl-mini-footer--social-btn social-btn footer-sns-bilibili">
<span class="visuallyhidden">Bilibili</span>
</button><!--
--></a>
<!-- Telegram -->
<!-- V2EX -->
</div>
<!--Copyright-->
<div id="copyright">
Copyright&nbsp;©&nbsp;2017&nbsp;-<script type="text/javascript">var fd = new Date();document.write("&nbsp;" + fd.getFullYear() + "&nbsp;");</script>Jzxer's Blog
<br>
<a href="#" rel="nofollow">热爱生活，热爱生命！</a>
</div>
<!-- Paradox Footer Right Section -->
<!--
I am glad you use this theme, the development is no so easy, I hope you can keep the copyright.
It will not impact the appearance and can give developers a lot of support :)
很高兴您使用该主题，开发不易，希望您可以保留一下版权声明。
它不会影响美观并可以给开发者很大的支持。 :)
-->
<div class="mdl-mini-footer--right-section">
<div>
<div class="footer-develop-div">Powered by <a href="https://hexo.io" target="_blank" class="footer-develop-a">Hexo</a></div>
<div class="footer-develop-div">Theme - <a href="https://github.com/viosey/hexo-theme-material" target="_blank" class="footer-develop-a">Material</a></div>
</div>
</div>
</footer>
<!-- Import JS File -->
<script>lsloader.load("lazyload_js","/js/lazyload.min.js?1BcfzuNXqV+ntF6gq+5X3Q==", true)</script>
<script>lsloader.load("js_js","/js/js.min.js?V/53wGualMuiPM3xoetD5Q==", true)</script>
<script>lsloader.load("np_js","/js/nprogress.js?pl3Qhb9lvqR1FlyLUna1Yw==", true)</script>
<script type="text/ls-javascript" id="NProgress-script">
NProgress.configure({
showSpinner: true
});
NProgress.start();
$('#nprogress .bar').css({
'background': '#efe8d8'
});
$('#nprogress .peg').css({
'box-shadow': '0 0 10px #efe8d8, 0 0 15px #efe8d8'
});
$('#nprogress .spinner-icon').css({
'border-top-color': '#efe8d8',
'border-left-color': '#efe8d8'
});
setTimeout(function() {
NProgress.done();
$('.fade').removeClass('out');
}, 800);
</script>
<script>lsloader.load("sm_js","/js/smoothscroll.js?lOy/ACj5suSNi7ZVFVbpFQ==", true)</script>
<!-- Leancloud -->
<script src="https://cdn1.lncld.net/static/js/av-core-mini-0.6.1.js"></script>
<script>
AV.initialize('ONAFtjxhaBqrA7LGAQFYsmUx-gzGzoHsz', 'hUSwCACEEbPBcGUh42RMzy6P');
</script>
<script type="text/ls-javascript" id="leancloud-views-script">
function showTime(Counter) {
var query = new AV.Query(Counter);
$('.leancloud-views_num').each(function() {
var url = $(this).attr('id').trim();
query.equalTo('url', url);
query.find({
success: function(results) {
if (results.length === 0) {
var content = '0 ' + $(document.getElementById(url)).text();
$(document.getElementById(url)).text(content);
return;
}
for (var i = 0; i < results.length; i++) {
var object = results[i];
var content = object.get('time') + ' ' + $(document.getElementById(url)).text();
$(document.getElementById(url)).text(content);
}
},
error: function(object, error) {
console.log('Error: ' + error.code + ' ' + error.message);
}
});
});
}
function addCount(Counter) {
var Counter = AV.Object.extend('Counter');
url = $('.leancloud-views_num').attr('id').trim();
title = $('.leancloud-views_num').attr('data-flag-title').trim();
var query = new AV.Query(Counter);
query.equalTo('url', url);
query.find({
success: function(results) {
if (results.length > 0) {
var counter = results[0];
counter.fetchWhenSave(true);
counter.increment('time');
counter.save(null, {
success: function(counter) {
var content = counter.get('time') + ' ' + $(document.getElementById(url)).text();
$(document.getElementById(url)).text(content);
},
error: function(counter, error) {
console.log('Failed to save Visitor num, with error message: ' + error.message);
}
});
} else {
var newcounter = new Counter();
newcounter.set('title', title);
newcounter.set('url', url);
newcounter.set('time', 1);
newcounter.save(null, {
success: function(newcounter) {
console.log('newcounter.get(\'time\')='+newcounter.get('time'));
var content = newcounter.get('time') + ' ' + $(document.getElementById(url)).text();
$(document.getElementById(url)).text(content);
},
error: function(newcounter, error) {
console.log('Failed to create');
}
});
}
},
error: function(error) {
console.log('Error:' + error.code + ' ' + error.message);
}
});
}
$(function() {
var Counter = AV.Object.extend('Counter');
if ($('.leancloud-views_num').length === 1) {
addCount(Counter);
} else if ($('.post-title-link').length > 1) {
showTime(Counter);
}
});
</script>
<!-- UC Browser Compatible -->
<script>
var agent = navigator.userAgent.toLowerCase();
if(agent.indexOf('ucbrowser')>0) {
document.write('<link rel="stylesheet" href="/css/uc.css">');
alert('由于 UC 浏览器使用极旧的内核，而本网站使用了一些新的特性。\n为了您能更好的浏览，推荐使用 Chrome 或 Firefox 浏览器。');
}
</script>
<!-- Import prettify js -->
<script>lsloader.load("prettify_js","/js/prettify.min.js?WN07fivHQSMKWy7BmHBB6w==", true)</script>
<!-- Window Load -->
<!-- add class for prettify -->
<script type="text/ls-javascript" id="window-load">
$(window).on('load', function() {
// Post_Toc parent position fixed
$('.post-toc-wrap').parent('.mdl-menu__container').css('position', 'fixed');
});
$(function() {
$('pre').addClass('prettyprint linenums').attr('style', 'overflow:auto;');
prettyPrint();
})
</script>
<!-- MathJax Load-->
<!-- Bing Background -->
<script type="text/ls-javascript" id="lazy-load">
// Offer LazyLoad
queue.offer(function(){
$('.lazy').lazyload({
effect : 'show'
});
});
// Start Queue
$(document).ready(function(){
setInterval(function(){
queue.execNext();
},200);
});
</script>
<!-- Custom Footer -->
<script>
(function(){
var scriptList = document.querySelectorAll('script[type="text/ls-javascript"]')
for (var i = 0; i < scriptList.length; ++i) {
var item = scriptList[i];
lsloader.runInlineScript(item.id,item.id);
}
})()
console.log('\n %c © Material Theme | Version: 1.5.2 | https://github.com/viosey/hexo-theme-material %c \n', 'color:#455a64;background:#e0e0e0;padding:5px 0;border-top-left-radius:5px;border-bottom-left-radius:5px;', 'color:#455a64;background:#e0e0e0;padding:5px 0;border-top-right-radius:5px;border-bottom-right-radius:5px;');
</script>
</main>
</div>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink