展示在简书博客中的一些示例代码，个人简书地址：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按钮闪烁

效果运行地址：Loading_1

效果运行地址：Loading_2

效果运行地址：Animate

效果运行地址：右键自定义菜单

效果运行地址：碰壁反弹_1

效果运行地址：碰壁反弹_2

效果运行地址：转圈圈

效果运行地址：翻转

效果运行地址：百度搜索框

效果运行地址：彩票机

效果运行地址：延时输出

效果运行地址：新浪微博