div 회전

[.js] div 의 이동 2017. 9. 7. 15:39

<html>

<head>

</head>


<script  language="javascript"  >

 /*

rotate the div(a1) 

 */


 var div_a1;


 function init(){

  div_a1 = document.getElementById('a1');

   aa = setInterval("rotate_div()", 50); //  1000 = 1초   1초마다 roofing_func 를 실행하라.~

 }


 

 var aa = 0;

 

 function rotate_div(){

   //div_a1.style.left = e.offsetX - 20 + 'px';

   //div_a1.style.top = e.offsetY - 20 + 'px';     

   aa += 1;

   if( aa > 360 )

   aa = 0;

   div_a1.style.webkitTransform = 'rotate(' + aa + 'deg)';     

 }



</script>

    <body  onload="init();" >

        <div id="groundDiv"  style="position:relative; width:99%; height:99%; border:0x solid black;"></div>

        <div id='a1'  style="position:absolute; width:3px; height:50px; border:2px solid black;top:100px;left:100px  " ></div>

    </body>

</html>

 

'[.js] div 의 이동' 카테고리의 다른 글

클릭 드레그 하면 따라다니는 div  (0) 2017.09.07
한 점을 기준으로 + 를 회전시킴  (0) 2017.09.06
click 누르면 div를 생성해서 특정 위치에 위치시킨다.  (0) 2017.09.06
Posted by 혜화초보
,

클릭 드레그 하면 따라다니는 div

[.js] div 의 이동 2017. 9. 7. 15:04

 

 




<html>
<head>
</head>


<script  language="javascript"  >


 /*Click and drag to follow the div */


 var div_a1;


 function init(){
   div_a1 = document.getElementById('a1');
   var groundDiv = document.getElementById('groundDiv');
   groundDiv.addEventListener('mousedown', mouseDown);
   groundDiv.addEventListener('mousemove', mouseMove);
   groundDiv.addEventListener('mouseup', mouseUp);
 }


 var isClick = false; 
 function mouseDown(e){
   isClick = true;
 }
 
 function mouseMove(e){
   if( isClick == true ){
     div_a1.style.left = e.offsetX - 20 + 'px';
     div_a1.style.top = e.offsetY - 20 + 'px';     
   }
 }
 
 function mouseUp(e){
   isClick = false;
 }


</script>
    <body  onload="init();" >
        <div id="groundDiv"  style="position:relative; width:99%; height:99%; border:0x solid black;"></div>
        <div id='a1'  style="position:absolute; width:3px; height:3px; border:2px solid black;top:2px;left:3px  " ></div>
    </body>
</html>

 

 

'[.js] div 의 이동' 카테고리의 다른 글

div 회전  (0) 2017.09.07
한 점을 기준으로 + 를 회전시킴  (0) 2017.09.06
click 누르면 div를 생성해서 특정 위치에 위치시킨다.  (0) 2017.09.06
Posted by 혜화초보
,

한 점을 기준으로 + 를 회전시킴

[.js] div 의 이동 2017. 9. 6. 16:55

 

 

 





<html>
<head>
<script type="text/javascript">


function rotate_exe() {
    s += 2;
    var sx = Math.cos((s)*1*deg)*r;
    var sy = Math.sin((s)*1*deg)*r;


    document.getElementById('star').style.left = Math.round(cx + r + sx  ) + 'px';
    document.getElementById('star').style.top = Math.round(cy + r + sy  ) + 'px';
}


function start_rotate() {
    r = 30;   //반지름
    deg = Math.PI/180; //degrees
    s = 0;


    document.getElementById('star' ).style.position = 'absolute';
    document.getElementById('star' ).innerHTML = '+';
    
    cx = 300;  //별이 회전하는 축의 x
    cy = 300;  //별이 회전하는 축의 y
    aa = setInterval("rotate_exe()", 50);      
}




</script>
</head>
<body onload="start_rotate();" >
  <div id="star"  style=""  ></div>
</body>
</html>

 

 

 

 

'[.js] div 의 이동' 카테고리의 다른 글

div 회전  (0) 2017.09.07
클릭 드레그 하면 따라다니는 div  (0) 2017.09.07
click 누르면 div를 생성해서 특정 위치에 위치시킨다.  (0) 2017.09.06
Posted by 혜화초보
,

click 누르면 div를 생성해서 특정 위치에 위치시킨다.

[.js] div 의 이동 2017. 9. 6. 16:53

 

 


/*
click 누르면 div를 생성해서 특정 위치에 위치시킨다.
다시 누르면 위치 시켰단 div 를 제거한다.
*/


<html>
<head>


<style type="text/css">
 <!--
  #base1 {
  background-color: #DCDAD9;
  width: 100px;
  height: 100px;
  position:absolute;
  }
 //-->
 </style>


</head>


<script  language="javascript"  >
 
 /*
 add_div 를 실행하면 base1 아이디를 갖는 div 를 생성하고
 cal 이라는 아이디를 갖는 input 박스의 위치를 구해서 그 위치로
 base1 div 를 이동시킨다. 
 */
 
 var ppp = 0;
 
 function cal_exe(){
   if( ppp == 0 )
     add_div();
   else
     remove_div();   
 }
 
 function add_div(){
    var a1 = document.createElement('div');
    a1.innerHTML = " <div id='base1' >  </div> ";
    document.body.appendChild(a1);


    ppp += 1;


    var pTag = document.getElementById("cal");
    var pTag2 = document.getElementById("base1"); 
   
    pTag2.style.top = pTag.offsetTop  + pTag.offsetHeight ;   
    pTag2.style.left = pTag.offsetLeft;   
    
 }


 function remove_div(obj){
    ppp= 0;
    var pTag2 = document.getElementById("base1"); 
    pTag2.parentNode.removeChild( pTag2 );
 }




</script>
    <body>
        <div id="container">
        </div>
        <br><br><br><br><br><br> &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;
        <input type='text'  id='cal'  >
        
        
        <a href="javascript:cal_exe();"  >bb</a>
    </body>


</html>
 

 

 

 

'[.js] div 의 이동' 카테고리의 다른 글

div 회전  (0) 2017.09.07
클릭 드레그 하면 따라다니는 div  (0) 2017.09.07
한 점을 기준으로 + 를 회전시킴  (0) 2017.09.06
Posted by 혜화초보
,

티스토리툴바