当前的文章分类为: 前端开发

Ublue jQuery Tabs插件 支持自定义样式 可多次调用

20

November

2012

这是我蛮早以前写的一个插件,自己平时的一些项目也是用的这个。一个页面中可以多次调用,并且支持自定义样式。使用的方法也很简单,只要类名一一对应就行。使用方便,如果有什么问题,直接给我留言就行。

调用方法:

$(function(){
	$(".tabs").UblueTabs(); //默认调用方法

	$(".custom").UblueTabs({ //自定义选项卡区域
	tabsTit:".customTit", //自定义标签区域
	tabsTab:".customTab", //自定义标签
	tabsCon:".customCon", //自定义内容区域
	tabsList:".customList", //自定义内容列表
	tabsHover:"customHover", //自定义鼠标点击后样式
	eventType:"click" //鼠标经过标签切换内容 (此处不写则默认为hover事件 当然也可以把这里的click改成hover)
	});
});

[ 查看全文... ]

编写自己的Sublime Text2 插件

15

November

2012

Sublime Text2(下文简称ST2) 是个小而强悍的跨平台编辑器(貌似很多文章开头都喜欢这样说一句,我也就不免俗了),至于特点和介绍我就不重复了,相信看这篇文章的你,一定对该软件有着一定的了解。不过有一点不得不说,那就是强大的插件功能,让原本精悍的ST2变的无比强大。本文呢,就是要介绍给大家,如何创建自己的ST2插件。

好了,话不多说,开始切入主题。大家跟着步骤一起操作吧:

1. To to Preferences -> Browse Packages… 打开Packages文件夹,在里面创建一个子文件夹(例:MypluginFolder),用来存放我们自己的插件。

2. To to Tools -> New Plugin... 创建一个新的插件。现在你所看到内容就是一个默认的示例,我们把它保存到我们刚才所创建的文件夹中(例:MyPlugin.py)。 [ 查看全文... ]

Ublue jQuery Waterfall(瀑布流式布局)

28

October

2012

引言:瀑布流式布局(又名:瀑布图片墙),而Pinterest则是该布局的鼻祖。最该布局形式最初在国内默默无闻,但随着蘑菇街、点点和花瓣网等等的兴起...这样的布局方式也渐渐被人们所熟知。可能有人不经意要问,为什么现在越来越多的网站都这样效仿呢?我个人总结了2点:首先,图片+链接的方式,方便了用户浏览,也能清晰找到相关内容,可谓是一目了然。其次,看似散乱无序的碎片化内容,有着强大的视觉感染力。由于内容随机和不确定性,更能够诱导用户反复查看,有时更像是种“探宝”希望找到自己所喜欢的内容。

好了,说了一堆介绍,开始进入正题。其实,这个Demo很早就开始制作了,由于种种原因,一直没能写这文章。由于最近在做一个项目,需要用到这个布局方式,也所谓是不用不知道,一用才知道,看似没什么问题,但在实际应用中,还是有很多问题需要解决。所以,边做项目的同时,也把Demo优化、更新了下。 [ 查看全文... ]

CSS3 transform rotate(旋转)锯齿的解决办法

21

September

2012

由于现在主要接触移动端,不需要考虑IE等古董浏览器的兼容性问题,所以能最大程度的使用CSS3所带来的便捷。

在近期的一个项目中,根据设计需求,需要把图片以倾斜5度的方式来呈现出效果。于是便做了一个例子:-moz-transform: rotate(5deg);-webkit-transform: rotate(5deg); 把图片旋转了5度。本以为轻而易举,可遇到了问题。在Fireofx中显示正常,但在webkit内核下的浏览器中,如Chrome和Safari,图片边缘会有很明显锯齿。也可以说是webkit抗锯齿的一个BUG。另外需要补充的一点,如果图片上级元素含有overflow:hidden;属性,则会让锯齿感更明显。 [ 查看全文... ]

CSS3 Skill Bar Animation

14

September

2012

可能我有一些小小洁癖,那就是看到好看、炫酷的网页效果都会忍不住想自己也制作一份,哪怕事模仿,也必须自己手动敲一边代码。自己身边也囤积了蛮多的实例,今后我会陆续把以前写的一些CSS3和jQuery案例拿出来分享并加以注释,一方面提供给大家,一方面也算是温故而知新吧。

今天所展示的案例,主要使用到了2个CSS3属性animation和keyframes。如果大家会Flash,相信就会很容易搞懂。根据例子中的代码,我们可以这样理解:
animation:实例名称 动画时长 动画方式;
keyframes:实例名称 { 从{起始位置} 到{结束位置} }; [ 查看全文... ]