<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" type="text/css" />
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
<h1>JQuery UI</h1>
<h2>Slider</h2>
<img src="p1.jpg">
<img src="p2.jpg">
<img src="p3.jpg">
<p>
Slider의 키를 좌우로 이동 시키면 이미지의 투명도를 조정할 수 있습니다
</p>
<div id="slider1" style="width: 250px"></div>
<br>
<p id="opa"></p>
<script type="text/javascript">
$(function () {
$("#slider1").slider({
animate:true,
range:"min",
value:100,
slide:function(event, ui){
console.log("move");
$("img").css("opacity", ui.value/100 );
$("#opa").text(ui.value);
}
});
});
</script>
</body>
</html>
'JQuery > JQuery 기본' 카테고리의 다른 글
| [JQuery] 우편번호 사용 사이트 및 코드 (0) | 2018.08.08 |
|---|---|
| [JQuery] 달력만들기 (0) | 2018.08.08 |
| [JQuery] 기본태그 정리 (0) | 2018.08.07 |
| [JQuery] 사진 윗쪽 뒤쪽 글추가 및 div <p>테그 삭제하기. (0) | 2018.08.07 |
| [JQuery] 버튼누르면 태그,배경색,메세지띄우기 (0) | 2018.08.07 |