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


Posted in Javascript onAugust 31, 2014

jQuery Corner是一款jQuery的插件,最初由Dave Methvin开发,但后在Malsup同志的协助下,进行了一些重要的改进。现在项目放在github上,当然为了方便,本文会以附件的形式提供该插件,但要想得到最新版,请到项目的github上拿。
之所以会像变魔术一样地展现圆角及其他样式,是由于该插件为目标元素增加了一些小条块,这些小条块为背景色,所以人眼看上去出现了圆角而已,其实就是小东西遮盖了本来的直角。

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

1、插件专为block元素编写,所以div、p等均适用;而inline的元素则没有那么幸运了,当然也不是说inline根本不能用,只是面对为span增加corner要多费点神。不过,正常人不会和span的圆角较劲吧,把span改成div得了。
2、对于插件新增的border-radius功能,IE<=8全体不支持,除了IE外全体浏览器都支持。娘的,再对自己国度IE6泛滥的现状深切鄙视一下。

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

<html>
<head>
<style type="text/css">
div{
width:350px;
height:200px;
background-color: #6af;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

效果如下:

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

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

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

<style type="text/css">
div{
width:350px;
height:200px;
background-color: #6af;
}
</style>
</head>
<body>
<div>

</div>
</body>
</html>

此时,还是刚才图的效果,直角没变。
第三步,写js代码,让插件对DIV块起作用。

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.corner.js"></script>
<script type="text/javascript">
$(function(){
$("div").corner();

});
</script>
<style type="text/css">
div{
width:350px;
height:200px;
background-color: #6af;
}
</style>
</head>
<body>
<div>

</div>
</body>
</html>

此时,圆角就出现了。

超级好用的jQuery圆角插件 Corner速成
至此,小功告成。开始拓展拔高啦。

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

一、有多种Corner可选超级好用的jQuery圆角插件 Corner速成

如果你喜欢凹状,那么上图第一排,第三列就是好选择。先认识个单词notch,就是凹槽的意思。只需把一处代码改成:

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

});
</script>

 就可以得到这个效果:

超级好用的jQuery圆角插件 Corner速成
这里出现了明显的问题,当前在chrome下只有一个角。在IE下也不正常。滴答滴答,时间经过了近半个小时。我终于发现:
应该给有角的Div加一个父Div,否则我自己做的例子中父级为body,而插件自己还要再增加一个Div,就弄乱套了。所以我修改了最初的代码:

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.corner.js"></script>
<script type="text/javascript">
$(function(){
$("#mydiv").corner('bevel');
});
</script>
<style type="text/css">
#mydiv{
width:350px;
height:200px;
background-color: #6af;
}
</style>
</head>
<body>
<div>
<div id="mydiv"></div>
</div>
</body>
</html>

 看图吧:

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

但有两句话需要大家注意(原文):* 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出现的具体位置。看图:超级好用的jQuery圆角插件 Corner速成

比如对于notch而言,想为mydiv的底部增加notch效果,则改写代码如下:

$("#mydiv").corner('bevel bottom');

于是,就只有底部产生notch角了。

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

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

$("#mydiv").corner('bevel bottom 50px');

惊奇的图像如下:

超级好用的jQuery圆角插件 Corner速成
神奇吧,呵呵,还有呢。

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

$("#mydiv").corner('top 30px').corner('bevel bottom 50px');

没错,就是用两句corner。当然你可以完全使用四个corner把各个角都自定义。超级好用的jQuery圆角插件 Corner速成

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

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.corner.js"></script>
<script type="text/javascript">
$(function(){
$("#mydiv p").corner('round 8px').parent().css('padding','8px').corner('round 14px');
});
</script>
<style type="text/css">
#mydiv{
width:360px;
background-color: #600;
}
#mydiv p{
width:350px;
height:200px;
background-color: #6af;
}
</style>
</head>
<body>
<div>
<div id="mydiv"><P></p></div>
</div>
</body>
</html>

就会这样:

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

这图是chrome下的效果,IE下还不一样,夜色很晚了,没时间调试深入发现问题的原因。

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

