用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 相关文章推荐
jQuery 1.7.2中getAll方法的疑惑分析
May 23 Javascript
JS正则表达式获取分组内容的方法详解
Nov 15 Javascript
原生javascript模仿win8等待提示圆圈进度条
Apr 24 Javascript
深入理解JavaScript系列(35):设计模式之迭代器模式详解
Mar 03 Javascript
JavaScript获取并更改input标签name属性的方法
Jul 02 Javascript
浅谈javascript的Touch事件
Sep 27 Javascript
AngularJS 实现JavaScript 动画效果详解
Sep 08 Javascript
BootStrap数据表格实例代码
Sep 13 Javascript
在Vue中使用highCharts绘制3d饼图的方法
Feb 08 Javascript
微信小程序实现团购或秒杀批量倒计时
Nov 01 Javascript
Vue点击切换颜色的方法
Sep 13 Javascript
微信小程序完美解决scroll-view高度自适应问题的方法
Aug 08 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
Yii PHP Framework实用入门教程(详细介绍)
2013/06/18 PHP
php 文件下载 出现下载文件内容乱码损坏的解决方法(推荐)
2016/11/16 PHP
PHP实现的简单对称加密与解密方法实例小结
2017/08/28 PHP
PHP实现的MD5结合RSA签名算法实例
2017/10/07 PHP
jquery 循环显示div的示例代码
2013/10/18 Javascript
JavaScript实现基于Cookie的存储类实例
2015/04/10 Javascript
AngularJS入门教程之双向绑定详解
2016/08/18 Javascript
AngularJS中的按需加载ocLazyLoad示例
2017/01/11 Javascript
WebPack基础知识详解
2017/01/16 Javascript
如何正确理解javascript的模块化
2017/03/02 Javascript
input框中自动展示当前日期yyyy/mm/dd的实现方法
2017/07/06 Javascript
React Native实现进度条弹框的示例代码
2017/07/17 Javascript
JavaScript判断浏览器和hack滚动条的写法
2017/07/23 Javascript
[01:20:30]OG vs LGD 2018国际邀请赛淘汰赛BO3 第四场 8.26
2018/08/30 DOTA
[05:31]干嘛呢兄弟!DOTA2 TI9语音轮盘部分出处
2019/05/14 DOTA
Python中IPYTHON入门实例
2015/05/11 Python
Python中关于使用模块的基础知识
2015/05/24 Python
Python中的命令行参数解析工具之docopt详解
2017/03/27 Python
LRUCache的实现原理及利用python实现的方法
2017/11/21 Python
python将txt文件读入为np.array的方法
2018/10/30 Python
python global关键字的用法详解
2019/09/05 Python
python中if及if-else如何使用
2020/06/02 Python
浅谈python量化 双均线策略(金叉死叉)
2020/06/03 Python
详解使用python爬取抖音app视频(appium可以操控手机)
2021/01/26 Python
css3实现背景模糊的三种方式(小结)
2020/05/15 HTML / CSS
html5 worker 实例(二) 图片变换效果
2013/06/24 HTML / CSS
一个不错的HTML5 Canvas多层点击事件监听实例
2014/04/29 HTML / CSS
新闻专业推荐信范文
2013/11/20 职场文书
历史学专业求职信
2014/06/19 职场文书
带香烟到学校抽的检讨书
2014/09/25 职场文书
学生抄袭作业的检讨书
2014/10/02 职场文书
学校党员个人问题整改措施思想汇报
2014/10/08 职场文书
大学生个人年度总结范文
2015/02/15 职场文书
2016年领导干部正风肃纪心得体会
2015/10/09 职场文书
PyCharm 安装与使用配置教程(windows,mac通用)
2021/05/12 Python
PHP设计模式(观察者模式)
2021/07/07 PHP