jQuery插件jRounded圆角实现javascript给页面元素生成圆角功能

我们平时使用CSS样式来给页面元素制作圆角效果，但需要使用很多多余的HTML元素，不利于代码的维护，这里介绍一个jQuery插件jRounded圆角，可以轻松给任意元素增加圆角效果，使用非常简单，实例如下：
jQuery插件jRounded圆角实现javascript给页面元素生成圆角功能
使用说明
需要使用jQuery库文件和jRounded圆角库文件

需要CSS样式文件，定制你圆角的显示效果，CSS样式代码如下(可修改为需要的效果)

  1. .box{position:relative;background-color:#eee;margin-bottom:25px;padding:10px;}
  2. .box .tl,.box .tr,.box .bl,.box .br{position:absolute;width:10px;height:10px;}
  3. .box .tl{background-image:url(images/box-tl.gif);top:0;left:0;}
  4. .box .tr{background-image:url(images/box-tr.gif);top:0;right:0;}
  5. .box .bl{background-image:url(images/box-bl.gif);bottom:0;left:0;}
  6. .box .br{background-image:url(images/box-br.gif);bottom:0;right:0;}
  7. .box .bg-white{background-color:#fff;padding:10px;}

使用实例
一，包含文件部分

  1. <script type="text/javascript" src="jquery.min.js"></script>
  2. <script type="text/javascript" src="jRounded.js"></script>
  3. <link rel="stylesheet" href="jRounded.css" />

二，HTML部分

  1. <div class="biuuu">
  2. ……需要使用圆角的内容……
  3. </div>

三，Javascript部分(调用jQuery插件jRounded圆角)

  1. <script>
  2. $(document).ready(function() {
  3. $('.biuuu').box();
  4. });
  5. </script>

完整的jQuery插件jRounded圆角JS代码

  1. (function($){
  2. $.fn.extend({
  3. box: function() {
  4. return $(this).each(function(){
  5. $(this).wrap('<div class="box"><div></div><div class="tl"></div><div class="tr"></div><div
  6. class="bl"></div><div class="br"></div></div>');
  7. });
  8. }
  9. })
  10. })(jQuery);

以上实例可知使用jQuery插件jRounded圆角非常简单，轻松实现javascript给页面元素生成圆角功能。不需要考虑div元素一层与一层之间的关系，简单一行代码实现圆角，值得推荐。

点我下载jQuery插件jRounded圆角实现javascript给页面元素生成圆角功能演示