Javascript 相关文章推荐
FireFox下XML对象转化成字符串的解决方法
Dec 09 Javascript
jQuery对象的length属性用法实例
Dec 27 Javascript
jquery事件preventDefault()方法用法实例
Jan 16 Javascript
jQuery Ajax中的事件详细介绍
Apr 16 Javascript
jquery使整个div区域可以点击的方法
Jun 24 Javascript
JS+CSS实现鼠标滑过时动态翻滚的导航条效果
Sep 24 Javascript
MVC Ajax Helper或Jquery异步加载部分视图
Nov 29 Javascript
全面解析Bootstrap手风琴效果
Apr 17 Javascript
Javascript 实现微信分享(QQ、朋友圈、分享给朋友)
Oct 21 Javascript
微信小程序实现MUI数字输入框效果
Jan 31 Javascript
解决vue.js this.$router.push无效的问题
Sep 03 Javascript
彻底弄懂 JavaScript 执行机制
Oct 23 Javascript
Html5的placeholder属性(IE兼容)实现代码
Aug 30 #Javascript
通过js为元素添加多项样式,浏览器全兼容写法
Aug 30 #Javascript
原生js仿jq判断当前浏览器是否为ie,精确到ie6~8
Aug 30 #Javascript
原生js实现复制对象、扩展对象 类似jquery中的extend()方法
Aug 30 #Javascript
ZeroClipboard插件实现多浏览器复制功能(支持firefox、chrome、ie6)
Aug 30 #Javascript
仿百度联盟对联广告实现代码
Aug 30 #Javascript
jQuery针对各类元素操作基础教程
Aug 29 #Javascript
You might like
hover的用法及live的用法介绍(鼠标悬停效果)
2013/03/29 Javascript
javascript浏览器窗口之间传递数据的方法
2015/01/20 Javascript
JS实现淘宝支付宝网站的控制台菜单效果
2015/09/28 Javascript
jquery+json实现数据二级联动的方法
2015/11/28 Javascript
jQuery的promise与deferred对象在异步回调中的作用
2016/05/03 Javascript
ES5 ES6中Array对象去除重复项的方法总结
2017/04/27 Javascript
jQuery 表单序列化实例代码
2017/06/11 jQuery
vue.js实现单选框、复选框和下拉框示例
2017/07/18 Javascript
js实现带进度条提示的多视频上传功能
2020/12/13 Javascript
用Node提供静态文件服务的方法
2018/07/06 Javascript
Vue中控制v-for循环次数的实现方法
2018/09/26 Javascript
vue如何使用外部特殊字体的操作
2020/07/30 Javascript
[48:02]Ti4循环赛第三日 VG vs Liquid和NEWBEE vs DK
2014/07/12 DOTA
Python实现获取网站PR及百度权重
2015/01/21 Python
python实现杨辉三角思路
2017/07/14 Python
Python下实现的RSA加密/解密及签名/验证功能示例
2017/07/17 Python
Python中实例化class的执行顺序示例详解
2018/10/14 Python
对python3 中方法各种参数和返回值详解
2018/12/15 Python
Scrapy框架基本命令与settings.py设置
2020/02/06 Python
Python2与Python3的区别详解
2020/02/09 Python
opencv 图像礼帽和图像黑帽的实现
2020/07/07 Python
Python 合并拼接字符串的方法
2020/07/28 Python
HTML5 Canvas实现平移/放缩/旋转deom示例(附截图)
2013/07/04 HTML / CSS
意大利领先的线上奢侈品销售电商:Eleonora Bonucci
2017/10/17 全球购物
美国和加拿大计算机和电子产品购物网站:TigerDirect.com
2019/09/13 全球购物
英国在线照明超市:Castlegate Lights
2019/10/30 全球购物
德国、奥地利和瑞士最大的旅行和度假门户网站:HolidayCheck
2019/11/14 全球购物
介绍一下Mysql的存储引擎
2015/02/12 面试题
国庆节文艺活动方案
2014/02/03 职场文书
司法局火灾防控方案
2014/06/05 职场文书
个人年度总结报告
2015/03/09 职场文书
2015年毕业生自荐信范文
2015/03/24 职场文书
2016简单的租房合同范本
2016/03/18 职场文书
详解Nginx 被动检查服务器的存活状态
2021/10/16 Servers
windows11怎么查看自己安装的版本号? win11版本号的查看方法
2021/11/21 数码科技
一文搞懂Golang 时间和日期相关函数
2021/12/06 Golang