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