分享代码(CSS+Javascript实现圆角矩形)

本文介绍了一种不依赖背景图的圆角矩形实现方案,通过JavaScript与CSS结合,避免了图片加载带来的延迟,同时提供了独立的实现库,减少与其他JavaScript库的冲突。
最近做一个购物站点,页面前需要圆角矩形效果, 而我不想使用背景图来实现,大概我不是美工的原因, 所以就采用 javascript+css方式

至于原理,我想大家都知道,就是用一象素高的长短不一的元素叠出圆角效果来

你的眼睛欺骗了你的心

在写自己的实现前,我知道以下两个实现圆角矩形的库

Rico Round: http://openrico.org/demos?demo=effect_round

但是它依赖于rico的core等东东,不能独立使用,而我的项目中主要使用其他的js库(mootools),不想因此引入rico

还有一个是

Nifty Corners Cube: www.html.it/articoli/niftycube/index.html

其实它基本上能满足我的要求: 独立的完整的实现,不依赖于其他库, 使用也很方便。而且具有丰富的demo可以参考

但是它的代码占用了太多的顶层名字空间(我碰到了名字冲突),而且代码风格似乎不大好(55555,别给我扔鸡蛋)

所以我就写了自己的实现,其“工作代码”,基本上是 参考 Nifty Corners Cube

虽然重写了所有的代码(只有二百多行), 但“灵魂”来源于 Nifty Corners Cube,  我仅仅做了重构的工作,并且使用的CSS也是直接来源于它,所以js的名称还是 Nifty。

demo 全部来自于 Nifty Corners Cube

希望对大家有点帮助
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值