代码拉取完成，页面将自动刷新
<!doctype html>
<html class="theme-next use-motion theme-next-next2">
<head>
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<link rel="stylesheet" type="text/css" href="/hexo/vendors/fancybox/source/jquery.fancybox.css?v=2.1.5"/>
<link rel="stylesheet" type="text/css" href="/hexo/css/main.css?v=0.4.0"/>
<meta name="description" content="Just a little effort you can create miracles." />
<meta name="keywords" content="Hexo,next" />
<link rel="alternate" href="/hexo/atom.xml" title="IMike" type="application/atom+xml" />
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="shorticon icon" type="image/x-icon" href="/hexo/favicon.ico?v=0.4.0" />
<title> IMike </title>
</head>
<body>
<div class="container one-column
page-home
">
<div class="headband"></div>
<div id="header" class="header">
<div class="header-inner">
<h1 class="site-meta">
<span class="logo-line-before"><i></i></span>
<a href="/hexo/" class="brand">
<span class="logo">
<i class="icon-logo"></i>
</span>
<span class="site-title">IMike</span>
</a>
<span class="logo-line-after"><i></i></span>
</h1>
<ul id="menu" class="menu">
<li class="menu-item menu-item-home">
<a href="/hexo/">
<i class="menu-item-icon icon-home"></i> <br />
首页
</a>
</li>
<li class="menu-item menu-item-archives">
<a href="/hexo/archives">
<i class="menu-item-icon icon-archives"></i> <br />
归档
</a>
</li>
<li class="menu-item menu-item-tags">
<a href="/hexo/tags">
<i class="menu-item-icon icon-tags"></i> <br />
标签
</a>
</li>
<li class="menu-item menu-item-categories">
<a href="/hexo/categories">
<i class="menu-item-icon icon-categories"></i> <br />
分类
</a>
</li>
<li class="menu-item menu-item-about">
<a href="/hexo/about">
<i class="menu-item-icon icon-about"></i> <br />
关于
</a>
</li>
</ul>
</div>
</div>
<div id="main" class="main">
<div class="main-inner">
<div id="content" class="content">
<div id="posts" class="posts-expand">
<div class="post post-type-normal ">
<div class="post-header">
<h1 class="post-title">
<a class="post-title-link" href="/hexo/2015/06/03/css/">
css清除浮动的技巧
</a>
</h1>
<div class="post-meta">
<span class="post-time">
发表于 2015-06-03
</span>
<span class="post-category">
| 分类于
<a href="/hexo/categories/技术/">技术</a>
</span>
<span class="post-comments-count">
|
<a href="/hexo/2015/06/03/css/#comments" >
<span class="post-comments-count ds-thread-count" data-thread-key="2015/06/03/css/"></span>
</a>
</span>
</div>
</div>
<div class="post-body">
<h4 id="1、什么是css清除浮动？">1、什么是css清除浮动？</h4><p>在非IE浏览器下，当容器的高度为auto，且容器的内容中有浮动的元素，在这种情况下，容器的高度不能自定伸长以适应内容的高度，使得内容溢出到外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现而进行的css处理，就叫css清除浮动。</p>
<p>引用w3c的例子，news容器没有包围浮动元素<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">.news {</span><br><span class="line"> background-color: gray;</span><br><span class="line"> border: solid <span class="number">1</span>px black;</span><br><span class="line"> }</span><br><span class="line">.news img {</span><br><span class="line"> <span class="built_in">float</span>: left;</span><br><span class="line"> }</span><br><span class="line">.news p {</span><br><span class="line"> <span class="built_in">float</span>: right;</span><br><span class="line"> }</span><br><span class="line"><div class=<span class="string">"news"</span>></span><br><span class="line"><img src=<span class="string">"news-pic.jpg"</span> /></span><br><span class="line"><p>some text</p></span><br><span class="line"></div></span><br></pre></td></tr></table></figure></p>
<p><img src="http://7xjgnf.com1.z0.glb.clouddn.com/3478939f-ebde-461b-95d5-82e907655993.jpg" alt="浮动图例："></p>
<h4 id="2、清除浮动的方法">2、清除浮动的方法</h4><h5 id="方法一：使用带clear属性的空元素">方法一：使用带clear属性的空元素</h5><p>在浮动元素后使用一个空元素如<div class="clear"></div>,并在css中赋予.clear{clear:both;}属性即可清理浮动。<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line">.news {</span><br><span class="line"> background-color: gray;</span><br><span class="line"> border: solid <span class="number">1</span>px black;</span><br><span class="line"> }</span><br><span class="line">.news img {</span><br><span class="line"> <span class="built_in">float</span>: left;</span><br><span class="line"> }</span><br><span class="line">.news p {</span><br><span class="line"> <span class="built_in">float</span>: right;</span><br><span class="line"> }</span><br><span class="line">.clear {</span><br><span class="line"> clear: both;</span><br><span class="line"> }</span><br><span class="line"><div class=<span class="string">"news"</span>></span><br><span class="line"><img src=<span class="string">"news-pic.jpg"</span> /></span><br><span class="line"><p>some text</p></span><br><span class="line"><div class=<span class="string">"clear"</span>></div></span><br><span class="line"></div></span><br></pre></td></tr></table></figure></p>
<p>优点：简单，代码少，浏览器兼容性好。<br>缺点：需要添加大量无语义的html元素，代码不够优雅，后期不容易维护。</p>
<h5 id="方法二：使用css的overflow属性">方法二：使用css的overflow属性</h5><p>给浮动元素的容器添加overflow:hidden;或overflow:auto;可以清除浮动，另外在IE6中还需要触发hasLayout,例如为父元素设置容器宽度或设置zoom:1.<br>在添加overflow属性后，浮动元素又回到了容器层，把容器高度撑起，达到了清理浮动的效果。</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">.news {</span><br><span class="line"> background-color: gray;</span><br><span class="line"> border: solid <span class="number">1</span>px black;</span><br><span class="line"> overflow: hidden;</span><br><span class="line"> *zoom: <span class="number">1</span>;</span><br><span class="line"> }</span><br><span class="line">.news img {</span><br><span class="line"> <span class="built_in">float</span>: left;</span><br><span class="line"> }</span><br><span class="line">.news p {</span><br><span class="line"> <span class="built_in">float</span>: right;</span><br><span class="line"> }</span><br><span class="line"><div class=<span class="string">"news"</span>></span><br><span class="line"><img src=<span class="string">"news-pic.jpg"</span> /></span><br><span class="line"><p>some text</p></span><br><span class="line"></div></span><br></pre></td></tr></table></figure>
<h5 id="方法三：给浮动的元素的容器添加浮动">方法三：给浮动的元素的容器添加浮动</h5><p>给浮动元素的容器也添加上浮动属性即可清除内部浮动，但是这样会使其整体浮动，影响布局，不推荐使用。</p>
<h5 id="方法四：使用邻接元素处理">方法四：使用邻接元素处理</h5><p>什么都不做，给浮动元素后面的元素添加clear属性。</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line">.news {</span><br><span class="line"> background-color: gray;</span><br><span class="line"> border: solid <span class="number">1</span>px black;</span><br><span class="line"> }</span><br><span class="line">.news img {</span><br><span class="line"> <span class="built_in">float</span>: left;</span><br><span class="line"> }</span><br><span class="line">.news p {</span><br><span class="line"> <span class="built_in">float</span>: right;</span><br><span class="line"> }</span><br><span class="line">.content{</span><br><span class="line"> clear:both;</span><br><span class="line"> }</span><br><span class="line"><div class=<span class="string">"news"</span>></span><br><span class="line"><img src=<span class="string">"news-pic.jpg"</span> /></span><br><span class="line"><p>some text</p></span><br><span class="line"><div class=<span class="string">"content"</span>></div></span><br><span class="line"></div></span><br></pre></td></tr></table></figure>
<h5 id="方法五：使用css的:after伪元素">方法五：使用css的:after伪元素</h5><p>结合:after伪元素（注意这不是伪类，而是伪元素，代表一个元素之后最近的元素）和IEhack，可以完美兼容当前主流的各大浏览器，这里的IEhack指的是触发hasLayout。给浮动元素的容器添加一个clearfix的class，当然给这个class添加一个:after伪元素市县元素末尾添加一个看不见的块元素清理浮动。</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line">.news {</span><br><span class="line"> background-color: gray;</span><br><span class="line"> border: solid <span class="number">1</span>px black;</span><br><span class="line"> }</span><br><span class="line">.news img {</span><br><span class="line"> <span class="built_in">float</span>: left;</span><br><span class="line"> }</span><br><span class="line">.news p {</span><br><span class="line"> <span class="built_in">float</span>: right;</span><br><span class="line"> }</span><br><span class="line">.clearfix:after{</span><br><span class="line"> display:block;</span><br><span class="line"> content:<span class="string">""</span>;</span><br><span class="line"> clear:both;</span><br><span class="line"> height:<span class="number">0</span>;</span><br><span class="line"> visibility:hidden;</span><br><span class="line"> }</span><br><span class="line">.clearfix {</span><br><span class="line"> /* 触发 hasLayout */ </span><br><span class="line"> zoom: <span class="number">1</span>; </span><br><span class="line"> }</span><br><span class="line"><div class=<span class="string">"news clearfix"</span>></span><br><span class="line"><img src=<span class="string">"news-pic.jpg"</span> /></span><br><span class="line"><p>some text</p></span><br><span class="line"></div></span><br></pre></td></tr></table></figure>
<p>通过css伪元素在容器的内部元素最后添加一个看不见的空格“020”或点“.”，并且赋予clear属性来清除浮动。需要注意的是为了IE6和IE7浏览器，要给clearfix这个class添加一条zoom:1；触发hasLayout。</p>
<p>总结<br>通过上面的例子，我们不难发现清除浮动的方法可以分成两类：<br>一是利用clear属性，包括在浮动元素末尾添加一个带有clear:both属性的空div来闭合元素，其实利用：after伪元素的方法也是在元素末尾添加一个内容为一个点并带有clear：both属性的元素实现的。<br>二是触发浮动元素父元素的BFC（Block Formatting Contexts，块级格式化上下文），使到该父元素可以包含浮动元素，关于这一点。</p>
<p>推荐<br>在网页主要布局时使用：after伪元素方法并作为主要清理浮动方式；在小模块如ul里使用overflow：hidden（留意可能产生的隐藏溢出的问题）；如果本身就是浮动元素则可自动清除内部浮动，无需格外处理；正文中使用邻接元素处理之前的浮动。</p>
<p>最后可以使用相对完美的：after伪元素方法清理浮动，文档结构更加清晰。</p>
<p>最简单的一种也是消耗最小的一种：</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">.clearfix:before,</span><br><span class="line">.clearfix:after {</span><br><span class="line"> content: <span class="string">" "</span>;</span><br><span class="line"> display: table;</span><br><span class="line">}</span><br><span class="line">.clearfix:after {</span><br><span class="line"> clear: both;</span><br><span class="line">}</span><br><span class="line">.clearfix {</span><br><span class="line"> *zoom: <span class="number">1</span>;</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
</div>
<div class="post-footer">
<div class="post-tags">
<a href="/hexo/tags/css/">
#css
</a>
<a href="/hexo/tags/html/">
#html
</a>
</div>
<div class="post-eof"></div>
</div>
</div>
<div class="post post-type-normal ">
<div class="post-header">
<h1 class="post-title">
<a class="post-title-link" href="/hexo/2015/06/02/hexo/">
hexo 博客
</a>
</h1>
<div class="post-meta">
<span class="post-time">
发表于 2015-06-02
</span>
<span class="post-category">
| 分类于
<a href="/hexo/categories/blog/">blog</a>
</span>
<span class="post-comments-count">
|
<a href="/hexo/2015/06/02/hexo/#comments" >
<span class="post-comments-count ds-thread-count" data-thread-key="2015/06/02/hexo/"></span>
</a>
</span>
</div>
</div>
<div class="post-body">
<p>最近想写博客了，在网上找了很久的框架，直到有一天遇到了hexo，感觉太美好了。因为他是基于nodejs的、轻量级框架。根据前辈们的一些博客，渐渐的熟悉了hexo，并且搭建起来了。这里我也不写怎么搭建了，大家可以去参考前辈们的博客：<a href="http://zipperary.com/2013/05/28/hexo-guide-1/" target="_blank" rel="external">Zippera’s blog</a>以及<a href="http://ibruce.info/2013/11/22/hexo-your-blog/" target="_blank" rel="external">不如</a></p>
<p>这是只是讲一下自己在搭建过程中遇到的一些问题仅供大家参考：</p>
<p>首先还是需要你安装nodejs以及git<br>然后生成sshkey，然后验证，这时候可能会有一个问题Permission denied<br>只是后你需要：<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">eval</span> <span class="string">"<span class="variable">$(ssh-agent -s)</span>"</span></span><br></pre></td></tr></table></figure></p>
<p>下面是就安装hexo了<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">npm install -g hexo</span><br><span class="line">//然后初始化</span><br><span class="line">hexo init</span><br><span class="line">//这个地方需要注意的是一定要在你存在hexo的目录下初始化（D:/hexo）</span><br><span class="line">//之后在下载npm依赖包</span><br><span class="line">npm install</span><br><span class="line">//之后在就是配置你的hexo了，请参考上面的博客，然后关联github</span><br><span class="line">//最新的hexo关联github时<span class="built_in">type</span>：git</span><br><span class="line">//配置好之后，执行下面的命令</span><br><span class="line">hexo g</span><br><span class="line">hexo d</span><br><span class="line">//此时你发现会报错，因为少了git依赖包</span><br><span class="line">npm install hexo-deployer-git --save</span><br><span class="line">//然后在执行</span><br><span class="line">hexo g</span><br><span class="line">hexo d</span><br></pre></td></tr></table></figure></p>
<p>之后就差不多了，你就可以开始写博客了。<br>这算是我的第一篇博客，写的不好，希望大家支持，以后会更好。</p>
<h3 id="参考文献">参考文献</h3><p><a href="http://zipperary.com/2013/05/28/hexo-guide-1/" target="_blank" rel="external">Zippera’s blog</a><br><a href="http://ibruce.info/2013/11/22/hexo-your-blog/" target="_blank" rel="external">不如</a></p>
</div>
<div class="post-footer">
<div class="post-tags">
<a href="/hexo/tags/博客，文章/">
#博客，文章
</a>
</div>
<div class="post-eof"></div>
</div>
</div>
</div>
</div>
<div class="sidebar-toggle">
<div class="sidebar-toggle-line-wrap">
<span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
<span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
<span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
</div>
</div>
<div id="sidebar" class="sidebar">
<div class="sidebar-inner">
<div class="site-overview">
<div class="site-author motion-element">
<img class="site-author-image" src="/hexo/images/default_avatar.jpg" alt="IMike" />
<p class="site-author-name">IMike</p>
</div>
<p class="site-description motion-element">Just a little effort you can create miracles.</p>
<div class="site-state motion-element">
<div class="site-state-item site-state-posts">
<span class="site-state-item-count">2</span>
<span class="site-state-item-name">日志</span>
</div>
<div class="site-state-item site-state-tags">
<span class="site-state-item-count">3</span>
<span class="site-state-item-name">标签</span>
</div>
<div class="site-state-item site-state-pages">
<span class="site-state-item-count">3</span>
<span class="site-state-item-name">页面</span>
</div>
</div>
<div class="feed-link motion-element">
<a href="/hexo/atom.xml">
<i class="menu-item-icon icon-feed"></i>
RSS
</a>
</div>
<div class="links-of-author motion-element">
<span class="links-of-author-item">
<a href="http://github.com/essencemike">GitHub</a>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="footer" class="footer">
<div class="footer-inner">
<div class="copyright">
©
2015
<span class="with-love">
<i class="icon-heart"></i>
</span>
<span class="author">IMike</span>
</div>
亲，你是第<span id="busuanzi_value_site_uv"><i class="fa fa-spinner fa-spin"></i></span>个访问我博客的小伙伴，希望对你有所帮助。<br/>
<div class="powered-by">
由 <a class="theme-link" href="http://hexo.io">Hexo</a> 强力驱动
</div>
<div class="theme-info">
主题 -
<a class="theme-link" href="https://github.com/iissnan/hexo-theme-next">
NexT.Mist
</a>
</div>
</div>
</div>
<div class="back-to-top"></div>
</div>
<script type="text/javascript" src="/hexo/vendors/jquery/index.js?v=2.1.3"></script>
<script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<script type="text/javascript" src="/hexo/vendors/fancybox/source/jquery.fancybox.pack.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>
<script type="text/javascript">
function hasMobileUA () {
var nav = window.navigator;
var ua = nav.userAgent;
var pa = /iPad|iPhone|Android|Opera Mini|BlackBerry|webOS|UCWEB|Blazer|PSP|IEMobile|Symbian/g;
return pa.test(ua);
}
function isDesktop () {
return screen.width > 991 && !hasMobileUA();
}
function isTablet () {
return screen.width < 992 && screen.width > 767 && hasMobileUA();
}
function isMobile () {
return screen.width < 767 && hasMobileUA();
}
function escapeSelector (selector) {
return selector.replace(/[!"$%&'()*+,.\/:;<=>?@[\\\]^`{|}~]/g, "\\$&")
}
</script>
<script type="text/javascript" src="/hexo/vendors/velocity/velocity.min.js"></script>
<script type="text/javascript" src="/hexo/vendors/velocity/velocity.ui.min.js"></script>
<script type="text/javascript" id="motion.global">
$(document).ready(function () {
var body = $('body');
var isSidebarVisible = false;
var sidebarToggle = $('.sidebar-toggle');
var sidebarToggleLine1st = $('.sidebar-toggle-line-first')
var sidebarToggleLine2nd = $('.sidebar-toggle-line-middle');
var sidebarToggleLine3rd = $('.sidebar-toggle-line-last');
var sidebar = $('.sidebar');
var SIDEBAR_WIDTH = '320px';
var SIDEBAR_DISPLAY_DURATION = 300;
var sidebarToogleLineStatusInit = {width: '100%', opacity: 1, left: 0, rotateZ: 0, top: 0};
var sidebarToggleLine1stStatusInit = sidebarToogleLineStatusInit;
var sidebarToggleLine1stStatusArrow = {width: '50%', rotateZ: '-45deg', top: '2px'};
var sidebarToogleLine1stStatusClose = {width: '100%', rotateZ: '-45deg', top: '5px'};
var sidebarToggleLine2ndStatusInit = sidebarToogleLineStatusInit;
var sidebarToggleLine2ndStatusArrow = {width: '90%'};
var sidebarToogleLine2ndStatusClose = {opacity: 0};
var sidebarToggleLine3rdStatusInit = sidebarToogleLineStatusInit;
var sidebarToggleLine3rdStatusArrow = {width: '50%', rotateZ: '45deg', top: '-2px'};
var sidebarToogleLine3rdStatusClose = {width: '100%', rotateZ: '45deg', top: '-5px'};
LogoAndMenuMotion();
sidebatToggleMotion();
postsListMotion();
backToTopMotion();
$(document)
.on('sidebar.isShowing', function () {
isDesktop() && body.velocity(
{paddingRight: SIDEBAR_WIDTH},
SIDEBAR_DISPLAY_DURATION
);
sidebarContentMotion();
})
.on('sidebar.isHiding', function () {});
function LogoAndMenuMotion() {
$.Velocity.RunSequence([
{ e: $('.brand'), p: { opacity: 1 }, o: { duration: 100 } },
{ e: $('.logo'), p: { opacity: 1, top: 0 }, o: { duration: 50} },
{ e: $('.logo-line-before i'), p: { translateX: "100%" }, o: { duration: 500, sequenceQueue: false } },
{ e: $('.logo-line-after i'), p: { translateX: "-100%" }, o: { duration: 500, sequenceQueue: false } },
{ e: $('.site-title'), p: { opacity: 1, top: 0 }, o: { duration: 200 } }
]);
$('.menu-item').velocity('transition.slideDownIn', {display: null});
}
function backToTopMotion () {
var b2top = $('.back-to-top');
b2top.on('click', function () {
body.velocity('scroll');
});
}
function sidebarShowMotion () {
sidebarToggleLine1st.velocity(sidebarToogleLine1stStatusClose);
sidebarToggleLine2nd.velocity(sidebarToogleLine2ndStatusClose);
sidebarToggleLine3rd.velocity(sidebarToogleLine3rdStatusClose);
sidebar.velocity({width: SIDEBAR_WIDTH}, {
display: 'block',
duration: SIDEBAR_DISPLAY_DURATION,
complete: function () {
sidebar.addClass('sidebar-active');
sidebar.trigger('sidebar.didShow');
}
});
sidebar.trigger('sidebar.isShowing');
}
function sidebarHideMotion () {
isDesktop() && body.velocity({paddingRight: 0});
sidebar.velocity('reverse');
sidebarToggleLine1st.velocity(sidebarToggleLine1stStatusInit);
sidebarToggleLine2nd.velocity(sidebarToggleLine2ndStatusInit);
sidebarToggleLine3rd.velocity(sidebarToggleLine3rdStatusInit);
sidebar.removeClass('sidebar-active');
sidebar.trigger('sidebar.isHiding');
};
function sidebarContentMotion () {
$('.sidebar .motion-element').velocity(
'transition.slideRightIn',
{stagger: 50, drag: true}
);
}
function postsListMotion () {
var postMotionOptions = window.postMotionOptions || {stagger: 300, drag: true};
$('.post').velocity('transition.slideDownIn', postMotionOptions);
}
function sidebatToggleMotion () {
sidebarToggle.on('click', function () {
isSidebarVisible ? sidebarHideMotion() : sidebarShowMotion();
isSidebarVisible = !isSidebarVisible;
});
sidebarToggle.hover(function () {
if (isSidebarVisible) {return}
sidebarToggleLine1st.velocity('stop').velocity(sidebarToggleLine1stStatusArrow);
sidebarToggleLine2nd.velocity('stop').velocity(sidebarToggleLine2ndStatusArrow);
sidebarToggleLine3rd.velocity('stop').velocity(sidebarToggleLine3rdStatusArrow);
}, function () {
if (isSidebarVisible) {return}
sidebarToggleLine1st.velocity('stop').velocity(sidebarToggleLine1stStatusInit);
sidebarToggleLine2nd.velocity('stop').velocity(sidebarToggleLine2ndStatusInit);
sidebarToggleLine3rd.velocity('stop').velocity(sidebarToggleLine3rdStatusInit);
});
}
});
</script>
<script type="text/javascript">
var duoshuoQuery = {short_name:"IMike"};
(function() {
var ds = document.createElement('script');
ds.type = 'text/javascript';ds.async = true;
ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
ds.charset = 'UTF-8';
(document.getElementsByTagName('head')[0]
|| document.getElementsByTagName('body')[0]).appendChild(ds);
})();
</script>
</body>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手