用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 相关文章推荐
Expandable &quot;Detail&quot; Table Rows
Aug 29 Javascript
javascript关于运动的各种问题经典总结
Apr 27 Javascript
JavaScript比较当前时间是否在指定时间段内的方法
Aug 02 Javascript
js中的eval()函数把含有转义字符的字符串转换成Object对象的方法
Dec 02 Javascript
layer弹出层中H5播放器全屏出错的解决方法
Feb 21 Javascript
Vue.js实战之使用Vuex + axios发送请求详解
Apr 04 Javascript
一次围绕setTimeout的前端面试经验分享
Jun 15 Javascript
微信小程序slider组件使用详解
Jan 31 Javascript
vue-star评星组件开发实例
Mar 01 Javascript
Vue隐藏显示、只读实例代码
Jul 18 Javascript
在微信小程序里使用watch和computed的方法
Aug 02 Javascript
详解ES6中的 Set Map 数据结构学习总结
Nov 06 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发送get、post请求的6种方法简明总结
2014/07/08 PHP
php实现的click captcha点击验证码类实例
2014/09/23 PHP
PHP实现绘制二叉树图形显示功能详解【包括二叉搜索树、平衡树及红黑树】
2017/11/16 PHP
ThinkPHP5.0框架控制器继承基类和自定义类示例
2018/05/25 PHP
用javascript实现改变TEXTAREA滚动条和按钮的颜色,以及怎样让滚动条变得扁平
2007/04/20 Javascript
出现“不能执行已释放的Script代码”错误的原因及解决办法
2007/08/29 Javascript
js下获得客户端操作系统的函数代码(1:vista,2:windows7,3:2000,4:xp,5:2003,6:2008)
2011/10/31 Javascript
JavaScript实现url地址自动检测并添加URL链接示例代码
2013/11/12 Javascript
jquery表单验证需要做些什么
2015/11/17 Javascript
五种js判断是否为整数类型方式
2015/12/03 Javascript
JS验证逗号隔开可以是中文字母数字
2016/04/22 Javascript
JS基础随笔(菜鸟必看篇)
2016/07/13 Javascript
AngularJS基础 ng-paste 指令简单示例
2016/08/02 Javascript
JS文件上传神器bootstrap fileinput详解
2021/01/28 Javascript
javascript中replace使用方法总结
2017/03/01 Javascript
Vue监听数组变化源码解析
2017/03/09 Javascript
Vue中JS动画与Velocity.js的结合使用
2019/02/13 Javascript
JS实现集合的交集、补集、差集、去重运算示例【ES5与ES6写法】
2019/02/18 Javascript
js get和post请求实现代码解析
2020/02/06 Javascript
微信小程序返回上一级页面的实现代码
2020/06/19 Javascript
js+css实现扇形导航效果
2020/08/18 Javascript
JS如何监听div的resize事件详解
2020/12/03 Javascript
nestjs中异常过滤器Exceptionfilter的具体使用
2021/02/07 Javascript
[01:00]一分钟回顾2018DOTA2亚洲邀请赛现场活动
2018/04/07 DOTA
[01:22:29]真视界:2019年国际邀请赛总决赛
2020/01/29 DOTA
使用pandas模块读取csv文件和excel表格,并用matplotlib画图的方法
2018/06/22 Python
解决python flask中config配置管理的问题
2019/07/26 Python
python如何删除文件、目录
2020/06/23 Python
Python如何优雅删除字符列表空字符及None元素
2020/06/25 Python
使用css3绘制出各种几何图形
2016/08/17 HTML / CSS
英国家喻户晓的折扣商场:TK Maxx
2017/05/26 全球购物
FitFlop澳大利亚官网:英国符合人体工学的鞋类品牌
2017/06/05 全球购物
英国女鞋购物网站:Moda in Pelle
2019/02/18 全球购物
美国鲜花递送:UrbanStems
2021/01/04 全球购物
青春励志演讲稿
2014/04/29 职场文书
代办社保委托书范文
2014/10/06 职场文书