首页 > Web开发 > 详细

超级好用的圆角框制作——Jquery Corner

时间:2014-01-21 00:45:55      阅读:444      评论:0      收藏:0      [点我收藏+]

  圆角页面很好看,但一直以来都不太好实现。即使牛腩老师在新闻发布系统中又是PS又是截图的给大家讲过如何制作圆角框,当现在想想,似乎都已经忘光了,在这里分享一种简单容易上手的制作方法——Jquery Corner。

  简而言之,Jquery Corner一方面是没有CSS来控制样式,二来避免了PS美工切图的麻烦和烦恼,只需要简单的js引用和js操作,从而实现了很友好的圆角效果。

基本情况:

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

具体使用:

第一步,构建基本HTML网页和DIV格局,并CSS


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


效果:

bubuko.com,布布扣

第二步:引用Jquery 和Corner文件

<html>
<head>
    <script src="jquery.min.js"></script>
    <script src="jquery.corner.js"></script>
    <style type="text/css">
        div {
            width: 350px;
            height: 200px;
            background-color: #0ff;
        }
    </style>
</head>
<body>
    <div>
    </div>
</body>
</html>

第三步:使用JS操作div 从而实现圆角效果

<!DOCTYPE html>
<html>
<head>
    <script src="jquery.min.js"></script>
    <script src="jquery.corner.js"></script>
    <script type="text/javascript">
        $(function () {
            $("div").corner();

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

效果:

bubuko.com,布布扣


延伸扩展:

当然,作为一个封装好的JS文件,不仅仅是这一个圆角样式。更多的样式效果。每种样式图片上面都有相应的corner效果的样式


超级好用的圆角框制作——Jquery Corner

原文:http://blog.csdn.net/zhangleilei4869/article/details/18363017

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!