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();