QQ滑动侧栏效果

在2016暑假前面大概一个月的断断续续（同时在考驾照）的web前端开发的学习，我已经对HTML、HTML5、CSS、CSS3、JavaScript和bootstrap有了基本的了解，前几天也自己设计并完成了个人网站的首页建设，虽然还有很多不完善的地方等待后续的解决，还是先给出链接：<a href="http://jackt.cn" target="_blank">jackt.cn</a>。欢迎大家访问，很希望收到改善建议！

言归正传，这篇博文的主题是QQ滑动侧栏效果，这是在web开发领域的“前辈”（其实是我的高中同学，但是他有丰富的web开发经验，而我是半路出家开始学习）给我的命题，就是用网页来模拟实现手机版QQ的右滑出现左侧栏菜单的效果，因为需要用到jQuery的知识，我花半天时间看了一遍jQuery的教程（具体网站见<a href="http://www.runoob.com/jquery/jquery-tutorial.html" target="_blank">菜鸟教程</a>，这是一个对web开发学习很有帮助的网站），然后准备花一下午时间来完成这个效果，果然，新手写东西问题多多，一下午大概写了个雏形，有很多问题还是晚上在“前辈”的指教下完成的，先PO上链接：<a href="http://jackt.cn/test/jQuery_test.html#" target="_blank">jQuery实现QQ滑动侧栏效果</a>。需要说明的是，我的电脑不是触控屏的，所以我用一个按钮代替了滑动的手势来模拟实现这个效果。这个的实现主要是通过jQuery的animate来实现的。

因为前面通过jQuery实现的滑动侧栏效果，但是jQuery本质就是js代码，通过js代码做成动画效果对浏览器的负担更大一点，所以渲染效果肯定不是最佳，所以今天我又用css3的addClass和removeClass重新实现了这个效果，css3是浏览器原生写好的，渲染效果比用js代码实现要更好，算是有一点改进，这里PO上链接：<a href="http://jackt.cn/test/CSS3_test.html"target="_blank">css3实现QQ滑动侧栏效果</a>。

web开发的一个好处就是无论什么网站的页面，你都能查看它的源代码，并且从中学到很多东西，多看看大的互联网公司（为什么强调互联网公司？有些XX机构的官网页面还停留在 win XP时代）的网站页面对web开发的学习有很大益处。所以想要查看我的具体实现代码，直接在浏览器查看就好。