用js实现的抽象CSS圆角效果!!


Posted in Javascript onMay 03, 2007

大概是去年的时候吧,就在网上见过了现成的CSS圆角效果的CSS及HTML代码,例如:

<html>
<head>
<title>css圆角效果</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<style type="text/css">
div.RoundedCorner{background: #9BD1FA}
b.rtop, b.rbottom{display:block;background: #FFF}
b.rtop b, b.rbottom b{display:block;height: 1px;overflow: hidden; background: #9BD1FA}
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}
</style>
</head>
<body>
<div class="RoundedCorner">
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
1
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
</div>
</body>
</html> 

当然这样人为的把圆角值设置好,也非常好用了,基本上这段代码拿过去就可以用,但是如果要改变这个圆角的大小,要在这个角上加边框或基它的效果,那这段代码拿来就发挥不了它的威力了.就想做一个抽像化的组件化的东西出来!今年可谓是花费了几乎一天的时间!

想一想,圆角的四个角加在一起正好是一个圆,而圆的表达式是x*x+y*y=r*r,即x的平方加上y的平方等于半径的平方!有了这个公式,那么实现圆解的理论就得以角决了!

开始一步步的测试由没有到有,由零难化到组件化吧!我把一个圆角实现分为这样的结构
[顶部][顶部圆角显示控制][/顶部]
[主体][主体左边显示圆解控制][主体内容][主体右边显示贺角控制][/主体]
[底部][底部圆解显示控制][/底部]
得到今天的测试代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS圆角框加组件开发--测试过程</title>
<style type="text/css">
<!--
#box,#topbox,#bottombox{
width:400px;
}
#box .content{ background-color:#FFCC00;height:400px;}
<?php
for($y=1;$y<=4;$y++){
 $x=(int)sqrt(4*4-$y*$y);
 $sx=4-$x;
 echo ".line{$y}{height:1px;overflow:hidden; background-color:#FFCC00;margin: 0 {$sx}px;}\n";
}
?>

-->
</style>
</head>

<body>
<div id="topbox">
<?php
for($y=4;$y>=1;$y--){
echo "<div class=\"line{$y}\"></div>\n";
}
?>
</div>
<div id="box">
<div class="content"> aaaaaaaaaaaaaaaaaa</div>
</div>
<div id="bottombox">
<?php
for($y=1;$y<=4;$y++){
echo "<div class=\"line{$y}\"></div>\n";
}
?>
</div>
</body>
</html>

Javascript 相关文章推荐
Lazy Load 延迟加载图片的jQuery插件中文使用文档
Oct 18 Javascript
AngularJS中取消对HTML片段转义的方法例子
Jan 04 Javascript
浅析Node.js中使用依赖注入的相关问题及解决方法
Jun 24 Javascript
JavaScript实现自动消除按钮功能的方法
Aug 05 Javascript
轮播图组件js代码
Aug 08 Javascript
Vue.js双向绑定操作技巧(初级入门)
Dec 27 Javascript
微信小程序 支付功能(前端)的实现
May 24 Javascript
Vue批量图片显示时遇到的路径被解析问题
Mar 28 Javascript
微信小程序Echarts图表组件使用方法详解
Jun 25 Javascript
Vue 实现html中根据类型显示内容
Oct 28 Javascript
利用H5api实现时钟的绘制(javascript)
Sep 13 Javascript
vue 验证两次输入的密码是否一致的方法示例
Sep 29 Javascript
学习jquery必备 api中英文对照的chm手册 下载
May 03 #Javascript
Packer 3.0 JS压缩及混淆工具 下载
May 03 #Javascript
javascript+dom树型菜单类,希望朋友们一起进步
May 03 #Javascript
几行代码轻松搞定jquery实现flash8类似的连接效果
May 03 #Javascript
JS实多级联动下拉菜单类,简单实现省市区联动菜单!
May 03 #Javascript
javascript静态的url如何传递
May 03 #Javascript
可以支持多中格式的JS键盘
May 02 #Javascript
You might like
PHP MSSQL 存储过程的方法
2008/12/24 PHP
使用composer 安装 laravel框架的方法图文详解
2019/08/02 PHP
你真的了解JavaScript吗?
2007/02/24 Javascript
JavaScript DOM学习第八章 表单错误提示
2010/02/19 Javascript
jQuery实现单击和鼠标感应事件
2015/02/01 Javascript
JavaScript中的this关键字使用方法总结
2015/03/13 Javascript
javascript轻量级库createjs使用Easel实现拖拽效果
2016/02/19 Javascript
js点击任意区域弹出层消失实现代码
2016/12/27 Javascript
JQuery页面随滚动条动态加载效果的简单实现(推荐)
2017/02/08 Javascript
jquery拼接ajax 的json和字符串拼接的方法
2017/03/11 Javascript
浅谈JS中的反柯里化( uncurrying)
2017/08/17 Javascript
vue内置组件transition简单原理图文详解(小结)
2018/07/12 Javascript
记录微信小程序 height: calc(xx - xx);无效问题
2019/12/30 Javascript
jQuery弹框插件使用方法详解
2020/05/26 jQuery
js实现筛选功能
2020/11/24 Javascript
[16:56]heroes英雄教学 司夜刺客
2014/09/18 DOTA
基于wxpython开发的简单gui计算器实例
2015/05/30 Python
Python中查看文件名和文件路径
2017/03/31 Python
python验证身份证信息实例代码
2019/05/06 Python
Django 解决model 反向引用中的related_name问题
2020/05/19 Python
基于HTML5新特性Mutation Observer实现编辑器的撤销和回退操作
2016/01/11 HTML / CSS
详解HTML5中的拖放事件(Drag 和 drop)
2016/11/14 HTML / CSS
英国浴室洗脸盆购物网站:Click Basin
2018/06/08 全球购物
简述DNS进行域名解析的过程
2013/12/02 面试题
文秘专业自荐信
2013/10/14 职场文书
后勤人员自我鉴定
2013/10/20 职场文书
网络公司美工设计工作个人的自我评价
2013/11/03 职场文书
小学三年级数学教学反思
2014/01/31 职场文书
捐款倡议书
2014/04/14 职场文书
护士长竞聘演讲稿
2014/04/30 职场文书
技能比武方案
2014/05/21 职场文书
优秀教师先进个人事迹材料
2014/08/31 职场文书
党小组推荐意见
2015/06/02 职场文书
陈斌强事迹观后感
2015/06/17 职场文书
鲁滨孙漂流记读书笔记
2015/06/30 职场文书
Python实现PIL图像处理库绘制国际象棋棋盘
2021/07/16 Python