> 웹 프론트엔드 > JS 튜토리얼 > mouse_javascript 스킬의 위치에 따라 레이어의 위치를 ​​동적으로 제어합니다.

mouse_javascript 스킬의 위치에 따라 레이어의 위치를 ​​동적으로 제어합니다.

WBOY
풀어 주다: 2016-05-16 18:41:18
원래의
1156명이 탐색했습니다.
코드 복사 코드는 다음과 같습니다.

<script> //마우스 처음 클릭하면 표시됩니다. 다시 마우스를 클릭하면 해당 레이어가 더 이상 표시되지 않습니다. <br>/**<br>* 마우스 클릭 이벤트 <br>*bizData: 전달된 매개변수 <br>*/ <br>함수검색(bizData) <br> { <br>if(index==0) <br> { <br>if(bizData==null) //매개변수가 비어 있으면 이 레이어의 콘텐츠가 지워지고 null이 표시되지 않습니다. <br>{ <br>$("bizDiv").innerText = ""; <br>$("bizDiv").style.Background='#99FFFF'; <br>document.onclick = <br>index ; }else <br>{ <br>$("bizDiv").innerText = bizData; <br>$("bizDiv").style.ground='#99FFFF'; //상대 페이지 색상 설정<br>문서. onclick = mouseMove; //클릭 트리거 이벤트<br>} <br>}else{ //두 번째 마우스 클릭<br>$("bizDiv").innerText = "" document.onclick = mouseMove; <br>$("bizDiv") .style.ground='transparent'; //레이어의 배경색을 "투명색"으로 설정 <br>index=0 <br>} <br>} <br>/* <br>*마우스 이동 이벤트, 레이어 상단 및 오른쪽 위치 가져오기 <br>*/ <br>function mouseMove(ev) <br>{ <br>ev= ev || 이벤트; <br>var mousePos = mouseCoords(ev); <br>$("bizDiv").style.right = document.body.clientWidth-mousePos.x 15; <br>$("bizDiv").style. top = document.body.clientHeight-200; <br>$( "bizDiv").style.width='200' <br>//$("bizDiv").style.hight='200'; >} <br>/* <br>* 마우스 위치 가져오기 <br>*/ <br>function mouseCoords(ev) <br>{ <br>if(ev.pageX || ev.pageY){ <br>return {x:ev.pageX, y:ev.pageY}; <br>} <br>return { <br>x:ev.clientX document.body.scrollLeft - document.body.clientLeft, <br>y :ev.clientY document.body.scrollTop - document.body.clientTop <br>} <br>} <br></script>

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