添加收藏
 系统管理
 联系方式
  汉南在线网页设计JavaScript脚本

简易实现DIV圆角的JavaScript代码和使用方法
作  者:匿名
关键字:JavaScript



这个程序是个用来制作DIV圆角的开源Javascrīpt代码实现,效果和图像制作圆角一样的.它简单,易用,不用修改任何图像就能做到不同半径圆角....
用这个代码你可以自由定制自己的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

本地下载c.rar

------------------------------------------------
将使用方法也一并写出来了,真诚希望落伍.
------------------------------------------------
用法说明:

以下说明将以一个半径为20像素圆角的DIV为例.

------------------------------A
解压您下载的文件, 上传到您的站点。然后复制代码如下和黏贴它入您的网页的顶头部分。如果您保存了文件到该网页目录外

的任何地方, 修正代码中的src值.
===代码:
< scrīpt type="text/Javascrīpt" src="rounded_corners.js"></scrīpt >

------------------------------B
然后创造一个DIV。如果您已有DIV使用圆角,只要给这个DIV一个id就可以.
===代码:
< DIV id="myDiv"></DIV >

------------------------------C
最后我们需要添加一段Javascrīpt来预载。在您的网页的顶头部分增加以下代码:

<scrīpt type="text/Javascrīpt">

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();
}

</scrīpt>
======== 其中,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=右下角



来源:网络
阅读:31
日期:2007-11-15

【 双击滚屏 】 【 推荐朋友 】 【 收藏 】 【 打印 】 【 关闭 】 【 字体: 】 
上一篇:CSS实现 DIV圆角
下一篇:javasript 实现div圆角【2】

  >> 相关文章
 
  ·用javascript实现评估用户输入密码的强度
  ·用JAVASCRIPT自定义提示信息
  ·网页最简短的拖动对象代码实例演示
  ·滑动展开/收缩广告代码实例效果
  ·javascript在网页中实现焦点图转换效果
  ·javascript在网页中显示日期时间
  ·图像翻转、转换效果
  ·颜色交换式渐变链接文本

5.12汶川大地震遇难同胞默哀 | 汉南在线总站 | 网站建设 | BT电影下载 | 汉南在线博客 | 流行购商城

授权使用:汉南在线 http://hnzx.hzwz.net/
经营许可证:陕ICP备05000109号 Powered by:汉南在线  
Copyright (c) 2002-2008 汉南在线. All Rights Reserved .