마우스를 따라다니는 설명창과 클릭시 주소창변경 채택완료
예제를 들만한 사이트가
http://lol.inven.co.kr/dataninfo/mastery/
정도에요
1. 마우스를 원형 버튼 어디를 이동하든 마우스를 따라다니는 설명창을 만들고싶습니다. mouseover든 css로든 2번과 연계하려고 합니다
2. 이건 예제를 보여줄 사이트를 못찾겠습니다.
버튼을 클릭시 그 버튼이 스위치가 on상태로 이미지가 변하면서 주소창 파라미터값이 0에서 1로
새로고침을 하지않은 화면유지 그상태로 ajax형식이나 뭐든지간에 주소값이 바뀌어서
나중에 그 주소로 들어오면 버튼이 켜져있는 상태가 되는 그런걸 만들고싶습니다.
참고할만한것이 없을까요? 검색해도 설명창은 있지만 마우스를 따라다니지않고, 버튼을 누르면 사이트가 리로드 되버려서 질문을 올려봅니다.
답변 2개
마우스를 따라다니는 설명창은 mousemove 로 구현 가능합니다.
</p>
<p><div class="cursor"></div></p>
<p>위의 div.cursor 와 같이 설명창 공간을 하나 잡아주고, css로 모양을 잡아줍니다. 그리고 마우스가 움직일 때마다 해당 div가 마우스 위치로 이동하도록 스크립트를 입력해줍니다.
</p>
<p>$(window).on("mousemove", (e) => {</p>
<p> $(".cursor").css({</p>
<p> top: e.pageY + "px",</p>
<p> left: e.pageX + "px"</p>
<p> });</p>
<p>});</p>
<p>만약 마우스가 올려진 부분에 따라 다른 모양이 되어야 한다면,
1. 미리 cursor 구역 안쪽에 내용을 넣어두고 display:none 으로 가려둔 뒤 부분 마우스오버 시 보이게 하거나,
2. 부분 마우스오버 시 특정 클래스 추가/내용 추가 등 스크립트로 응용할 수 있을 듯합니다.
2번의 경우는 병원님 말씀대로 세션이나 쿠키 이용해서 저장해두면 될 듯하네요. :)
답변에 대한 댓글 10개
<style>
.cursor{
display: none ;
}
를 줘서 숨기는거 까지 완료했습니다.
<script>
$("#1_1").on("mousemove", (e) => {
$(".cursor").css({
top: e.pageY + "px",
left: e.pageX + "px",
position:"fixed"
});
});
</script>
버튼 id값으로 변경까지 완료했습니다
<button id="1_1" onmouseover="javascript:$('.cursor').show();">
이렇게하니까 버튼위에서 커서따라다니게 하는건성공했는데.
onmouseout="javascript:$('.cursor').hide();"
를넣는순간 뜨는건지 안뜨는건지 깜빡거리는건지 몇번정도 보일때가 잇는거같고약간 깜빡거린다는 표현이 맞으려나요 거의 안보이지만 간간히 나올때가 있게 됩니다
혹시 소스 지적해줄만한게 있을까요 ? onmouseout="javascript:$('.cursor').hide();" 이게 문제될만한 소스인지 이거만넣으면 기능이 고장나버리네요
$("#1_1, #1_2, #1_3, #1_4").on({
mousemove: (e) => {
$(".cursor").css({
top: e.pageY + "px",
left: e.pageX + "px",
})
},
mouseover: (e) => {
$(".cursor").show();
},
mouseout: (e) => {
$(".cursor").hide();
}
});
스크립트는 인라인으로 작성하기보다는 분리하는 쪽을 권장하는 편입니다. 위와 같이 작성해서 테스트해본 결과 깜빡임은 보이지 않네요. 구조나 마크업의 문제일 가능성이 있으니 영역을 다시 확인해보시면 어떨까 싶습니다.
관리자 모드로 cursor를 확인해보았는데
북서쪽으로 갈떄는 display가 block인데 동남쪽으로 마우스를 이동시 display가 none으로 됩니다.
처음에
<style>
.cursor{
display: none ;
}
이렇게 준게 문젠가 싶어서
<style>
.cursor{
border: 1px solid #ddd
}
</style>
로 바꾸고 해보았습니다
이렇게하게될경우 사이트 로드시에 설명창이 div자리에 보여지는 상태로 있다가 button에 마우스를 가야지 설명창이 생기긴하는데 동남쪽으로 갈때마다 display가 none인건 여전합니다 계속 깜빡임 현상이있는데
element.style {
top: 369px;
left: 658px;
position: absolute;
display: none;
}
.cursor {
border: 1px solid #ddd;
}
css 상에는 전혀 문제가없어보입니다
마우스 가만히 두면 계속 깜빡이고있는데
<button id="1_1"> <br><br><br><br><br><br><br><br><br><br></button>
<div class="cursor">설명을 어쩌구 저쩌구 적는다<br> 이렇게 적다보면 뭔가있어보인다 <br> 확실한가 맞는거같다<br> 근데 왜 박스 나갔는데 설명창이 안사라지니? 버그화난다</div>
코드에도 이상이 없어보입니다
top: e.pageY+20 + "px",
left: e.pageX+20 + "px",
를줘서 해결했습니다
원인이 마우스 동남쪽으로 갈때마다 문제가생기길래 x값과 y값을 한번 떨어트려보니 문제가안되었습니다 마우스가 빨라서 버튼에서 설명창으로 마우스가 올라가면서
mouseout: (e) => {
$(".cursor").hide();
}
이 발생한거 같습니다.
소스끼리 충돌난거같은 그런느낌이네요 설명창만 띄워두니까 문제될거없어서 약간 띄워둘 생각입니다 감사합니다. 덕분에 해결봤습니다 그리고 좋은 소스 많이 배웠습니다
이제 이 버튼 눌러서 버튼 이미지나 css가 바뀌고 주소창 파라미터값이 0에서 1로 바뀌는것을 연구해보겠습니다 채택드릴게용
댓글을 작성하려면 로그인이 필요합니다.
마우스 좌표를 구해서 mousemove마다 top left를 바꿔주는 형태로 만들어주시면 될거같네요
2번같은경우는 세션을 이용하면 될거같네요 그누보드 모바일변수같은거요
답변에 대한 댓글 3개
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인