如何使用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移动图像周围的图像

回答

相关问题