摘要:前言最近因需要自己封装了一个很简单的四级分类的jQuery插件,主要用于后台数据的传输和获取。接下来就分享一下这个实用的插件吧。正文老规矩,先看一下效果,这个就很丑了,没有美化的,因为主要还是用于后台界面使用的,同时请忽略测试数据的内容:那么下面就介绍一下使用方式:首先html代码: ... 阅读全文
posted @ 2015-08-09 20:40 郭锦荣 阅读(2566) 评论(0) 推荐(3) 编辑
摘要:图片画廊 今天分享一个自己实现的jQuery 图片画廊插件。 看一下效果图: 点击图片时: 在线演示地址:http://www.jr93.top/photoGallery/photoGallery.html 使用 使用也是很简单,代码如下: ... 阅读全文
posted @ 2015-08-02 13:34 郭锦荣 阅读(1857) 评论(1) 推荐(2) 编辑
摘要:创建 canvas 首先创建一个canvas元素,我们只需要在html文件中加入这么一句代码: 当前浏览器不支持canvas,请更换浏览器使用! 同时我们也可以通过canvas的标签属性width和height设置canvas画布的大小: 当前浏览器不支持canvas,请更换浏览器使用! 当然,我们也可以通过js来设置canvas的宽高,下文会提到如何设置。 接下来我们... 阅读全文
posted @ 2015-07-29 23:59 郭锦荣 阅读(28052) 评论(0) 推荐(2) 编辑
摘要:主 题 今天手把手教大家用CSS3制作圆形滚动进度条动画,想不会都难!那么,到底是什么东东呢?先不急,之前我分享了一个css实现进度条效果的博客《CSS实现进度条和订单进度条》,但是呢,那篇博客只是制作出来效果而已,并没有动画效果,因为当时正期末复习期间,所以就省了制作动画的时间成本。所以,今天就一... 阅读全文
posted @ 2015-07-26 15:47 郭锦荣 阅读(81424) 评论(6) 推荐(15) 编辑
摘要:今天把之前分享的两篇博客《CSS3实现10种Loading效果》和 《CSS3实现8种Loading效果【二】》整理了一下。因为之前所分享的各种loading效果都只是做了webkit内核浏览器的兼容性而已,但初衷还是想做成PC端的效果,所以就统一把所有效果都收集起来,并兼容各主流浏览器。最重要的是 阅读全文
posted @ 2015-07-26 00:35 郭锦荣 阅读(5823) 评论(1) 推荐(5) 编辑
摘要:前言 移动网络带宽的快慢直接影响webapp应用体验效果的优差,其中加载图片是很耗流量的,所以对这一方面的性能优化是很需要的。一般对于那些小而多的图片(图标)都会采用sprite合并成一张图片来减少http的请求次数。而CSS3的出现,无疑在移动端对图标的优化有着比较大的帮助。为此,自己也琢磨使用C 阅读全文
posted @ 2015-07-23 20:07 郭锦荣 阅读(5776) 评论(8) 推荐(8) 编辑
摘要:前言前两天我刚发布了一篇CSS3实现小黄人动画的博客,但是实现的CSS3动画是基于我在站酷网找到的一张小黄人的jpg格式图片,并自己用PS抠出需要实现动画的部分,最后才完成的动画效果。但是,其实我的初衷是想体验一下用图片做动画的赶脚,但是找不到素材,才无奈用了最笨的方法来满足自己的需求,本想勉强能看... 阅读全文
posted @ 2015-07-19 16:13 郭锦荣 阅读(11686) 评论(14) 推荐(12) 编辑
摘要:转载请注明出处,谢谢! 每次看到CSS3动画就心痒痒想试一下,记得一个多月前看了白树哥哥的一篇博客,突然开窍,于是拿他提供的demo试了一下,感觉很棒!下图为demo提供的动画帧设计稿。 自己也想说搞一个DIY的动画出来,可是,会PS不一定会设计啊,我搞不出一套动画设计稿出来啊【抓狂】….于是乎,去了站酷网找找素材,我果然还是太天真了,最后从心只找到了一张图: 联想到我要做CSS3动... 阅读全文
posted @ 2015-07-17 15:17 郭锦荣 阅读(3046) 评论(3) 推荐(1) 编辑
摘要:最近打开电脑就能看到极客学院什么新用户vip免费一个月,就进去看看咯,这里就不说它的课程怎么滴了,里面实战路径图页面看到了这个效果:有点像时间轴的赶脚,而且每一块鼠标悬浮上去也有下拉效果展开介绍截图信息,就感觉效果还不错。但感觉这种效果貌似对于动态添加不是很灵活,因为高度不像宽度可以灵活的自适应,故... 阅读全文
posted @ 2015-07-07 14:03 郭锦荣 阅读(21129) 评论(4) 推荐(5) 编辑
摘要:今晚吃完饭回宿舍又捣鼓了另外几种Loading效果,老规矩,直接“上菜“……注:gif图片动画有些卡顿,非实际效果!第一种效果:代码如下: .loading{ width: 80px; ... 阅读全文
posted @ 2015-07-06 22:46 郭锦荣 阅读(7514) 评论(4) 推荐(12) 编辑