用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 相关文章推荐
执行iframe中的javascript方法
Oct 07 Javascript
js为鼠标添加右击事件防止默认的右击菜单弹出
Jul 29 Javascript
JS 实现Table相同行的单元格自动合并示例代码
Aug 27 Javascript
js 获取、清空input type=&quot;file&quot;的值示例代码
Feb 19 Javascript
jQuery的图片滑块焦点图插件整理推荐
Dec 07 Javascript
JQuery给网页更换皮肤的方法
May 30 Javascript
基于jquery css3实现点击动画弹出表单源码特效
Aug 31 Javascript
Sortable.js拖拽排序使用方法解析
Nov 04 Javascript
10道典型的JavaScript面试题
Mar 22 Javascript
JS基于正则表达式的替换操作(replace)用法示例
Apr 28 Javascript
VUE前端cookie简单操作
Oct 17 Javascript
Antd表格滚动 宽度自适应 不换行的实例
Oct 27 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使用DirectoryIterator显示下拉文件列表的方法
2015/03/13 PHP
一个简单安全的PHP验证码类、PHP验证码
2016/09/24 PHP
PHP实现基于3DES算法加密解密字符串示例
2018/08/24 PHP
js每次Title显示不同的名言
2008/09/25 Javascript
用jQuery技术实现Tab页界面之二
2009/09/21 Javascript
js的一些常用方法小结
2011/06/29 Javascript
js实现跟随鼠标移动且带关闭功能的图片广告实例
2015/02/26 Javascript
jquery获取及设置outerhtml的方法
2015/03/09 Javascript
解析如何利用iframe标签以及js制作时钟
2016/12/08 Javascript
js数字计算 误差问题的快速解决方法
2017/02/28 Javascript
对VUE中的对象添加属性
2018/09/18 Javascript
css配合JavaScript实现tab标签切换效果
2018/10/11 Javascript
详解js获取video任意时间的画面截图
2019/04/17 Javascript
jQuery zTree插件使用简单教程
2019/08/16 jQuery
JS实现简单随机3D骰子
2019/10/24 Javascript
Vue根据条件添加click事件的方式
2019/11/09 Javascript
js实现省级联动(数据结构优化)
2020/07/17 Javascript
浅析微信小程序自定义日历组件及flex布局最后一行对齐问题
2020/10/29 Javascript
使用TS来编写express服务器的方法步骤
2020/10/29 Javascript
Python Matplotlib库入门指南
2015/05/18 Python
Python中optparser库用法实例详解
2018/01/26 Python
wxPython:python首选的GUI库实例分享
2019/10/05 Python
浅谈pandas.cut与pandas.qcut的使用方法及区别
2020/03/03 Python
使用Python三角函数公式计算三角形的夹角案例
2020/04/15 Python
python matplotlib模块基本图形绘制方法小结【直线,曲线,直方图,饼图等】
2020/04/26 Python
django 模版关闭转义方式
2020/05/14 Python
Python如何执行系统命令
2020/09/23 Python
采购内勤岗位职责
2013/12/10 职场文书
迎元旦广播稿
2014/02/22 职场文书
出纳工作检讨书范文
2014/12/27 职场文书
市场部岗位职责范本
2015/04/15 职场文书
2015年小学语文工作总结
2015/05/25 职场文书
追讨欠款律师函
2015/05/27 职场文书
大学体育课感想
2015/08/10 职场文书
2019开业庆典剪彩仪式主持词!
2019/07/22 职场文书
CSS3 Tab动画实例之背景切换动态效果
2021/08/23 HTML / CSS