如何使用JavaScript，樣式和HTML移動圖像周圍的圖像

我是HTML，樣式表和Javascript中的新手。我創造了這個（改變圖像參考）如何使用JavaScript，樣式和HTML移動圖像周圍的圖像

<html> 
<head> 
<style> 
.container 
{ 
    width: 300px; 
    height: 300px; 
    position:relative; 
    margin:100px; 
} 

.block, .center 
{ 
    width:25%; 
    height:25%; 
    background:#5aa; 
    border-radius:10px; 
    position:absolute; 
    left:50%; 
    top:50%; 
    margin-left:-12%; 
    margin-top:-12%; 
} 

.center 
{ 
    width:30%; 
    height:30%; 
    margin-left:-15%; 
    margin-top:-15%; 
    border-radius:100%; 
} 

.tl 
{ 
    left:20%; 
    top:20%; 
} 
.tr 
{ 
    left:80%; 
    top:20%; 
} 
.br 
{ 
    left:80%; 
    top:80%; 
} 
.bl 
{ 
    left:20%; 
    top:80%; 
} 
.t 
{ 
    top:10%; 
} 
.r 
{ 
    left:90%; 
} 
.b 
{ 
    top:90%; 
} 
.l 
{ 
    left:10%; 
} 
</style> 
</head> 
<body> 
<div class="container"> 

    <img src="painting\afremov_flower_ (1).jpg" class="block tl"> 
    <img src="painting\afremov_flower_ (1).jpg" class="block t"> 
    <img src="painting\afremov_flower_ (1).jpg" class="block tr"> 
    <img src="painting\afremov_flower_ (1).jpg" class="block l"> 
    <img src="painting\afremov_flower_ (1).jpg" class="center"> 
    <img src="painting\afremov_flower_ (1).jpg" class="block r"> 
    <img src="painting\afremov_flower_ (1).jpg" class="block bl"> 
    <img src="painting\afremov_flower_ (1).jpg" class="block b"> 
    <img src="painting\afremov_flower_ (1).jpg" class="block br"> 

</div> 
</body> 
</html>

現在我想走動目前在中心圓框。這怎麼可能？正如你所看到的，我沒有使用任何畫布，所以有可能沒有任何畫布創建？因爲我從這個網站得到了一些代碼，但他們都是用畫布。

感謝您的幫助和時間。

林蛙

來源

2013-08-06 rana

基本上你這是怎麼能做到這一點：

JavaScript的

function drawCircle(selector, center, radius, angle, x, y) { 
    var total = $(selector).length; 
    var alpha = Math.PI * 2/total; 
    angle *= Math.PI/180; 

    $(selector).each(function(index) { 
    var theta = alpha * index; 
    var pointx = Math.floor(Math.cos(theta + angle) * radius); 
    var pointy = Math.floor(Math.sin(theta + angle) * radius); 

    $(this).css('margin-left', pointx + x + 'px'); 
    $(this).css('margin-top', pointy + y + 'px'); 
    }); 
}

的CSS

.container { 
    width:800px; margin:0 auto; 
} 

.box {  
    -moz-border-radius:150px; 
    -webkit-border-radius:150px; 
    background-position:0px 0px; 
    background-color:#ccc; 
    position:absolute; 
    background-repeat:no-repeat; 
    float:left; 
    height:120px; 
    margin:18px; 
    position:absolute; 
    width:120px; 
    padding:5px; 
}

的HTML標記

<div class="container"> 
    <img src="http://placehold.it/150x150" class="box"> 
    <img src="http://placehold.it/150x150" class="box"> 
    <img src="http://placehold.it/150x150" class="box"> 
    <img src="http://placehold.it/150x150" class="box"> 
    <img src="http://placehold.it/150x150" class="box"> 
    <img src="http://placehold.it/150x150" class="box"> 
    <img src="http://placehold.it/150x150" class="box"> 
    <img src="http://placehold.it/150x150" class="box"> 
    <img src="http://placehold.it/150x150" class="box"> 
</div>

見DEMO here。

希望它有幫助。

來源

2013-08-06 09:46:56 intuitivepixel

幾乎正確的是，您忘記將度數轉換爲cos/sin的弧度。如果在'drawCircle（）'函數內部添加'angle * = Math.PI/180;'，它將會很完美。從我+1。 http://jsbin.com/adeleb/1/edit – K3N

@ Ken-AbdiasSoftware，非常感謝，添加了你的改進，現在它旋轉得很好，看起來幾乎像一個'旋轉鼓':) – intuitivepixel

當心吸血鬼http：///slash7.com/2006/12/22/vampires/ – NDM

如何使用JavaScript，樣式和HTML移動圖像周圍的圖像

回答

相關問題