-
Reactjs 2017‧05‧29
JSX - 마우스 오버/아웃 효과
마우스 오버와 아웃 효과에 따른 스크립트를 작성할 때 아래와 같이 JSX에서 엘리먼트 안에 넣어 주면 된다. <img src='icon.jpg' onMouseOver={(event) =>{ 마우스 오버시 스크립트}} onMouseOut={(event) => { 마우스 아웃시 스크립트 }} /> 바로 스크립트를 작성해 넣지 않고, 작성된 컴포넌트 안에 선언한 인수를 실행할 수도 있다. <img src='icon.jpg' onMouseOver={(event) =>{ this.handlerOver(event);}} onMouseOut={(event) => { this.handlerOut(event); }} /> […]
-
Javascript, jQuery 2015‧12‧28
jQuery - 버튼에 마우스 오버 상태에서 클릭한 뒤 마우스 상태에 맞게 css로 만드는 팁
css로만으로 처리하면 참 좋을 듯 한 이 기능은 css에서 hover를 이용하게 되면 클릭했을 때 마우스가 hover라는 영역을 벗어나더라도 hover 상태가 되어 있을 때가 있다. 물론 마우스를 조금만 움직여도 다시 out 상태로 돌아가긴 하지만 상황에 따라 바로 out상태로 구분되어져야하는 상황이 있기 때문에 jquery 코드와 css 코드로 응용해본다. $('#menuButton').on('click',function(e){ //클릭했을 때 액션이 있다면 여기에 스크립트 작성 }).mouseenter(function(e){ […]
-
Tools, Web Design 2014‧04‧01
디자이너들에게 추천하는 크롬 브라우저 앱기능
실무자 중에서도 크롬이나 파이어폭스를 이용해서 웹을 서핑하는 분들이 많이 계실꺼라 생각합니다. 그 중에 크롬에는 크롬 웹스토어를 통해 새로운 기능들을 추가할 수 있는데요. 이 앱들로 인해서 작업하기도 수월하고 간단합니다. 1. 창 크기를 조절하여 반응형웹을 테스트하기 적합한 'Window Resizer' 다운로드 경로 : https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh 크롬 브라우저로 위 경로를 접속해서 설치하게 되면 브라우저에 아래와 같이 아이콘이 생깁니다. 이렇게 추가된 […]
-
Javascript, jQuery 2012‧10‧18
jQuery-마우스가 브라우저 밖으로 나갔을 때 이벤트
마우스가 브라우저를 나가는 이벤트를 받아서 활용하는 두가지 방법이 있다. 하나는 (창이 전환되었을 경우, 혹은 마우스가 다른 창을 클릭하여 화면이 바뀐 경우), $(window).blur(function() { //코드 넣는 곳 }); 다른 방법은(순전히 화면에서 마우스가 나갔을 경우), $(document).bind("mouseleave", function(){ //코드 넣는 곳 }) 두 방법은 엄연히 다르다. 자세한 설명은 .bind() 와 .blur()에 대해서 jQuery 도움말을 보면 된다.
-
Javascript, jQuery 2012‧10‧17
jQuery-마우스 움직임을 이용, 좌표값 가져오기
마우스의 좌표를 이용해서 div들을 움직이게 하고 싶은 경우가 있다. 마우스의 움직임에 대한 값을 얻어낸다면 나머지는 응용하면 된다. 마우스의 움직임. 즉, 좌표값을 얻어내는 방법은 아래와 같다. <script type="text/javascript"> jQuery(document).ready(function(){ $(document).mousemove(function(e){ $('#status').html(e.pageX +', '+ e.pageY); }); }) </script> 코드를 설명하자면 document. 즉, 브라우져 내부에서 마우스를 움직이게 되면 x값인 e.pageX와 y값인 e.pageY를 가져와서 status라는 id를 가진 곳에 노출하라라는 말이다.
-
Javascript, jQuery 2012‧10‧15
jQuery-마우스 이벤트시 부모 div의 id 값 가져오기
마우스 오버의 경우를 예로 든다. $Btn.mouseover(function(){ console.log($(this).closest('div').attr('id')); } $ Btn에 마우스를 올리면 그 상위 div 중에 id 값을 얻을 수 있다.
-
Flash AS 2.0 2011‧10‧06
버튼에 마우스 커서 변함 없게 만들기
인스턴스네임.useHandCursor = false;