AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

超级好用的圆角插件jQuery Corner速成

2012-04-17 994
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： ********************************导言***********************************     虽然圆角页面很好看，但一直以来都不太好实现，一方面是没有CSS3，二是都得通过美工切图切出来角。

********************************导言***********************************

    虽然圆角页面很好看，但一直以来都不太好实现，一方面是没有CSS3，二是都得通过美工切图切出来角。但这些麻烦事即将过去，就是因为它：jQuery Corner的出现！


********************************基础************************************

    这是英文教程链接：点这里

    在此，我就替大家翻译一下并介绍基本情况。

    jQuery Corner是一款jQuery的插件，最初由Dave Methvin开发，但后在Malsup同志的协助下，进行了一些重要的改进。现在项目放在github上，当然为了方便，本文会以附件的形式提供该插件，但要想得到最新版，请到项目的github上拿。

    之所以会像变魔术一样地展现圆角及其他样式，是由于该插件为目标元素增加了一些小条块，这些小条块为背景色，所以人眼看上去出现了圆角而已，其实就是小东西遮盖了本来的直角。

    看来我真不是干魔术师的料，一上来就先把老底给揭了出来。不急，我再补充一下，这个魔术的一些要求：

1、插件专为block元素编写，所以div、p等均适用；而inline的元素则没有那么幸运了，当然也不是说inline根本不能用，只是面对为span增加corner要多费点神。不过，正常人不会和span的圆角较劲吧，把span改成div得了。

2、对于插件新增的border-radius功能，IE

    OK，介绍完了基本要点。教大家如何使用，这是重点，但很简单。
    第一步，构建基本HTML网页和DIV格局，并CSS。

点击(此处)折叠或打开

  1. html>
  2.     head>
  3.         style type="text/css">
  4.             div{
  5.                 width:350px;
  6.                 height:200px;
  7.                 background-color: #6af;
  8.             }
  9.         /style>
  10.     /head>
  11.     body>
  12.         div>/div>
  13.     /body>
  14. /html>
    效果如下：
img_720cd780a0da24b891f617d5ec9ff301.jpg


    第二步，引入jQuery，和jQuery Corner插件。

点击(此处)折叠或打开

  1. html>
  2.     head>
  3.         script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">/script>
  4.         script type="text/javascript" src="js/jquery.corner.js">/script>

  6.         style type="text/css">
  7.             div{
  8.                 width:350px;
  9.                 height:200px;
  10.                 background-color: #6af;
  11.             }
  12.         /style>
  13.     /head>
  14.     body>
  15.         div>

  17.         /div>
  18.     /body>
  19. /html>

    此时，还是刚才图的效果，直角没变。

    第三步，写js代码，让插件对DIV块起作用。

点击(此处)折叠或打开

  1. html>
  2.     head>
  3.         script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">/script>
  4.         script type="text/javascript" src="js/jquery.corner.js">/script>
  5.         script type="text/javascript">
  6.             $(function(){
  7.                 $("div").corner();

  9.             });
  10.         /script>
  11.         style type="text/css">
  12.             div{
  13.                 width:350px;
  14.                 height:200px;
  15.                 background-color: #6af;
  16.             }
  17.         /style>
  18.     /head>
  19.     body>
  20.         div>

  22.         /div>
  23.     /body>
  24. /html>

    此时，圆角就出现了。
img_78f110dc6a7ffe084731594e2f124115.jpg

    至此，小功告成。开始拓展拔高啦。

********************************拓展************************************

    一、有多种Corner可选
img_4af9bb7c47a82cec3e3b7638f44baa01.jpg
    如果你喜欢凹状，那么上图第一排，第三列就是好选择。先认识个单词notch，就是凹槽的意思。只需把一处代码改成：

点击(此处)折叠或打开

  1. script type="text/javascript">
  2.             $(function(){
  3.                 $("div").corner("notch");

  5.             });
  6.         /script>
    就可以得到这个效果：
img_fd1cac356bc3590a52955a15e39936cb.jpg

    这里出现了明显的问题，当前在chrome下只有一个角 。在IE下也不正常。滴答滴答，时间经过了近半个小时。我终于发现：

    应该给有角的Div加一个父Div，否则我自己做的例子中父级为body，而插件自己还要再增加一个Div，就弄乱套了。所以我修改了最初的代码：

点击(此处)折叠或打开

  1. html>
  2.     head>
  3.         script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">/script>
  4.         script type="text/javascript" src="js/jquery.corner.js">/script>
  5.         script type="text/javascript">
  6.             $(function(){
  7.                 $("#mydiv").corner('bevel');
  8.             });
  9.         /script>
  10.         style type="text/css">
  11.             #mydiv{
  12.                 width:350px;
  13.                 height:200px;
  14.                 background-color: #6af;
  15.             }
  16.         /style>
  17.     /head>
  18.     body>
  19.         div>
  20.             div id="mydiv">/div>
  21.         /div>
  22.     /body>
  23. /html>
      看图吧：
img_60fb4e882684e2be9b57383145f57d4d.jpg
    但有两句话需要大家注意（ 原文）：
* Fold lines are not supported in Internet Explorer for pages rendered in quirksmode.
* Fold lines are only supported on top corners in Internet Explorer, unless running in IE8 standards-mode.
    所以，尽量老老实实地用Corner样式吧。
    
    二、有多种位置可选
    可以使用top/bottom/left/right/tl/tr/bl/br设置corner出现的具体位置。看图：
img_f01d343f44c81f5c66b458ac620a05cc.jpg
    比如对于notch而言，想为mydiv的底部增加notch效果，则 改写代码如下：

