jQueryとjavascriptで●マークを画面の横から動かし一周させてみた

jQueryとjavascriptで●マークを画面の横から動かし一周させてみた

コード


//回転させる

//画面の半分の幅を取得
var ua = navigator.userAgent;
if (((ua.indexOf('iPhone') > 0) || ua.indexOf('iPod') > 0 || (ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0))  && window.innerHeight > window.innerWidth) {
    // スマホ縦向きのとき
    var deviceHalfWidth = screen.width/2;
  } else {
    // PC・タブレット・スマホ横向きのとき
    var deviceHalfWidth = $(window).width()/2;
  }

//画面の半分の高さを取得
var deviceHalfHeight = $(window).height()/2;
 console.log(deviceHalfWidth);
//移動時間
var time = 3000;

//要素を作る
var makeElement = function() {
  var sinCosBox = $('
').attr('id', 'sinCosBox');
　sinCosBox.text('●');
  //要素を置く
  sinCosBox.css({'position':'fixed', 'left':'-50px', 'top':'300px'});
  $('.text').prepend(sinCosBox);
}


//画面の左半分まで移動させる
var moveCenter = function() {
  $('#sinCosBox').animate({
    left: deviceHalfWidth,
    top: '300px',
  },time, 'linear', function(){
      // alert('終わりました');

      // 一周させる
      var FPS = 20; // 動きの滑らかさ
      var rot = 90;
      var angle = -10; // 何度ずつ動かすか
      var timer = null;
       
      var moveCircle = function(){
        rot += angle;
        // 弧度法（ラジアン）
        if (-270 <= rot && rot < 90) {
          var rad = rot * Math.PI / 180;
        
          var SIN = Math.sin(rad);
          var COS = Math.cos(rad);
          
          $('#sinCosBox').css({marginTop: SIN * 135 - 135 + 'px', marginLeft: COS * 135 + 'px' });
          // sinCosBox.style.marginTop = SIN * 135 + 135 + 'px';
          // sinCosBox.style.marginLeft = COS * 135 + 135 + 'px';
          
          timer = setTimeout(moveCircle, 1000/FPS);
        };
        
      }
      moveCircle();



  });

}



// 画面中央から画面の右半分まで移動
var moveCenterToRight = function(){
  $('#sinCosBox').animate({
    left: deviceHalfWidth*2,
    top: '300px',
  },time, 'linear', function(){
       // alert('終わりました');
       elementRemove();
  });
}

// 要素を消す
var elementRemove = function() {
  $('#sinCosBox').remove();
}



//実行する 
var elementMove = function() {
  makeElement();
  //真ん中まで移動と一周させる
  moveCenter();

  setTimeout(moveCenterToRight,4900);

  setTimeout(elementMove, 9000);
}

elementMove();

category cloud