학원/JavaScript_JQuery
21-12-10 jQuery effect, 롤링배너, 플러그인
링규
2021. 12. 10. 15:47
Effect
show(), hide()
.show() : 화면에 표시하는 함수
.hide() : 화면에 보이지 않게 감추는 함수
-> display 속성을 조절해 다른 태그를 밀어내며 표시되고, 빈공간 없이 제거된다.
show나 hide와 함께 다른 동작을 추가하고싶다면 .show(function(){ }) : { }안에 동작을 추가한다. (hide도 똑같이 사용가능) 단, 익명함수를 넣으면 동작시간이 지연된다
동작 지연 시간 지정 : .show(밀리초) , .show(밀리초, function(){ }) (hide도 똑같이 적용)
※제이쿼리에서 if문, 조건문 사용 예시
$(function(){
$('button').click(function(){
let i = $(this).index();
if(i==0){
//클릭된 인덱스가 0이라면 실행
}
$('button:eq(0)'.click)(function() {
//0번 버튼이 클릭될 떄 실행
})
})
})
예제
<style type="text/css">
span {
font-size: 180%;
font-weight: bold;
display: none;
}
</style>
<script src="script/jquery-3.6.0.js"></script>
<script type="text/javascript">
$(function(){
$('button').click(function(){
let i = $(this).index();
$('button:eq(0)').click(function() {
$('span:first').css('background', 'yellow') ;
$('span:first').show() ;
})
$('button:eq(1)').click(function() {
$('span:first').hide();
})
$('button:eq(2)').click(function() {
$('span:last').show(2000, function(){
$(this).css('background','pink')
})
})
$('button:eq(3)').click(function() {
$('span:last').hide(2000);
})
})
})
</script>
</head>
<body>
<button>Show</button>
<button>Hide</button>
<span>안녕하세요</span>
<br>
<button>Show slow</button>
<button>Hide slow</button>
<span>반갑습니다</span>
</body>
.toggle()
: 한 번 누를 때 마다 기능을 전환해줌
마찬가지로 toggle(밀리초), toggle(function(){}), toggle(밀리초, function(){}) 사용 가능
<style type="text/css">
span {
font-size: 180%;
font-weight: bold;
display: none;
}
</style>
<script src="script/jquery-3.6.0.js"></script>
<script type="text/javascript">
$(function() {
$('button:eq(0)').click(function(){
$('span:first').toggle(1000, function(){
$(this).css('background','pink')
});
})
$('button:eq(1)').click(function(){
$('span:last').toggle(1000, function(){
$(this).css('background','yellow')
});
})
})
</script>
<body>
<button>Show / Hide</button>
<span>안녕하세요</span>
<br>
<button>Show / Hide</button>
<span>반갑습니다</span>
</body>
slideUp(), slideDown(), slideToggle()
사용법 상동
<style type="text/css">
div {
background: #3d9a44;
margin: 3px;
width: 80px;
height: 100px;
float: left;
}
</style>
<script src="script/jquery-3.6.0.js"></script>
<script type="text/javascript">
$(function() {
$('#slideUp').click(function(){
$('div').slideUp(1000, function(){
$(this).css('background','blue')
})
})
$('#slideDown').click(function(){
$('div').slideDown(1000, function(){
$(this).css('background','red')
})
})
$('#slideToggle').click(function(){
$('div').slideToggle(1000)
})
})
</script>
<body>
<button id="slideUp">slide up</button>
<button id="slideDown">slide down</button>
<button id="slideToggle">slide toggle</button>
<br/><br/><br/>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
fadeIn(), fadeOut(), fadeToggle()
사용법 상동
<style type="text/css">
span{
color: red;
cursor: pointer;
}
div {
margin: 3px;
width: 100px;
height: 100px;
float: left;
display: none;
}
#red{
background: #ff0000;
}
#green{
background: #00ff00;
}
#blue{
background: #0000ff;
}
</style>
<script src="script/jquery-3.6.0.js"></script>
<script type="text/javascript">
$(function() {
$('#fin').click(function(){
$('div').fadeIn(1000);
})
$('#fout').click(function(){
$('div').fadeOut(1000);
})
$('#fToggle').click(function(){
$('div').fadeToggle(1000);
})
})
</script>
<body>
<span id="fin"> 페이드 인 </span>
<span id="fout"> 페이드 아웃 </span>
<span id="fToggle"> 페이드 토글 </span>
<br/><br/><br/>
<div id="red"></div>
<div id="green"></div>
<div id="blue"></div>
</body>
예제1
<style type="text/css">
p{
position: relative;
width: 390px;
height: 90px;
}
div{
position: absolute;
width: 400px;
height: 65px;
font-size: 36px;
text-align: center;
color: yellow;
background: red;
padding-top: 25px;
top: 0;
left: 0;
display: none;
}
span{
margin: 0 auto;
display: none;
}
</style>
<script src="script/jquery-3.6.0.js"></script>
<script type="text/javascript">
$(function() {
$('#fadeIn').click(function(){
$('div').fadeIn(1000);
$('span').fadeIn(1000);
//div가 fadein 된다고 그의 자식인 span까지 같이 적용되지 않음
//span도 따로 이펙트를 지정해줘야함
})
$('#fadeOut').click(function(){
$('div').fadeOut(1000, function(){
$('span').fadeOut(1000);
});
//function을 이용해 span에 이펙트를 지정할 수 있다
//단 이 경우 div에 이펙트가 먼저 나타난 후 span에 이펙트가 나타나기때문에
//동시에 이펙트가 나타나기를 원한다면 fadein의 방법처럼 따로따로 써줘야
})
$('#fadeToggle').click(function(){
$('div').fadeToggle(1000, function(){
$('span').fadeToggle(1000);
});
})
})
</script>
<body>
<p>불투명도를 점점 높여 보이도록 한다. speed를 fast, nomal, slow 또는 0 이상의 숫자(밀리세컨드 단위)를 준다
애니메이션이 끝난 후에 실행할 함수를 지정한다.
</p>
<div><span>SUCCESS!</span></div>
<button id="fadeIn">fadeIn</button>
<button id="fadeOut">fadeOut</button>
<button id="fadeToggle">fadeToggle</button>
</body>
예제2
인덱스 폴더 형식 구현
<style type="text/css">
#tabs{
position: relative;
margin: 100 auto;
width: 1080px;
height: 40px;
text-align: center;
margin-bottom: 0px;
}
ul{
list-style: none;
padding: 0;
margin: 0;
display: inline-block;
}
ul li{
width: 180px;
height: 40px;
float: left;
border-radius: 5px 5px 0 0;
line-height: 40px;
text-align: center;
font-size: 120%;
cursor: default;
}
#content{
position: relative;
margin: 0;
width: 1080px;
height: 440px;
}
.contents{
position: absolute;
width: 1080px;
height: 440px;
left: 0px;
top: 0px;
line-height: 440px;
text-align: center;
font-size: 120%;
}
#content1{background: #ebaa55;}
#content2{background: #55ebd1; display: none;}
#content3{background: #4fbde3; display: none;}
#content4{background: #6ebe6d; display: none;}
#content5{background: #95a096; display: none;}
#content6{background: #ed8d2a; display: none;}
</style>
<script src="script/jquery-3.6.0.js"></script>
<script type="text/javascript">
$(function(){
for(let i=0; i<6; i++){
let color = $('.contents:eq('+i+')').css('background-color');
$('li:eq('+ i +')').css('background', color);
}
})
$(function(){
$('li').click(function(){
let num = $(this).index()
for(let i=0; i<6; i++){
if(num == i) $('.contents:eq('+ i +')').show();
else $('.contents:eq('+ i +')').hide();
}
})
})
</script>
<body>
<div id="tabs">
<ul>
<li>Menu A</li>
<li>Menu B</li>
<li>Menu C</li>
<li>Menu D</li>
<li>Menu E</li>
<li>Menu F</li>
</ul>
</div>
<div id="content">
<div class="contents" id="content1">ConTent A</div>
<div class="contents" id="content2">ConTent B</div>
<div class="contents" id="content3">ConTent C</div>
<div class="contents" id="content4">ConTent D</div>
<div class="contents" id="content5">ConTent E</div>
<div class="contents" id="content6">ConTent F</div>
</div>
</body>
예제3
사이드 메뉴 구현
- 메뉴에 마우스가 올라가면 해당메뉴의 opacity = 1, 나머지는 0.3이 되도록 구현
※ 앵커 태그의 파란글씨, 밑줄 없애는 css : text-decoration: none;
<style type="text/css">
body{
background: royalblue;
}
a{
text-decoration: none;
display: block;
font-size: 40px;
margin: 5px 0;
color: white;
transition: 0.5s;
}
.gnb{
position: absolute;
top: 100px;
left: 50px;
}
</style>
<script src="script/jquery-3.6.0.js"></script>
<script type="text/javascript">
$(function(){
$('a').mouseenter(function(){
let num = $(this).index()
$('a').css('opacity','0.3');
$('a').eq(num).css('opacity','1');
})
$('a').mouseleave(function(){
$('a').css("opacity","1");
})
})
</script>
<body>
<div class="gnb">
<a href='#none'>New Arrivals</a>
<a href='#none'>Summer Collection</a>
<a href='#none'>Winter Collection</a>
<a href='#none'>Special Offers</a>
<a href='#none'>Trends</a>
</div>
</body>
예제4
마우스가 올라가면 이미지가 변경되고, 마우스가 내려가면 다시 원래 이미지로 돌아오는 화면 구현
<script src="script/jquery-3.6.0.js"></script>
<script type="text/javascript">
$(function(){
$('img:first').hover(
function(){
$(this).attr({src:"images/3.jpg"})
},
function(){
$(this).attr({src:"images/1.jpg"})
}
)
$('img:last').hover(
function(){
$(this).attr({src:"images/4.jpg"})
},
function(){
$(this).attr({src:"images/2.jpg"})
}
)
})
</script>
<body>
<img src = "images/1.jpg">
<img src = "images/2.jpg">
</body>
※ .hover(function(){}, function(){}) : 첫번째 function은 마우스가 올라갔을 때, 두번째 function은 마우스가 떠났을 때 실행되는 함수
※ $(this).attr('src', 'images/4.jpg') => src만 변경한다면 이와 같이 작성도 가능
$(this).attr({src:"images/4.jpg", width:"200px"}) 처럼 여러가지 변경 추가 가능
예제5
그림을 클릭하면 숫자를 promt로 입력받아서 입력받은 숫자.jpg로 이미지 변경
<script src="script/jquery-3.6.0.js"></script>
<script type="text/javascript">
$(function(){
$('img').click(function(){
let number = prompt('숫자를 입력하세요', '1~10');
if(number == "") number = "1"; //입력 되지 않은 경우 1로 설정
$('img').attr('src', 'images/'+ number+'.jpg');
})
})
</script>
예제6
클릭하면 다음 사진이 나오게 구현
<script type="text/javascript">
let number = 1;
$(function(){
$('img').click(function(){
number++;
$('img').attr('src','images/'+ number +'.jpg');
if(number==10) number=0;
})
})
</script>
예제7
1초마다 이미지가 자동으로 변경되게 구현 + 마우스를 올리면 멈추고 빠져 나가면 다시 시작
<script type="text/javascript">
$(function(){
let number = 2;
let timer;
$('img').hover(
function(){
window.clearInterval(timer);
},
function(){ //마우스가 영역 내에 없을 때
timer = setInterval(function(){
$('img').attr('src','images/'+ number +'.jpg');
number++;
if(number==11) number=1;
}, 1000);
}
)
$('img').trigger('mouseleave');
})
</script>
페이지를 처음 로드했을 때부터 이벤트가 실행되게 하려면 trigger() 사용
제이쿼리의 이동 명령
.animate({이동방향:거리}, 밀리초)
: transition-duration을 한 번에 설정할 수 있다.
<style type="text/css">
div{
position: relative;
width: 50px;
height: 50px;
margin: 3px;
background: orange;
}
</style>
<script src="script/jquery-3.6.0.js"></script>
<script type="text/javascript">
$(function(){
$('div').hover(
function(){$(this).animate({left:500}, 1000)},
function(){$(this).animate({left:0}, 1000)}
)
})
</script>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
jQuery를 이용한 롤링 배너
1. 자동으로 1초마다 움직이는 롤링 배너 + 마우스를 올리면 멈추기
<style type="text/css">
#view{position:relative; width:170px; height:255px; border:3px solid blue; left:50px; overflow: hidden; }
#imgs{position:absolute; width:1700px; height:255px; left:0; top:0px; border:1px dashed red; }
</style>
<script src="script/jquery-3.6.0.js"></script>
<script type="text/javascript">
$(function(){
var num=1;
var timer;
$('#view').hover(
function(){
window.clearInterval(timer);
},
function(){
timer = setInterval(function(){
$('#imgs').animate({ left : num * -170 },1000);
num++;
if(num==10)num=0;
}, 1500);
}
);
$('#view').trigger('mouseleave');
});
</script>
</head>
<body>
<div id="view">
<div id="imgs" >
<img src="images/1.jpg"><img src="images/2.jpg"><img src="images/3.jpg"><img src="images/4.jpg"><img src="images/5.jpg"><img src="images/6.jpg"><img src="images/7.jpg"><img src="images/8.jpg"><img src="images/9.jpg"><img src="images/10.jpg">
</div>
</div>
</body>
2. 리모컨을 클릭하면 해당번째 사진을 보여주는 롤링 배너
<style type="text/css">
#view{
position: relative;
width: 600px;
height: 400px;
margin: 0 auto;
border: 1px dashed black;
overflow: hidden;
}
#imgs{
position: absolute;
width: 4800px;
height: 400px;
left: 0;
top: 0;
border: 1px dashed red;
}
#remote{
position: relative;
width: 200px;
height: 50px;
border: 1px dashed white;
margin: 0 auto;
top: 350px;
text-align: center;
}
ul{
list-style: none;
padding: 0;
margin: 0;
display: inline-block;
}
ul li {
float: left;
width: 14px;
height: 14px;
background: white;
border-radius: 50%;
margin: 18px 4px;
}
img{
width: 600px;
height: 400px;
}
</style>
<script src="script/jquery-3.6.0.js"></script>
<script type="text/javascript">
$(function () {
$('li').click(function(){
let num = $(this).index();
let dist = -600*num;
$('li').css('background', 'white');
$(this).css('background','red');
$("#imgs").animate({left:dist}, 300);
})
})
</script>
</head>
<body>
<div id="view">
<div id="imgs">
<img src="images/Desert.jpg"><img src="images/Chrysanthemum.jpg"><img src="
images/Hydrangeas.jpg"><img src="images/Jellyfish.jpg"><img src="
images/Lighthouse.jpg"><img src="images/Penguins.jpg"><img src="
images/Tulips.jpg"><img src="images/lamp.jpg">
</div>
<div id="remote">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</body>
제이쿼리 플러그인 사용법
1. 사용할 플러그인(.js파일)을 다운로드 후 사용할 폴더에 붙여넣기 한다
2. jQuery 스크립트 추가할 때처럼 스크립트를 추가해준다.
<script src="플러그인경로/플러그인이름.js"></script>
3. 플러그인 사용방법을 참고하여 코드를 작성한다
* 플러그인 사용방법은 플러그인 내부 주석, 코드를 참고