1

角を丸くするためにjqueryのコードを修正しました。背景色だけでテストしましたが、正常に動作します。

ただし、画像にコーナーを適用したい。それは私にはうまくいきません！

同じクラスの div のすぐ隣に、クラスの画像があるサンプル ページを作成しましたが、背景色しかありません。画像は機能しませんが、色付きの「ボックス」は機能します。

3 つの異なる方法でコーディングを試みましたが、まだ機能しません。(コーディングの 3 つの方法すべてが機能する必要はありません。1 つだけで十分です! ;'D )

ここに私のフィドルのリンクがあります: http://jsfiddle.net/SunnyOz/g46Gx/

オンラインのテスト ページは次のとおりです。http://www.webau.net/TC/example/corner_test.htm

CSSは次のとおりです。

* {
    border: 0 none;
  }

.content {
    width: 900px;
    background-color: #fff; 
    margin: 0 auto;
}

.innertube {
    padding: 20px;
}

.imgBox, .imgBox img { width:493px; height:257px; margin:0; padding:0 }

.divToHaveCorners, .divToHaveCorners img { width:493px; height:257px; margin:0; padding:0; display: block; }

HTMLは次のとおりです。

<div class="content">

  <div class="innertube">

    <br clear="all" />
    <br clear="all" />

    <img class="roundimg" src="http://webau.net/TC/example/images/motorcycle1.jpg" /> &nbsp;&nbsp;&nbsp; 
    <div class="roundimg" style="width: 200px; height: 100px; background-color: #701080;">Hello World!</div>

    <br clear="all" />
    <br clear="all" />

    <div class="imgBox"><img src="http://webau.net/TC/example/images/motorcycle1.jpg" /></div> &nbsp;&nbsp;&nbsp; 
    <div class="imgBox" style="width: 200px; height: 100px; background-color: #701080;">Hello World!</div>

    <br clear="all" />
    <br clear="all" />

    <img class="divToHaveCorners" src="http://webau.net/TC/example/images/motorcycle1.jpg" /> &nbsp;&nbsp;&nbsp; 
    <div class="divToHaveCorners" style="width: 200px; height: 100px; background-color: #701080;">Hello World!</div>

    <br clear="all" />
    <br clear="all" />

  </div>
</div>

内部 Javascript コードは次のとおりです。

$(document).ready(function(){
     $(".roundimg").corner("tl 50px").corner("br 50px");
     $(".imgBox").corner("15px");
     $('.divToHaveCorners').corner();
});

私の外部JS参照は次のとおりです。

<script type="text/javascript" src="http://webau.net/TC/example/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://webau.net/TC/example/jquery.corner.js"></script>

.

本当に単純なものを省略したと思います..しかし、私はそれを見ることができません。どんな助けでも大歓迎です。

ありがとう、サニーオズ

4

1 に答える 1

1

これで十分ですが、 imgrのように、これらの種類のものをはるかに使いやすくするプラグインもたくさんあります。また、これを参照として使用すると、非常に役立つ場合があります。乾杯！

<!DOCTYPE html>
<html>
<head>
<style>
#imgBox, #imgBoxPlain, #imgBox img { background-color: #701080; width:493px; height:257px; margin:0;padding:0;}
</style>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="jquery.corner.js"></script>
<script type="text/javascript">
$.fn.corner.defaults.useNative = false;
    $(document).ready(function(){
        $("#imgBox").corner("15px");
        $("#imgBoxPlain").corner("15px");
    });
</script>
</head>
<body>
<div class="content">
  <div class="innertube">
    <div id="imgBox"><img src="images/motorcycle1.jpg" /></div>
    <div id="imgBoxPlain" style="width: 200px; height: 100px;">Hello World!</div>
  </div>
</div>

</body>
</html>
于 2013-03-09T20:14:27.813 に答える