分享代码(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

希望对大家有点帮助
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值