来源:自学PHP网 时间:2014-11-29 13:28 作者: 阅读:次
[导读] 虽然圆角页面很好看,但一直以来都不太好实现,一方面是没有CSS3,二是都得通过美工切图切出来角。但这些麻烦事即将过去,就是因为它:jQuery Corner的出现!...
jQuery Corner是一款jQuery的插件,最初由Dave Methvin开发,但后在Malsup同志的协助下,进行了一些重要的改进。现在项目放在github上,当然为了方便,本文会以附件的形式提供该插件,但要想得到最新版,请到项目的github上拿。 看来我真不是干魔术师的料,一上来就先把老底给揭了出来。不急,我再补充一下,这个魔术的一些要求: 1、插件专为block元素编写,所以div、p等均适用;而inline的元素则没有那么幸运了,当然也不是说inline根本不能用,只是面对为span增加corner要多费点神。不过,正常人不会和span的圆角较劲吧,把span改成div得了。 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,和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> 此时,还是刚才图的效果,直角没变。 <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> 此时,圆角就出现了。
********************************拓展************************************ 一、有多种Corner可选 如果你喜欢凹状,那么上图第一排,第三列就是好选择。先认识个单词notch,就是凹槽的意思。只需把一处代码改成: <script type="text/javascript"> $(function(){ $("div").corner("notch"); }); </script> 就可以得到这个效果:
<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> 看图吧:
但有两句话需要大家注意(原文):* 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出现的具体位置。看图: 比如对于notch而言,想为mydiv的底部增加notch效果,则改写代码如下: $("#mydiv").corner('bevel bottom'); 于是,就只有底部产生notch角了。
三、可自定义角度大小 这功能很好,填写个像素值,就能改变角度。试试吧: $("#mydiv").corner('bevel bottom 50px'); 惊奇的图像如下:
四、混搭 就刚才这个例子,把上边两个角变为圆角,而下方仍然不变。看代码: $("#mydiv").corner('top 30px').corner('bevel bottom 50px'); 没错,就是用两句corner。当然你可以完全使用四个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> 就会这样:
这图是chrome下的效果,IE下还不一样,夜色很晚了,没时间调试深入发现问题的原因。 |
自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习
京ICP备14009008号-1@版权所有www.zixuephp.com
网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com