最近做一个购物站点,页面前需要圆角矩形效果, 而我不想使用背景图来实现,大概我不是美工的原因, 所以就采用 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
希望对大家有点帮助
分享到:
相关推荐
web期末大作业 基于HTML+CSS+JavaScript实现的仿京东商城首页登录页源码 web期末大作业 基于HTML+CSS+JavaScript实现的仿京东商城首页登录页源码 web期末大作业 基于HTML+CSS+JavaScript实现的仿京东商城首页登录页...
web期末大作业 基于HTML+CSS+JavaScript实现的电子商城购物网站首页源码 web期末大作业 基于HTML+CSS+JavaScript实现的电子商城购物网站首页源码 web期末大作业 基于HTML+CSS+JavaScript实现的电子商城购物网站首页...
html+css+JavaScript的学习代码html+css+JavaScript的学习代码 html+css+JavaScript的学习代码html+css+JavaScript的学习代码 html+css+JavaScript的学习代码html+css+JavaScript的学习代码 html+css+JavaScript的...
HTML5+CSS+javascript实现的手机商城静态页面.zipHTML5+CSS+javascript实现的手机商城静态页面.zipHTML5+CSS+javascript实现的手机商城静态页面.zipHTML5+CSS+javascript实现的手机商城静态页面.zipHTML5+CSS+...
web期末大作业 基于HTML+CSS+JavaScript实现的精美电商购物网站首页源码 web期末大作业 基于HTML+CSS+JavaScript实现的精美电商购物网站首页源码 web期末大作业 基于HTML+CSS+JavaScript实现的精美电商购物网站首页...
web期末大作业 基于HTML+CSS+JavaScript实现的蛋糕团购商城网页源码(4页) web期末大作业 基于HTML+CSS+JavaScript实现的蛋糕团购商城网页源码(4页) web期末大作业 基于HTML+CSS+JavaScript实现的蛋糕团购商城网页...
web期末大作业 基于HTML+CSS+JavaScript实现的商城首页源码 web期末大作业 基于HTML+CSS+JavaScript实现的商城首页源码 web期末大作业 基于HTML+CSS+JavaScript实现的商城首页源码 web期末大作业 基于...
web期末大作业 基于HTML+CSS+JavaScript实现的分期购物商城源码 web期末大作业 基于HTML+CSS+JavaScript实现的分期购物商城源码 web期末大作业 基于HTML+CSS+JavaScript实现的分期购物商城源码 web期末大作业 基于...
web期末大作业 基于HTML+CSS+JavaScript实现的积分兑换商城源码 web期末大作业 基于HTML+CSS+JavaScript实现的积分兑换商城源码 web期末大作业 基于HTML+CSS+JavaScript实现的积分兑换商城源码 web期末大作业 基于...
web期末大作业 基于HTML+CSS+JavaScript实现的团购商城首页源码 web期末大作业 基于HTML+CSS+JavaScript实现的团购商城首页源码 web期末大作业 基于HTML+CSS+JavaScript实现的团购商城首页源码 web期末大作业 基于...
web期末大作业 基于HTML+CSS+JavaScript实现的农业类水果商城首页源码 web期末大作业 基于HTML+CSS+JavaScript实现的农业类水果商城首页源码 web期末大作业 基于HTML+CSS+JavaScript实现的农业类水果商城首页源码 ...
web期末大作业 基于HTML+CSS+JavaScript实现的母婴用品购物商城首页源码 web期末大作业 基于HTML+CSS+JavaScript实现的母婴用品购物商城首页源码 web期末大作业 基于HTML+CSS+JavaScript实现的母婴用品购物商城首页...
Web期末大作业 基于HTML+CSS+JavaScript实现的海尔电器商城首页源码 Web期末大作业 基于HTML+CSS+JavaScript实现的海尔电器商城首页源码 Web期末大作业 基于HTML+CSS+JavaScript实现的海尔电器商城首页源码 Web期末...
web期末大作业 基于HTML+CSS+JavaScript实现的生活类购物商城首页源码 web期末大作业 基于HTML+CSS+JavaScript实现的生活类购物商城首页源码 web期末大作业 基于HTML+CSS+JavaScript实现的生活类购物商城首页源码 ...
web期末大作业 基于HTML+CSS+JavaScript实现的华为手机电子商城源码 web期末大作业 基于HTML+CSS+JavaScript实现的华为手机电子商城源码 web期末大作业 基于HTML+CSS+JavaScript实现的华为手机电子商城源码 web期末...
web期末大作业 基于HTML+CSS+JavaScript实现的家用电器电子商务商城源码(7页) web期末大作业 基于HTML+CSS+JavaScript实现的家用电器电子商务商城源码(7页) web期末大作业 基于HTML+CSS+JavaScript实现的家用电器...
web期末大作业 基于HTML+CSS+JavaScript实现的仿蘑菇街时尚购物商城首页源码 web期末大作业 基于HTML+CSS+JavaScript实现的仿蘑菇街时尚购物商城首页源码 web期末大作业 基于HTML+CSS+JavaScript实现的仿蘑菇街时尚...
web期末大作业 基于HTML+CSS+JavaScript实现的仿苏宁易购官网商城首页源码 web期末大作业 基于HTML+CSS+JavaScript实现的仿苏宁易购官网商城首页源码 web期末大作业 基于HTML+CSS+JavaScript实现的仿苏宁易购官网...
web期末大作业 基于HTML+CSS+JavaScript实现的仿天猫商城网站源码(9页) web期末大作业 基于HTML+CSS+JavaScript实现的仿天猫商城网站源码(9页) web期末大作业 基于HTML+CSS+JavaScript实现的仿天猫商城网站源码(9页)...
web期末大作业 基于HTML+CSS+JavaScript实现的母婴商城购物网站源码(7页) web期末大作业 基于HTML+CSS+JavaScript实现的母婴商城购物网站源码(7页) web期末大作业 基于HTML+CSS+JavaScript实现的母婴商城购物网站...