以前「jQueryでこういうの作れますか？」と相談を受けた時に作ったサンプルです。
動きは以下のようになります。
- なにもしない時は白いカーソルがメニューの上を時計回りに移動
- メニューのマウスオーバーで白いカーソルをマウスカーソルまで移動。マウスアウトでその位置から再び時計回りに移動。
ちょっと手こずったのは、白いカーソルが移動中の時にマウスカーソルを動かし、その動きについていけるようにする部分でした。
色々調べると、現在設定されているアニメションを停止するstop()という命令があることがわかり、それをanimate()の前に付け加えることでうまくいくようになりました。
html部分
<div id="box"> <div id="cursol"></div> <ul> <li><a href="" id="link1">link1</a></li> <li><a href="" id="link2">link2</a></li> <li><a href="" id="link3">link3</a></li> <li><a href="" id="link4">link4</a></li> <li><a href="" id="link5">link5</a></li> <li><a href="" id="link6">link6</a></li> <li><a href="" id="link7">link7</a></li> <li><a href="" id="link8">link8</a></li> </ul> </div>
css部分
h1 {
margin-left: 20px;
margin-bottom: 20px;
}
#box {
position: relative;
background-image:url(box.gif);
height:220px;
width:360px;
margin-left: 20px;
}
#cursol {
position: absolute;
top: 50px;
left: 50px;
height: 40px;
width: 40px;
border:solid 5px #fff;
}
li a {
display:block;
height:50px;
width:50px;
line-height: 50px;
text-align: center;
position: absolute;
}
#link1 {left: 50px;top: 50px}
#link2 {left: 120px;top: 50px}
#link3 {left: 190px;top: 50px}
#link4 {left: 260px;top: 50px}
#link5 {left: 260px;top: 120px}
#link6 {left:190px;top: 120px}
#link7 {left: 120px;top: 120px}
#link8 {left: 50px;top: 120px}
javascript（jQuery）部分
$(function(){
var timerID = setInterval(Rotation,2000);
$("a").mouseover(function(){
var mx = parseInt($(this).css("left"));
var my = parseInt($(this).css("top"));
clearInterval(timerID);
$("#cursol").stop().animate({
left : mx + "px",
top : my+ "px",
},100,"swing");
}).mouseout(function(){
timerID = setInterval(Rotation,2000);
});
});
function Rotation() {
x = parseInt($("#cursol").css("left"));
y = parseInt($("#cursol").css("top"));
if( (x < 260) && (y == 50)) {
$("#cursol").animate({
left : x + 70+ "px",
},1000,"swing");
} else if ( (x == 260) && (y == 50)) {
y = parseInt($("#cursol").css("top"));
$("#cursol").animate({
top : y + 70 + "px",
},1000);
} else if ( (x > 50) && (y == 120) ) {
x = parseInt($("#cursol").css("left"));
$("#cursol").animate({
left : x - 70 + "px",
},1000,"swing");
} else if ( (x == 50) && (y == 120) ) {
y = parseInt($("#cursol").css("top"));
$("#cursol").animate({
top : y - 70 + "px",
},1000,"swing");
}
}
