반응형
jQuery에서 마우스 휠을 움직였는지 안움직였는지 확인 할 수 있다.
우선
https://github.com/jquery/jquery-mousewheel
jquery/jquery-mousewheel
A jQuery plugin that adds cross-browser mouse wheel support. - jquery/jquery-mousewheel
github.com
에서 js파일을 다운받아야한다.
[html]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="author" content="2020-05-26">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>문법-32</title>
<link rel="stylesheet" href="./css/style32.css">
<script type="text/javascript" src="./js/jquery-2.1.1.min.js"></script><!--순서중요 꼭 맨위에 위치-->
<script type="text/javascript" src="./js/jquery-ui.min.js"></script><!--옵션이긴 하지만 있으면 좋은거-->
<script type="text/javascript" src="./js/jquery.easing.1.3.js"></script><!--옵션이긴 하지만 있으면 좋은거-->
<script type="text/javascript" src="./js/prefixfree.min.js"></script><!--요즘브라우저는 오류내서 굳이 안넣도됨-->
<script type="text/javascript" src="./js/jquery.mousewheel.min.js"></script><!--이번파일에 추가-->
<script type="text/javascript" src="./js/custom32.js"></script>
</head>
<body>
<div>
<p></p>
</div>
</body>
</html>[css]
@charset "utf-8";
/*reset*/
*{margin:0; padding: 0;}
ol, ul{list-style:none;}
a{outline:0;text-decoration: none;color:#555;}
img{border:0;}
body{font:12px/1.6 arial; color:#555;}
div{
width: 600px; height: 400px;
background-color: #888;
margin: 50px auto;
}
p{
font-size: 40px; color: #fff;;
}[js]
$(document).ready(function(){
$("div").on("mousewheel",function(event,delta){
if(delta>0){
$(this).css({"background":"red"});
$("p").text("마우스 휠을 올렸습니다.");
}else if(delta<0){
$(this).css({"background":"blue"});
$("p").text("마우스 휠을 내렸습니다.");
}
});
});[결과화면]
반응형
'web > jQuary' 카테고리의 다른 글
| [jQuery]디지털 시계 만들기(시작/종료버튼) (0) | 2020.05.26 |
|---|---|
| [jQuery]요소 추가하기:.appendTo() (0) | 2020.05.26 |
| [jQuery]동영상 태그 제어-.load(), .play(), pause() (0) | 2020.05.26 |
| [jQuery]x축,y축 위치 알아내기-.offset().top과 .offset().left (0) | 2020.05.26 |
| .scrollTop() (0) | 2020.05.25 |
댓글