展示在简书博客中的一些示例代码，个人简书地址：Nian糕_JavaScript
当网页内容较多时，通过点击侧边栏，能够使我们能快速回到网页的指定位置，在大屏设备中，侧边栏往往是悬浮于屏幕右侧，很方便用户的使用，但在小屏设备中，屏幕空间有限，所以我们会通过隐藏侧边栏的方式，来节省视口空间的使用
在 min-width 为 1410px 的运行效果：
在 max-width 为 1410px 的运行效果：
效果运行地址：侧边栏在小屏设备中进行隐藏
在 PC 网站首页，banner 图作为网页中最大的一张图片，在传达网页的的主要信息的同时，也吸引着浏览者的所有注意力，所以 banner 图的展示方式直接影响着用户的体验，我们可以将图片独立出来，并通过隐藏图片两侧的方式，使得 banner 图在不同尺寸的视口中居中显示
当视口宽度与图片宽度同为 1920 px 时，Nian 糕正好处于视图居中位置，页面效果如下图所示：
当视口宽度为 1210 px 时，页面效果如下图所示：
效果运行地址：banner图响应式居中显示
当我们在浏览网页的时候，描述性的文本通常不会跟在图片之后，而是当我们将鼠标移至图片上时，才会将文本显示出来，这样的好处是，以突显图片为主，并节省布局空间
使用 CSS 来实现鼠标悬停图片，显示隐藏文本的效果：
效果运行地址：鼠标悬停图片，显示隐藏文本 CSS
使用 JS 来实现鼠标悬停图片，显示隐藏文本的效果：
效果运行地址：鼠标悬停图片，显示隐藏文本 JS
当一个区域需要展示多张图片，而该区域的空间大小受到限制时，我们可以通过这种方式来达到预览哪张图片就展示该图片，并隐藏其他图片的方式来达到目的
效果运行地址：鼠标滑动，图片显示隐藏
使用到了 canvas 元素来让屏幕呈现 Hacker 流星雨效果
效果运行地址：Hacker流星雨
活动中常常会有抽奖的方式，而抽奖的方式有很多，但原理上基本是一致的，这里分享一个九宫格的抽奖方式
效果运行地址：九宫格抽奖
手风琴效果能够帮助你，在有限的页面空间内，展示多个内容片段，使得用户能非常友好的实现多个内容片段之间的切换
效果运行地址：手风琴效果
在浏览电商网站时，放大镜的效果能够让我们了解更多关于该商品的细节
效果运行地址：放大镜效果
效果运行地址：3D立方体
效果运行地址：走马灯
效果运行地址：Loading按钮闪烁
效果运行地址：右键自定义菜单
效果运行地址：碰壁反弹