动易美化
|
动易教程
|
动易插件
|
动易标签
|
网页设计
|
图像处理
|
flash
|
Dreamweaver
|
模板欣赏
|
模板下载
网站首页
视动动态
建站服务
成功案例
服务流程
建站价目
模板商城
联系信息
网站留言
您现在的位置:
动易模板
>>
动易中心
>>
动易美化
>> 正文
动易官方认证设计师是您最佳的合作伙伴,一次制作,终生朋友 [alangyuafeng929 2008年7月28日]
注册登陆
login
建站服务
more
联系信息
more
视动工坊:动易认证设计师
动易模板大赛连续两次获奖
现共完成动易模板100余个
热诚欢迎定制改制动易模板
Q Q:
363881827
手机:
13153001848
Tel:
0531-83711777
Mail:
wsdjqwj2003@163.com
简易实现DIV圆角的JavaScript代码和使用方法
作者:
chutq
文章来源:本站原创 点击数: 更新时间:2006-10-13 15:36:00
简易实现DIV圆角的JavaScript代码和使用方法
这个程序是个用来制作DIV圆角的开源JavaScript代码实现,效果和图像制作圆角一样的.它简单,易用,不用修改任何图像就能做到不同半径圆角....
用这个代码你可以自由定制自己的DIV,不再是方形了.完全可以实现圆形个性DIV
觉得好的,就支持我落伍吧.谢谢.呵呵
-------------口水令 06-09-10
演示1: http://www.lingid.com/00/c/demo.html
演示2: http://www.lingid.com/00/c/demo2.html
下载代码: http://www.lingid.com/00/c.rar 官方:www.curvycorners.net
------------------------------------------------
将使用方法也一并写出来了,真诚希望落伍.
------------------------------------------------
用法说明:
以下说明将以一个半径为20像素圆角的DIV为例.
------------------------------A
解压您下载的文件, 上传到您的站点。然后复制代码如下和黏贴它入您的网页的顶头部分。如果您保存了文件到该网页目录外
的任何地方, 修正代码中的src值.
===代码:
< script type="text/JavaScript" src="rounded_corners.js"></script >
------------------------------B
然后创造一个DIV。如果您已有DIV使用圆角,只要给这个DIV一个id就可以.
===代码:
< DIV id="myDiv"></DIV >
------------------------------C
最后我们需要添加一段JavaScript来预载。在您的网页的顶头部分增加以下代码:
<script type="text/JavaScript">
window.onload = function()
{
settings = {
tl: { radius: 20 },
tr: { radius: 20 },
bl: { radius: 20 },
br: { radius: 20 },
antiAlias: true,
autoPad: false
}
var divObj = document.getElementById("myDiv");
var cornersObj = new curvyCorners(settings, divObj);
cornersObj.applyCornersToAll();
}
</script>
======== 其中,radius表示半径,数值越大,圆角就越大.
------------------------------------D
现在可以运行了.呵呵
-----------------------------------PS:
*********如果你想搞成奇形怪状的圆角,你可以设置每个角都不同的半径.
例如:
settings = {
tl: { radius: 20 },
tr: { radius: 40 },
bl: { radius: 60 },
br: { radius: 80 },
antiAlias: true,
autoPad: false
}
或者:
settings = {
tl: { radius: 20 },
tr: false,
bl: false,
br: { radius: 80 },
antiAlias: true,
autoPad: false
}
提示: tl-左上角 tr=右上角 bl=左下角 br=右下角
动易中心录入:alang 责任编辑:alang
上一个动易中心:
【Flash幻灯显示图片效果】之仿腾讯娱乐电影频道
下一个动易中心:
真正的圆角容器
【
发表评论
】【
加入收藏
】【
告诉好友
】【
打印此文
】【
关闭窗口
】
评论主题:简易实现DIV圆角的JavaScript代码和使用方法(评论内容只代表网友观点)
姓 名:
*
Oicq:
性 别:
男
女 Your Msn:
E-mail:
Icq:
主 页:
评 分:
1分
2分
3分
4分
5分
评论内容:
|
设为首页
|
加入收藏
|
联系站长
|
友情链接
|
版权申明
|
网站公告
版权所有:copyright 2005-2008 动易模板NO.1 核心:PowerEasy SiteWeaver™ 6.6 备案:
鲁ICP备05007599号
电话:0531-83711777(晚间)手机:13153001848 QQ:363881827 群号:一群13022466(满)二群36354619