jquery.corner.js插件，我無法得到它在圖像上工作

我有代碼corect爲jquery做出圓角。我已經測試它只有一個背景顏色，它工作正常。jquery.corner.js插件，我無法得到它在圖像上工作

但是，我想將角應用於圖像。它只是不適合我！

我創建了一個示例頁面，其中我有與類相同的圖像旁邊的div，但只有一個背景顏色..圖像將無法正常工作，但彩色'框'將。

我試過用三種不同的方式編碼它，但它仍然不行。（我不需要編碼工作的所有三種方式..只是一個會做;「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>

。

我假設我遺漏了一些非常簡單的東西..但我只是看不到它。任何幫助將不勝感激。

感謝， SunnyOz

來源

2013-03-09 SunnyOz

該做的，但也有插件，使這類事情更容易使用像imgr一噸。另外 - 使用this作爲參考可能對您非常有幫助。乾杯!

<!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-09 20:14:27 Chris

jquery.corner.js插件，我無法得到它在圖像上工作

回答

相關問題