js "공유" 사 이 드 테두리 신축 실현

1968 단어 js
1,     -150   0 2,  :      3,        ,       

--------------------------------
html
<div id="div1"><span>   </span></div>



<style>

#div1 { position:absolute; left:-150px; width:150px; height:200px; background:green;}

#div1 span {position:absolute; right:-20px; top:70px; width:20px; height:60px; line-height:20px; background:blue;}

</style>


 
js 부분
<script>



window.onload = function(){

	var oDiv = document.getElementById("div1");

	var timer = null;

	

	oDiv.onmouseover = function(){

		showHide(0);

	}

	

	oDiv.onmouseout = function(){

		showHide(-150);

	}

	

	//  

	function show(){

		clearInterval(timer);

		timer = setInterval(function(){

			if(oDiv.offsetLeft>=0){

				clearInterval(timer);

			}else{

				oDiv.style.left = oDiv.offsetLeft + 10 + "px";

			}

		},30);

	}

	

	//  

	function hide(){

		clearInterval(timer);

		timer = setInterval(function(){

			if(oDiv.offsetLeft==-150){	//     

				clearInterval(timer);

			}else{

				oDiv.style.left = oDiv.offsetLeft - 10 + "px";

			}

		},30);

	}

	

}





</script>


  
최적화 하여 하나의 방법 으로 만들다.
//       

	function showHide(iCritical){

		clearInterval(timer);

		var speed;

		timer = setInterval(function(){

			if(oDiv.offsetLeft > iCritical){

				speed = -10;

			}else{

				speed = 10;

			}

			

			if(oDiv.offsetLeft == iCritical){

				clearInterval(timer);

			} else{

				oDiv.style.left = oDiv.offsetLeft + speed + "px";

			}

			

		},30);

	}


  
 
 
 

좋은 웹페이지 즐겨찾기