3

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

4

3 回答 3

10

  1. 这个东西在 Safari 和谷歌浏览器中不起作用。

  2. 您需要在页面中包含jquery.js。不要忘记有一个单独的结束标签。

    <script type="text/javascript" src="jquery.js"></script>

  3. 您还需要在页面中包含 jQuery Corner Plugin JavaScript 文件 ( jquery.corner.js )。

    <script type="text/javascript" src="jquery.corner.js"></script>

  4. 在您的页面中的某处，您应该有<div>您想要的角落：

    <div id="divToHaveCorners" style="width: 200px; height: 100px; background-color: #701080;">Hello World!</div>

  5. 在页面的其他地方，最好不在 div 本身之前，发出以下 JavaScript 命令。这将在页面加载并准备好操作时执行内部函数。

    <script type="text/javascript">$(function() { $('#divToHaveCorners').corner(); } );</script>

  6. 你完成了！如果没有，请告诉我。

于 2008-11-06T21:50:08.953 回答
1

Methvinhttp://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>

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

于 2009-11-05T23:28:05.887 回答
0

1) 确保 jquery 已加载 2) 确保corners lib已加载 3) 在准备好的回调中，使用选择器获取您想要效果的 div 并调用corners 方法

$(document).ready(function() {
 $("#idofdiv").corners();
});
于 2008-11-06T21:49:30.127 回答