`

实现DIV圆角的js代码和使用方法

阅读更多

这个程序是个用来制作DIV圆角的开源JavaScript代码实现,效果和图像制作圆角一样的.它简单,易用,不用修改任何图像就能做到不同半径圆角....
官方:www.curvycorners.net
---------------------
1、在页面中引用js源文件
< script type="text/JavaScript" src="rounded_corners.js"></script >

2、然后创造一个DIV。如果您已有DIV使用圆角,只要给这个DIV一个id就可以.

         < DIV id="myDiv"></DIV >

3、我们需要添加一段JavaScript来预载。在您的网页的顶头部分增加以下代码:
 

1<script type="text/JavaScript">
2  window.onload = function() //radius表示半径,数值越大,圆角就越大,各角可以不同大小.
3  {                                       
//tl=左上角  tr=右上角  bl=左下角  br=右下角
4    settings = {
5      tl: { radius: 20 },
6      tr: { radius: 20 },
7      bl: { radius: 20 },
8      br: { radius: 20 },
9      antiAlias: true,
10      autoPad: false
11    }
12
13    var divObj = document.getElementById("myDiv");
14
15    var cornersObj = new curvyCorners(settings, divObj);
16    cornersObj.applyCornersToAll();
17  }
18
19</script>

 

分享到:
评论

相关推荐

    DIV圆角的JavaScript代码

    简易实现DIV圆角的JavaScript代码和使用方法

    实现DIV圆角的JavaScript代码.doc

    实现DIV圆角的JavaScript代码

    css实现div圆角

    纯css实现div圆角,代码简单易懂,没有js那么麻烦,缺点是效果有点小缺憾

    JS控制DIV圆角代码

    JS CSS 圆角,JS控制DIV圆角代码

    JS封装DIV圆角Css样式

    JS封装DIV圆角Css样式,源代码演示!

    Javascript 圆角div的实现代码

    现在实现圆角普遍用图片来控制,这种方法有其优点(产生的圆角平滑)。 但同时他也要求有吻合的图片,如果要动态的改变div的样式颜色则有些力不从心。还有就是用js来实现。 实现后的调用代码 如下 代码如下: var ...

    用js实现css3效果的圆角方法

    用js实现css3效果的圆角方法,代码简洁方便,效果很不错,跟大家分享一下!!

    带有DIV CSS代码圆角导航菜单

    经典的js文件,圆角导航菜单!带有DIV CSS代码

    纯CSS一个DIV悬浮并且FF圆角

    没有用任何的DIV嵌套,就单独一个DIV,纯CSS控制,无任何JS代码,在火狐下面圆角

    JavaScript完全自学宝典 源代码

    roundcorner.css JavaScript使用CSS模拟图片的圆角效果时使用的CSS样式文件。 第13章(\c13) 示例描述:介绍JavaScript与XML。 13.1.xml 表示书籍信息的XML信息。 13.2.js 跨浏览器兼容的XPath实现。 ...

    Js圆角框插件,DIV、图片圆角效果

    脚本资源,Ajax/JavaScript,Js圆角框插件,圆角 超简单实用的JS圆角框插件,实现DIV、图片圆角效果,关键是代码很兼容很简单,调用了一个自已写的圆角封装插件,只需个参数即可实现漂亮的圆角边框,对于DIV和图片的...

    JQuery&CSS;&CSS;+DIV实例大全.rar

    兼容各浏览器JS+CSS水平和垂直无缝图片滚动效果代码 12.漂亮暖色调js+flash平滑过渡大屏图片切换的广告代码 13.实用国外JS内容选项卡DEMO下载 14.推荐通用文字图片JS不间断滚动封装类 代替Marquee 15.站长...

    js原生态圆角阴影左右按钮控制焦点图片滚动

    这是一个js左右切换焦点图特效,无需调用jquery库的麻烦,可在一定程度上节省带宽以及内存,代码简洁,使用方法简单: 直接调用几行html代码到你指定的地方,并修改外侧DIV大小,并在后面引入lanrenzhijia.js即可...

    基于mootools的圆角边框扩展代码

    JQuery下面有个扩展是用纯JS生成的圆角,不过和DIV+CSS拼出来是一样的道理,圆角看上去都比较粗糙。 用背景图片要好看得多,问题是不能拉伸,最简单做法就是用四个角小图片加边框拼出来。不过这样多出N多图片,一堆...

    150个js特效焦点图幻灯片效果打包

    迅雷网div css js图片展示代... ChinaRen首页5屏Flash焦点图 酷6网Flash焦点图代码 四屏切换flash图片切换 腾讯新闻flash焦点图代码 五屏Flash圆角图片切换效果 魔时网Flash5屏切换焦点图 9屏切换竖焦点图代码 腾讯...

    Js菜单生成工具(DIV CSS菜单在线生成器).rar

    Js菜单生成工具(DIV CSS菜单在线生成器),包括生成一些圆角的菜单,十分方便,用起来也十分方便。用它生成的菜单无论是在功能或是外观方面都很不错,而且兼容各大浏览器,生成的菜单你可直接复制代码文件就可使用...

    程序天下:JavaScript实例自学手册

    5.5 圆角div 5.6 动态添加iframe框架 5.7 用层实现长文章分页 5.8 iframe自适应高度 5.9 类似MSN的消息提示 5.10 只打印iframe的内容 第6章 下拉列表特效 6.1 下拉框实现多选 6.2 实现两个select的同步 6.3 被选中的...

    《程序天下:JavaScript实例自学手册》光盘源码

    5.5 圆角div 5.6 动态添加iframe框架 5.7 用层实现长文章分页 5.8 iframe自适应高度 5.9 类似MSN的消息提示 5.10 只打印iframe的内容 第6章 下拉列表特效 6.1 下拉框实现多选 6.2 实现两个select的同步 6.3 被选中的...

    零基础学HTML CSS源代码

    第1章(源代码\第1章) 示例描述:本章演示HTML基本知识 HTML基本标记.html HTML基本标记的用法。 我的第一张网页.html 演示我的第一张网页。 第2章(源代码\第2章) ...

Global site tag (gtag.js) - Google Analytics