問題9:ローディングマークの作り方
今回はよく見かけるローディングマークをjqueryを使って作ってみましょう!
ローディングマークの半径は50px、ローディングの要素は20個で作っています(ここは自由に決めてもらっていいです)。
ローディングマークの半径は50px、ローディングの要素は20個で作っています(ここは自由に決めてもらっていいです)。
あらかじめエディタに書くコード
<div class="box"></div>
¥HTML¥
.box{
position: relative;
width: 300px;
height: 300px;
}
.box span{
position: absolute;
top: 50px;
left: 100px;
width: 5px;
height: 15px;
border-radius: 5px;
background-color: black;
}
¥CSS¥
期待する画面
解答ソースコード
$(function () {
var num=20;
for(var i=0;i<num;i++){
$(".box").append("<span></span>");
var angle=Math.PI*(2/num)*i,
rotateAngle=360*i/num,
moveX=50*Math.sin(angle)+"px",
moveY=50*(1-Math.cos(angle))+"px",
move="translate("+moveX+","+moveY+") "+" rotate("+rotateAngle+"deg)";
$(".box span").eq(i).css({
"transform":move,
});
}
});
¥JavaScript¥
完了にする!
活動記録をTweetする
何においてもそうなのですが、正解はありません。別解は山ほどあると思うので、自分で同じようなものを作ってみても面白いと思います。次回はこのマークに動きをつけて行きたいと思います。