点击(此处)折叠或打开

  1. $("#mydiv").corner('bevel bottom');
    于是，就只有底部产生notch角了。
img_9cac1b71445e9ceb8c26a73f9ca90184.jpg

    
    三、可自定义角度大小
    这功能很好，填写个像素值，就能改变角度。试试吧：

点击(此处)折叠或打开

  1. $("#mydiv").corner('bevel bottom 50px');
    惊奇的图像如下：
img_c8adc3ec0ee7cdf187d17fe87cbf9182.jpg

    神奇吧，呵呵，还有呢。

    四、混搭
    就刚才这个例子，把上边两个角变为圆角，而下方仍然不变。看代码：

点击(此处)折叠或打开

  1. $("#mydiv").corner('top 30px').corner('bevel bottom 50px');
    没错，就是用两句corner。当然你可以完全使用四个corner把各个角都自定义。
img_b2c82bdc518f476bd0c7447de6c8bfaf.jpg

    五、边框装饰
    这是亮点，感谢一个名叫Kevin Scholl的家伙提出的这个建议，不过这的确是一个非常棒的提议。看代码吧：

点击(此处)折叠或打开

  1. html>
  2.     head>
  3.         script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">/script>
  4.         script type="text/javascript" src="js/jquery.corner.js">/script>
  5.         script type="text/javascript">
  6.             $(function(){
  7.                 $("#mydiv p").corner('round 8px').parent().css('padding','8px').corner('round 14px');
  8.             });
  9.         /script>
  10.         style type="text/css">
  11.             #mydiv{
  12.                 width:360px;
  13.                 background-color: #600;
  14.             }
  15.             #mydiv p{
  16.                 width:350px;
  17.                 height:200px;
  18.                 background-color: #6af;
  19.             }
  20.         /style>
  21.     /head>
  22.     body>
  23.         div>
  24.             div id="mydiv">P>/p>/div>
  25.         /div>
  26.     /body>
  27. /html>
    就会这样：
img_c0f9ec745908e03fe81ce86a491b92c1.jpg
    这图是chrome下的效果，IE下还不一样，夜色很晚了，没时间调试深入发现问题的原因。


    写的不少了，其实还有些功能样式没说，剩下的也并不常用，用到的时候大家看英文自学吧。






文章标签：
JavaScript
前端开发
Web App开发
关键词：
jQuery插件
插件jQuery
jQuery corner
五岳之巅
目录
相关文章
哈你真皮
|
19天前
|
JavaScript 前端开发
jQuery和CSS3滑动展开菜单按钮插件
这是一款jQuery和CSS3滑动展开菜单按钮插件。该滑动展开菜单按钮在用户点击主菜单按钮之后，子菜单以滑动的方式依次展开
哈你真皮
59 21
哈你真皮
|
20天前
|
JavaScript
jquery图片和pdf文件预览插件
EZView.js是一款jquery图片和pdf文件预览插件。EZView.js可以为图片和pdf格式文件生成在线预览效果。支持的文件格式有pdf、jpg、 png、jpeg、gif。
哈你真皮
48 16
哈你真皮
|
15天前
|
JavaScript
jquery文字动画特效插件animatext
jquery文字动画特效插件animatext
哈你真皮
40 9
游客dng4gjyb342he
|
18天前
|
移动开发 JavaScript 前端开发
简单易用的jquery响应式轮播图插件ma5slider
ma5slider是一款简单易用的jquery响应式轮播图插件。该轮播图支持鼠标拖拽，可以通过CSS定制外观，支持无限循环模式，内置水平，垂直和淡入淡出三种轮播图过渡动画效果。
游客dng4gjyb342he
49 11
游客dng4gjyb342he
|
20天前
|
JavaScript
简洁实用的jQuery进度条插件
这是一款简洁实用的jQuery进度条插件。该插件使用简单，通过在页面中放置指定的HTML代码，即可生成带动画效果的进度条。
游客dng4gjyb342he
43 12
游客dng4gjyb342he
|
19天前
|
JavaScript 容器
jQuery文字跑马灯插件Marquee
jQuery.Marquee是一款jQuery文字跑马灯插件。jQuery.Marquee跑马灯插件可以结合使用CSS3动画，制作文字的上下左右移动效果。
游客dng4gjyb342he
39 7
哈你真皮
|
16天前
|
JavaScript 容器
jquery和CSS3图片排序过滤搜索插件
Filterizr是一款jquery和CSS3图片排序过滤插件。它可以对一组图片进行排序，按条件过滤和按关键字搜索。并在显示结果时使用指定的CSS3动画过渡效果。
哈你真皮
24 2
游客dng4gjyb342he
|
16天前
|
JavaScript
jquery和CSS3响应式轮播图插件jcSlider
jcSlider是一款jquery和CSS3响应式轮播图插件。jcSlider使用CSS3过渡动画，它可以和animate.css完美结合，生成60多种轮播图过渡动画效果。
游客dng4gjyb342he
34 2
游客dng4gjyb342he
|
20天前
|
JavaScript
jQuery Lightbox和弹出层插件flashy
Flashy.js是一款响应式jQuery Lightbox和弹出层插件
游客dng4gjyb342he
38 6
哈你真皮
|
18天前
|
JavaScript 容器
jQuery消息通知显示插件
MessageNotifyPlugin是一款简单的jQuery消息通知显示插件。该jQuery消息通知显示插件能够自动生成最新消息和提醒消息两个消息通知按钮。并且可以设置消息的是否已读状态等
哈你真皮
23 2