Question

这可能听起来很愚蠢，但我不知道如何实现jquery的圆角（http://www.methvin.com/jquery/jq-corner-demo.html）。我的javascript-fu完全失败，我似乎无法让它在我的页面上工作。任何人都可以向我展示一个简单的HTML和JavaScript示例，用于展示它们吗？为我的白痴道歉。

Answer 1

这个东西在Safari＆amp;谷歌浏览器。
您需要在页面中加入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>
你已经完成了！如果没有，请告诉我。

Answer 2

Methvin http://www.methvin.com/jquery/jq-corner-demo.html的jquery角落很好，工作正常，但......还有更多美丽的选择：

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

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

什么是非常重要的： - 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是左上角，右上角等...

接下来，您的BODY区域：

和？

就是这样:)）

链接到图片：

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>

只需复制，粘贴，享受：）

Answer 3

1）确保加载了jquery 2）确保装入了角落库 3）在准备回调中，使用选择器抓取你想要影响的div并调用corner方法

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

jquery圆角

3 个答案: