在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开发的学习有很大益处。所以想要查看我的具体实现代码,直接在浏览器查看就好。
言归正传,这篇博文的主题是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开发的学习有很大益处。所以想要查看我的具体实现代码,直接在浏览器查看就好。