用JavaScript做一个小小设计

这个项目是我无聊时完成的，参阅过很多大神的示例，其实方法并不难主要是js和css样式的设计，我发现自己还有很多的js代码写不出来更加不用提看的明白了，（PS吐槽一下：革命尚未成功，同志还需努力啊！)此项目由于引用的js文件太多代码就不全摊了。

引用的主要方法是视图背景的收缩动作（Some content to demonstrate viewport scrolling behavior ）、隐藏与显示动作（hide and shown）和导航菜单动作三个方法。

视图背景的收缩动作：

我们所知道的HTML<blockquote>标签的作用是文字内容在blockquote元素前后会添加换行并增加外边距的功能。

然而它在各类网站中都用的很广泛。我们访问<blockquote>元素一般都是用getElementById()的方法：

var x = document.getElementById("Blockquote");

创建<blockquote>对象则是document.createElement() 方法：

var x = document.createElement("BLOCKQUOTE");

隐藏与显示动作:

$(document).ready(function()
{
  $('#load-more-content').click(function()
  {
     
    $('#more-content').toggleClass('shown');
 
    $('#load-more-content').hide();
 
    if( $('#more-content').hasClass('shown') )
    {
      $('#load-more-content').text('隐藏内容');
      $('#more-content').fadeIn('slow', function()
      {
        $('#load-more-content').fadeIn('slow');
      });
    }
    else
    {
      $('#load-more-content').text('Load some content');
      $('#more-content').fadeOut('slow', function()
      {
        $('#load-more-content').fadeIn('slow');
      });
    }
  });
});

效果图:

查看

微调优化（改变了底部的“下一章”内容的动画特效）

在下代码尚不熟练，有很多地方需要改善优化的还望大神给出建议和指点，吾将感激不尽。