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

Ublue jQuery Image Carousel(焦点图、图片轮播)

Ublue jQuery Image Carousel(焦点图&图片轮播)v2.2

05

June

2013

焦点图和图片轮播,可以说几乎是每个网站必定会用到的内容。之前我有写过一个焦点图的插件jQuery图片切换效果 – Ublue jQuery Slideshow 1.0。而今天的这个插件,可以说是在此基础上的一个重新编译和扩展,结合了焦点图与图片轮播,并且根据不同的参数设置和CSS样式,能够组合出多种呈现方式,基本能够满足日常所需要的一些使用。

功能说明(v2.2):
1.支持多图滚动
2.鼠标经过暂停自动播放
3.小按钮支持点击和滑动切换
4.标题支持滑动显示
5.图片滚动范围自适应(只要设置外层的容器宽度,内部图片会根据外层大小,自动调节滚动次数和距离)
6.支持左右滚动、上下滚动、渐变(淡入淡出)、缩略图模式
7.单个页面可重复使用
8.兼容IE6+、Chrome、Firefox、Safari、Opera [ 查看全文... ]

jQuery 杂志翻页效果(基于CSS3)

杂志翻页效果(基于jQuery CSS3)

14

May

2013

由于自己的工作主要是做移动终端的产品(某阅读App),所以翻页啊什么更是一直接触。本人属于看到新鲜的、好玩的东西就手痒,所以诱使我写了今天的这个例子。

操作:键盘中“←左”“右→”方向键来实现翻页。

为了能带给您最佳的呈现效果,请使用基于webkit内核的浏览器:Chrome、Safari;不支持IE! [ 查看全文... ]

Goole API 二维码生成器

Google API 二维码在线生成器

17

April

2013

国际惯例,先来个知识普及:QRcode(学名为快速响应矩阵码)是二维条码的一种。并且QR码有容错能力,QR码图形如果有破损,仍然可以被机器读取内容,最高可以到7%~30%面积破损仍可被读取。利用30万像素以上的照相手机,搭配手机内的QR码解码软件,对着QR码一照,解码软件会自动解读此信息,显示于手机屏幕上面。

由于最近在做一些mobile网页,每次测试都要输入网址十分麻烦,于是就想自己搞个二维码的生成工具。虽然网上有蛮多类似工具,可调用起来始终不是很方便,例如以后给每篇博文增加一个二维码,但如果是自己写的,那就想怎么用就怎么用。搜索一翻之后,发现原来Google开放平台已经提供了二维码的API接口,于是便自己着手研究了下。
[ 查看全文... ]

Sublime Text Snippets(代码片段)功能

Sublime Text Snippets(代码片段)功能

02

April

2013

我们在编写代码的时候,总会遇到一些需要反复使用的代码片段。这时候就需要反复的复制和黏贴,大大影响效率。我们利用Sublime Text的snippet功能,就能很好的解决这一问题。通俗的讲,就是把我们常用的代码分别保存起啦,然后通过插件的形式来反复调用。

创建方法:Tools > New Snippet

这时你会看到如下示例代码:

<snippet>
     <content><![CDATA[
Hello, ${1:this} is a ${2:snippet}.
]]></content>
     <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
     <!-- <tabTrigger>hello</tabTrigger> -->
     <!-- Optional: Set a scope to limit where the snippet will trigger -->
     <!-- <scope>source.python</scope> -->
</snippet>

[ 查看全文... ]

Zen Coding 正式改名为 Emmet

Zen Coding 正式改名为 Emmet

01

April

2013

引言:相信对于前端开发人员而言,Zen Coding一定不会陌生。

最近时间发现Zen Coding总是Tab不出来,以为Plug-in出了问题,也没太在意。我想卸载了重装便能解决,结果还是无法正常使用。通过查找,原来Zen Coding已经停止更新,并由一个新的项目“Emmet”来代替了它。

Emmet在继承Zen Coding的基础上,还增强了对JavaScript和CSS3的支持。对于好东西,还等什么?动起你的双手安装吧:

Emmet安装方法:ctrl + shift + p > install Package > Emmet

原有插件卸载方法:ctrl + shift + p > Remove Package > 选择删除项 [ 查看全文... ]

CSS3 3D图书展示 (3D Book Showcase)

CSS3 3D图书展示 (3D Book Showcase)

31

January

2013

今天的例子,主要实现了:图书的360°翻转和图书打开的过渡效果。

这个效果,是我从一个国外网站上所看到的,由于效果逼真便又开始手痒了起来,自己制作了一个。有时候,光看代码觉得还好,但当自己从0开始制作的时候,顿时变的道路坎坷。期间遇到了很多小BUG和细节上的我问题,不过本人高要求搞标准,看到问题一定要修复的洁癖,这几天一直在不断的修改修改再修改,好在终于制作完成了(T_T)...

虽然花了大把的时间,不过总算有所收获,对CSS 3D Transforms有了一个更为详细的了解过程。平时觉得CSS 3D Transforms并没有那么复杂,想不到实际运用的时候还是会有很多未知的问题在等着你。其中,有个让我非常胸闷的问题。那就是为了偷懒,使用了prefixfree.min.js,导致页面每次加载的时候,都会触发transition-duration,导致有些效果在刷新的时候就执行了一次。我还以为是我哪写错了,寻找了好久... [ 查看全文... ]

无觅相关文章插件,快速提升流量