マウスストーカー９-２■画像■　+CSS の左右回転リングマウス

●2016/09/26：即時関数で囲んで、グローバル変数を消しました。

■複数種類の画像がリング上にマウスの周囲を回転するJavaScriptはこちら→　マウスストーカー９■画像■リング画像のマウス

上記のマウスストーカーのJavaScriptを改造しました。
複数種類の画像がリング上にマウスの周囲を回転し、さらにCSS の「animation」を追加することで、画像が１個ずつ個別に左右回転するマウスストーカーです。

JavaScriptのソースの中に、
var Acss="animation:sayuuR 3s linear 0s infinite alternate;";
という指定があります。
興味のある方はmCPブログの「基礎から学ぶCSS3で作るギミック、アニメーション transform transition animation編」を参考に、変更してみて下さい。
CSSで指定する「@keyframes ●●{～～～}」とJavaScriptの中で指定する「var Acss="animation:●●～～～;";」を変更すれば、いろいろな動作を作ることができます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>マウスストーカー９-２■画像■　+CSS の左右回転リングマウス</title>

<!--★コピーここから-->
<style type="text/css"><!--
body{background:#eda;}/*★背景色指定。薄茶色。不要なら削除*/

/*★★必須。マウスストーカーの左右回転の動きの指定。名前はsayuuR。お好みで変更可*/
@keyframes sayuuR {
	from {transform: rotateY(0deg);}
	to {transform: rotateY(720deg);}
}
--></style>
<!--★コピーここまで　bodyの中にもコピーがあります-->

</head>
<body>

<!--★ここからコピー。位置はbodyの中です-->
<script type="text/javascript"><!--
/*=============================================================================
左右回転リングマウス　★ブラウザ全対応とHTML5対応へ改造。画像を一括指定へ変更。CSSのanimation追加で左右回転に改造。2016/09/26
アッと驚く達人の技 HTML+JavaScript+CSS(7.マウスの回りに画像を回転させる http://www.openspc2.org/HTML_JS_CSS/)　　
改造参考：http://homepage3.nifty.com/masas/sdir/index.html(サイト名 Scrap Dir)
================================================================================*/
(function (){  //即時関数で囲んでグローバル変数を消すため、この行はこのままで

//★画像を順番に"●",と区切って並べる。増減可能。最後の]の前には,(カンマ)無し
var ga=["bu1.gif","bu2.gif","bu3.gif","bu5.gif"];
var myurl="";  //★画像パス。文書とは別のフォルダーなどに入っている時は指定。全画像共通部分

var num=8;     //★マウス画像表示数
var spd=100;   //★画像の回転速度。小さいほど早く回る
var r=60;      //★カーソルからの距離（回転の半径）★原本32。大きくしても可能
var rota=1;    //★「1」で左回転「-1」で右回転
var cX=-10;    //★マウス画像のサイズに合わせて、回転の中心点とカーソルの水平位置(マイナスで左方向)
var cY=-10;    //★マウス画像のサイズに合わせて、回転の中心点とカーソルの垂直位置(マイナスで上方向)

var Acss="animation:sayuuR 3s linear 0s infinite alternate;";/*★アニメーション指定。alternateをnormalに変更すると、同じ向きにずっと回転*/

//指定ここまで--------------------------------------------------------------------------
function $(id){return document.getElementById(id);}/*document.getElementByIdを簡略化*/
var len=ga.length, i=0,cnt=0,mx=-200,my=-200;
document.onmousemove=function (e){mx=e.pageX+cX;my=e.pageY+cY;}
function rotIMG(){
for (i=0; i<num; i++){
cnt++;
var n=(cnt+(360/num)*i)* Math.PI/180;
$("Mga"+i).style.left=mx+Math.sin(n)*r+"px";
$("Mga"+i).style.top=my+(rota*Math.cos(n)*r)+"px";
}
setTimeout(rotIMG,spd);
}
for (i=0; i<num; i++){document.write('<img src='+myurl+ga[i%len]+' id="Mga'+i+'" style="position: absolute;'+Acss+'">');}
rotIMG();
}());//即時関数終了
// --></script>
<!--★ここまでコピー-->

</body>
</html>

マウスストーカー９-２■画像■ +CSS の左右回転リングマウス UP日時 : 2016/09/26

　マウスストーカー９-２■画像■　+CSS の左右回転リングマウス　　　　UP日時 : 2016/09/26