`

实现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>

 

分享到:
评论

相关推荐

    JS实现DIV、图片圆角效果

    本文将深入探讨如何使用JavaScript(JS)来实现DIV和图片的圆角效果,同时强调其兼容性和简单性。 首先,我们来了解CSS3中的border-radius属性,它是实现圆角效果最直接的方法。但遗憾的是,早期的浏览器,尤其是IE...

    实现DIV圆角的JavaScript代码.doc

    在`&lt;head&gt;`部分或者`&lt;body&gt;`的`window.onload`事件中,编写JavaScript代码来设置圆角。这包括指定每个角的半径以及其他选项,如是否开启抗锯齿和自动填充内边距。 ```javascript window.onload = function() { ...

    JS控制DIV圆角代码

    总的来说,实现JS控制的DIV圆角代码涉及了对不同浏览器特性的理解和利用,以及对JavaScript DOM操作的掌握。通过CSS3的`border-radius`、JavaScript库以及图像切片技术,我们可以使网页在新旧浏览器间保持一致的视觉...

    DIV圆角的JavaScript代码

    本篇文章将深入探讨如何使用JavaScript代码实现`&lt;div&gt;`的圆角效果,并介绍相关的使用方法。 首先,我们需要了解JavaScript是如何操作DOM(文档对象模型)来改变元素的样式。在JavaScript中,我们可以使用`document....

    JavaScript 制作div圆角

    总之,JavaScript制作div圆角主要涉及对浏览器兼容性的理解和使用JavaScript动态修改DOM元素的样式。在实践中,应当结合CSS3的border-radius和JavaScript,确保在各种浏览器中都能得到良好的视觉效果。

    JS封装DIV圆角Css样式

    JavaScript(JS)虽然主要负责动态交互,但在某些情况下,可以用于辅助实现CSS样式,例如封装DIV圆角样式。本文将深入探讨如何使用JS来封装和应用CSS圆角效果,并通过提供的压缩包文件中的示例进行解析。 首先,让...

    DIV圆角的js实现

    本篇文章将详细介绍如何通过JavaScript(JS)和HTML中的DIV元素的绝对定位来实现圆角效果。 首先,我们要理解CSS中的边框半径属性`border-radius`,这是CSS3引入的一个特性,可以直接为元素设置圆角。但在不支持CSS...

    还用jquery控件实现div圆角效果

    在提供的压缩包中,"jquery处理DIV圆角、方角(经典方法)"可能包含了更多关于如何使用jQuery实现不同边框效果的示例代码,包括如何在特定条件下切换div的圆角和方角。你可以查阅这个文件来深入了解和实践。 总结...

    DIV+CSS IE圆角

    除了VML,还可以使用CSS精灵图或者JavaScript库(如jQuery UI)来实现IE的圆角效果。但是,这些方法可能会增加页面加载时间和复杂性,因此在可能的情况下,建议优先考虑更新用户的浏览器或提供一个没有圆角但功能...

    实现图片和DIV圆角显示的javascript

    总的来说,实现图片和div圆角显示的JavaScript技术涉及到HTML结构、CSS样式和JavaScript动态操作。在考虑兼容性和性能的同时,可以根据项目的具体需求选择合适的方法。在实际开发中,我们应优先使用CSS3的`border-...

    css+div圆角窗口

    "css+div圆角窗口"是指利用CSS技术来创建具有圆角边框的网页元素,通常这些元素被设计成类似窗口的形式,提供信息展示或交互功能。 在CSS3之前,要实现圆角效果,开发者需要借助图像或者复杂的JavaScript技巧。然而...

    超实用div圆角样式,无须图片

    传统的实现div圆角效果通常需要借助图像或CSS精灵图,但随着CSS3的出现,我们可以使用纯CSS来创建圆角效果,无需任何图片。这种方式不仅提高了效率,减少了HTTP请求,还能更好地适应响应式设计。以下是对"超实用div...

    div圆角兼容ie8

    在这两种方法中,我们都需要在HTML中添加条件注释以仅在IE8及以下版本中加载特定的CSS或JavaScript代码。 3. 兼容性测试:在开发过程中,确保在各种浏览器环境下进行测试,包括不同的IE版本。本地测试时可能会出现...

    JS实现div圆弧

    JavaScript(JS)结合CSS3可以轻松实现div元素的圆角或者部分圆弧效果。这篇文章将深入探讨如何使用JavaScript和CSS3来创建div的圆弧效果。 【描述】虽然没有提供具体的描述,但我们可以从常规的实践出发,理解JS...

    不使用图片div的js圆角curvyCorners

    本话题主要探讨的是“不使用图片div的js圆角curvyCorners”这一技术,它是一种利用JavaScript实现div元素圆角的方法。 "curvyCorners" 是一个早期流行的JavaScript库,它允许开发者在不使用任何图像的情况下,为...

    js圆角代码

    以上就是关于"js圆角代码"的知识点介绍,希望这个详细解答能帮助你理解和掌握JavaScript实现圆角的各种方法。如果你的项目中包含名为"project"的文件,可能包含了实现这一功能的具体代码,建议查看并学习其中的实现...

    JS圆角DIV

    综上所述,"JS圆角DIV"是一个涉及前端开发、JavaScript编程和浏览器兼容性的技术话题,它体现了开发者在没有CSS3支持的情况下为实现视觉效果所做的创新。提供的文件揭示了一种可能的实现方式,包括HTML示例、背景...

    Javascript 圆角div的实现代码

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

    DIV+CSS 圆角边框

    标题“DIV+CSS 圆角边框”指向的是一个关于前端网页设计的技术主题,特别是如何使用HTML和CSS来实现元素的圆角边框效果。在Web开发中,DIV元素常被用作布局容器,而CSS(层叠样式表)则用于控制页面的样式和结构。在...

Global site tag (gtag.js) - Google Analytics