jquery圆角答案

【问题标题】：jquery round cornersjquery圆角
【发布时间】：2010-09-21 04:29:06
【问题描述】：

这可能听起来很愚蠢，但我不知道如何实现 jquery 的圆角 (http://www.methvin.com/jquery/jq-corner-demo.html)。我的 javascript-fu 完全失败了，我似乎无法让它在我的页面上运行。谁能给我看一个简单的 HTML 和 JavaScript 示例，你会用它来显示它们吗？为我的愚蠢道歉。

【问题讨论】：

标签： javascript jquery rounded-corners

【解决方案1】：

1) 确保已加载 jquery 2）确保角库已加载 3）在ready回调中，使用选择器抓取你想要效果的div并调用corners方法

$(document).ready(function() {
 $("#idofdiv").corners();
});

【讨论】：

【解决方案2】：

这个东西在 Safari 和谷歌浏览器中不起作用。
您需要在页面中包含jquery.js。不要忘记有一个单独的结束标签。

<script type="text/javascript" src="jquery.js"></script>
您还需要在页面中包含 jQuery Corner Plugin JavaScript 文件 (jquery.corner.js)。

<script type="text/javascript" src="jquery.corner.js"></script>
在您的页面某处，您应该有<div>，您希望有角：

<div id="divToHaveCorners" style="width: 200px; height: 100px; background-color: #701080;">Hello World!</div>
在页面的其他位置，最好不在 div 本身之前，发出以下 JavaScript 命令。这将在页面加载并准备好操作时执行内部函数。

<script type="text/javascript">$(function() { $('#divToHaveCorners').corner(); } );</script>
你已经完成了！如果没有，请告诉我。

【讨论】：

你太棒了。您赢得 1 个互联网。明智地使用它：D
Re #5：该函数仅在 DOM 准备就绪时执行，因此可以在 div 之前设置该函数以触发，而不是在包含 jQuery 文件之前。（我喜欢将我的 javascript 放在标题或外部文件中的其余部分附近 - 它在页面底部被忽略）
我遵循 YSlow 的建议，将我所有的 JS 放在页面底部，就在

【解决方案3】：

Methvin http://www.methvin.com/jquery/jq-corner-demo.html 的 jquery 角可以正常工作，但是......还有更漂亮的选择：

http://blue-anvil.com/jquerycurvycorners/test.html

您甚至可以使用该库来制作圆形图像。

什么是非常重要的： - 2008 年 7 月 18 日 - 现在适用于 IE6、7、safari 和所有其他现代浏览器。修复了居中错误。

所以，请从以下网址下载 jQuery Curvy Corners 2.0.2 Beta 3：

http://code.google.com/p/jquerycurvycorners/downloads/list

您必须先加载 jquery 核心库，因此您的 HEAD 示例可以是：

<head>
<script src="http://path.to.your.downloaded.jquery.library/jquery-1.2.6.min.js" type="text/javascript"></script> 
<script src="http://path.to.your.downloaded.jquery.library/jquery.curvycorners.min.js" type="text/javascript"></script>

<script type="text/javascript">
$(function(){

$('.myClassName').corner({
     tl: { radius: 6 },
     tr: { radius: 6 },
     bl: { radius: 6 },
     br: { radius: 6 }
});

}
</script>
</head>

在哪里： tl,tr,bl,br 是左上角、右上角等...

接下来，你的身体区域：

和？

就是这样:)

图片链接：

http://img44.imageshack.us/img44/3638/corners.jpg

...并准备使用代码：

<html>
    <head>
    <script src="http://blue-anvil.com/jquerycurvycorners/jquery-1.2.6.min.js" type="text/javascript"></script> 
    <script src="http://blue-anvil.com/jquerycurvycorners/jquery.curvycorners.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function(){

    $('.myClassName').corner({
         tl: { radius: 12 },
         tr: { radius: 12 },
         bl: { radius: 12 },
         br: { radius: 12 }
    });

    });
    </script>
 <style>
 .myClassName
 {
 width:320px;
 height:64px;
 background-color:red;
 text-align:center;
 margin:auto;
 margin-top:30px;
 }
 </style>
</head>

<body>

<div class="myClassName">content</div>

</body>

</html>

只需复制、粘贴、享受 :)

【讨论】：