목차
애니메이션 만들기
버튼 애니메이션
$(function(){
$('button').eq(0).click(function(e){
// $('div').hide('fast');
// $('div').hide(3000function(e){
// alert('숨김');
// });
$('div').hide({
duration: 3000,
easing: 'linear',
complete: function(){console.log('hidden');},
// step: function(a,b){
// if(b.prop=='width'&&parseInt(a)==parseInt(w/2))
// console.log('50%');
// }
progress: function(a,b,c){
//a:option, b: 0~1의 퍼센트, c: 남은 시간
// console.log(a, b, c);
if(parseInt(b*100)%10==0)
// console.log(100-(b*100));
$('span').width(b*100+"%");
}
});
});
$('button').eq(1).click(function(e){
$('div').show('slow');
});
$('button').eq(2).click(function(){
$('div').toggle(3000);
});
$('button').eq(3).click(function(e){
$('div').fadeTo(3000,0,function(){
$('div').remove();
});
});
});$('div').slideUp();
$('div').slideDown();
$('div').fadeOut();
$('div').slideToggle();css 속성을 이용한 애니메이션
$(function(){
$('div').animate({'margin-left':'500px'},3000); //색 변경은 안됨 (jQuery-color라는 플러그인을 사용하면 됨)
$('div').animate({'margin-top':'500px'},3000);
// $('div').delay(1000);
$('div').animate({'margin-left':'0px'},3000);
// $('div').finish();
$('div').animate({'margin-top':'0px'},3000);
setInterval(function(){
var n=$('div').queue('fx');
$('span').text(n.length);
},100);
$('button').click(function(){
var n=$('div').queue('fx');
for(var i=0; i<n.length+1; i++)
$('div').stop();
// $('div').stop();
// $('div').clearQueue().stop();
});
$('button').click(function(){
$('div').dequeue();
});
});jQuery 플러그인 살펴보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style rel="stylesheet" type="text/css">
*{
margin:0px;
padding:0px;
}
div{
position: relative;
width: 300px;
height: 100px;
overflow: hidden;
}
div>ul{
width: 2700px;
list-style: none;
}
div>ul>li{
float: left;
}
div>ul>li>img{
width: 100px;
height: 100px;
}
</style>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript" src="js/jquery.color.js"></script>
<script type="text/javascript">
$(function(){
$('<li/>').width(100).height(100).prependTo('ul');
// $('a').first().click(function(){
// $('li').last().show(3000,function(){
// $('li').last().show();
// $('li').eq(1).appendTo('ul');
// });
// return false;
// });
$('a').last().click(function(){
$('li').first().hide(3000,function(){
$('li').first().show();
$('li').eq(0).appendTo('ul');
return false;
});
});
// setInterval(function(){
// $('a').eq(1).click();
// },1000);
});
</script>
</head>
<body>
<div>
<ul>
<li><img src="imgs/image01.jpg"/></li>
<li><img src="imgs/image02.jpg"/></li>
<li><img src="imgs/image03.jpg"/></li>
<li><img src="imgs/image04.jpg"/></li>
<li><img src="imgs/image05.jpg"/></li>
<li><img src="imgs/image06.jpg"/></li>
</ul>
</div>
<a href="#">prev</a>
<a href="#">next</a>
</body>
</html>bxSlider
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="css/jquery.bxslider.min.css">
<style rel="stylesheet" type="text/css">
img{
width:100px;
height:100px;
}
</style>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="js/jquery.bxslider.min.js"></script>
<script type="text/javascript">
$(function(){
$('.slider').bxSlider({
minSlides: 3,
maxSlides: 4,
slideWidth: 170,
slideMargin: 10,
adaptiveHeight: true,
auto: true,
autoControls: true,
stopAutoOnClick: true,
pager: true,
slideWidth: 100
});
});
</script>
</head>
<body>
<div class="slider">
<div><img src="imgs/image01.jpg"></div>
<div><img src="imgs/image02.jpg"></div>
<div><img src="imgs/image03.jpg"></div>
<div><img src="imgs/image04.jpg"></div>
<div><img src="imgs/image05.jpg"></div>
<div><img src="imgs/image06.jpg"></div>
</div>
</body>
</html> mode:"horizontal",
speed:3000,
// startSlide:"random",
infiniteLoop:true,
pager:true,
pagerType:"short",
pagerShortSeparator:"-",
nextText:"다음",
prevText:"이전",
nextSelector:$('a').eq(1),
minSlides: 2,
maxSlides: 3,
moveSlides: 3,
slideWidth: 200
//Callbacks
onSliderLoad:function(idx){console.log('loading: ',idx);},
onSliderResize:function(idx){console.log('resize: ',idx);},
onSlideBefore:function(a,b,c){console.log('before: ',a,b,c);},
onSlideAfter:function(a,b,c){console.log('after: ',a,b,c);},
onSlideNext:function(a,b,c){console.log('next: ',a,b,c);},
onSlidePrev:function(a,b,c){console.log('prev: ',a,b,c);},
//Methods
// bx.goToNextSlide(2);
// bx.startAuto(true);
// bx.stopAuto(true);
// bx.getCurrentSlide();
// bx.getSlideCount();
// bx.redrawSlider();
// bx.reloadSlider();
// bx.destroySlider();multi-threading image slider
method 1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style rel="stylesheet" type="text/css">
body>div:first-child{}
.slider{}
.slider>ul{}
.slider>ul>li{}
.slider img{
height:200px;
}
body>div>img{width:600px;}
</style>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="js/jquery.bxslider.min.js"></script>
<script type="text/javascript">
var bx;
$(function(){
bx=$('.slider>ul').bxSlider({
minSlides: 2,
maxSlides: 3,
moveSlides: 1,
slideWidth: 200,
auto:true,
onSlideBefore:function(a,b,c){
var img=$(a[0]).html();
$('body>div').first().html(img);
},
onSliderLoad:function(idx){
var img=$('.slider li').eq(idx+3).html();
$('body>div').first().html(img);
}
});
});
</script>
</head>
<body>
<div></div>
<div class="slider">
<ul>
<li><img src="imgs/image01.jpg"></li>
<li><img src="imgs/image02.jpg"></li>
<li><img src="imgs/image03.jpg"></li>
<li><img src="imgs/image04.jpg"></li>
<li><img src="imgs/image05.jpg"></li>
<li><img src="imgs/image06.jpg"></li>
</ul>
</div>
</body>
</html>method2
//inconstruction
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style rel="stylesheet" type="text/css">
.slider img{
width:200px;
}
</style>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="js/jquery.bxslider.min.js"></script>
<script type="text/javascript">
var copyImg,bx;
$(function(){
// copyImg=$('.slider>ul').clone();
// $('.slider').append(copyImg);
bx=$('.slider>ul').bxSlider({
pagerSelector: $('.slider>div').last(),
});
});
</script>
</head>
<body>
<div class="slider">
<ul>
<li><img src="imgs/image01.jpg"></li>
<li><img src="imgs/image02.jpg"></li>
<li><img src="imgs/image03.jpg"></li>
<li><img src="imgs/image04.jpg"></li>
<li><img src="imgs/image05.jpg"></li>
<li><img src="imgs/image06.jpg"></li>
</ul>
<div>
<div><img src="imgs/image01.jpg"></div>
<div><img src="imgs/image02.jpg"></div>
<div><img src="imgs/image03.jpg"></div>
<div><img src="imgs/image04.jpg"></div>
<div><img src="imgs/image05.jpg"></div>
<div><img src="imgs/image06.jpg"></div>
</div>
</div>
</body>
</html>method3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style rel="stylesheet" type="text/css">
.bx-wrapper:nth-child(1) img{
width:600px;
}
.bx-wrapper:nth-child(2) img{
width:200px;
}
</style>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="js/jquery.bxslider.min.js"></script>
<script type="text/javascript">
var bx1,bx2;
$(function(){
bx1=$('.slider>ul:nth-child(1)').bxSlider({
slideWidth:600,
pager:false,
controls: false,
});
bx2=$('.slider>ul:nth-child(2)').bxSlider({
minSlides: 2,
maxSlides: 3,
moveSlides: 1,
slideWidth: 200,
onSlideBefore:function(a,b,c){
bx1.goToSlide(c);
},
auto:true
});
});
</script>
</head>
<body>
<div class="slider">
<ul id="window">
<li><img src="imgs/image01.jpg"></li>
<li><img src="imgs/image02.jpg"></li>
<li><img src="imgs/image03.jpg"></li>
<li><img src="imgs/image04.jpg"></li>
<li><img src="imgs/image05.jpg"></li>
<li><img src="imgs/image06.jpg"></li>
</ul>
<ul id="ctrl">
<li><img src="imgs/image01.jpg"></li>
<li><img src="imgs/image02.jpg"></li>
<li><img src="imgs/image03.jpg"></li>
<li><img src="imgs/image04.jpg"></li>
<li><img src="imgs/image05.jpg"></li>
<li><img src="imgs/image06.jpg"></li>
</ul>
</div>
</body>
</html>animation을 통한 menu 만들기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style rel="stylesheet" type="text/css">
*{margin:0px;padding:0px;}
.header{margin:10px;background-image: url("imgs/logo.png");background-repeat: no-repeat;text-indent: -999px;}
#menu{
overflow: hidden;
background-color: gray;
height:30px;
}
#menu>ul{list-style: none;width: 400px;margin: 0px auto;}
#menu>ul>li{float: left;width: 20%;margin: 0px 10px;}
#menu>ul>li>a{
display:block;height: 35px;
text-decoration: none;
color:white;text-align: center;line-height: 30px;
}
#menu>ul>li ul{
position:absolute;
list-style: none;
background-color: darkgray;
}
#menu>ul>li li>a{
display:block;
height: 50px;
padding-left:20px;
padding-right:20px;
line-height:40px;
color:beige;
text-align:center;
text-decoration: none;
background-color: darkgray;
}
#content{margin-top: 30px;}
#footer{
text-align: center;
margin-top: 50px;
}
</style>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript" src="js/jquery.color.js"></script>
<script type="text/javascript" src="js/jquery.bxslider.min.js"></script>
<script type="text/javascript">
$(function(){
$('#menu>ul>li li').hide();
$('#menu>ul>li:eq(1),#menu>ul>li:eq(2)')
.hover(function(){
$('#menu>ul>li li').slideDown(300);
})
.mouseleave(function(){
$('#menu>ul>li li').slideUp(300);
});
});
</script>
</head>
<body>
<div>
<div class="header">
<h1>인제대학교</h1>
</div>
<div id="menu">
<ul>
<li><a href="#">home</a></li>
<li><a href="#">intro</a></li>
<li><a href="#">bbs</a>
<ul>
<li><a href="#">add</a></li>
<li><a href="#">detail</a></li>
<li><a href="#">edit</a></li>
<li><a href="#">delete</a></li>
</ul>
</li>
<li><a href="#">login</a></li>
</ul>
</div>
<div id="content">
Pellentesque blandit sollicitudin orci vitae eleifend. Nunc quis ullamcorper purus. Pellentesque eleifend rutrum justo, vel aliquet urna. Phasellus aliquet vel metus fringilla scelerisque. Mauris nibh orci, condimentum nec dui non, viverra rutrum nunc. Integer mattis venenatis nulla et rutrum. Maecenas ultrices ante semper ligula porta, ac pulvinar nisi cursus. Cras quis sagittis elit, eu dignissim lacus. In vitae dui leo. Nulla facilisi. Duis porttitor commodo convallis. Nam semper urna vel leo consectetur eleifend. Mauris volutpat, mauris in vulputate iaculis, metus purus hendrerit arcu, eleifend ultricies enim velit eu ex. Maecenas suscipit auctor leo in sollicitudin.
</div>
<div id="footer">
<p>김해캠퍼스 (50834) 경남 김해시 인제로 197</p>
<p>opyright© 1996-2022 INJE University. All rights reserved.</p>
</div>
</div>
</body>
</html>ajax를 이용한 비동기 통신
xml을 이용한 통신
.xml
<?xml version="1.0" encoding="UTF-8" ?>
<students>
<student num="1" name="user1">
<kor>90</kor>
<eng>90</eng>
<math>90</math>
</student>
<student num="2" name="user2">
<kor>88</kor>
<eng>88</eng>
<math>88</math>
</student>
<student num="3" name="user3">
<kor>79</kor>
<eng>79</eng>
<math>78</math>
</student>
<student num="4" name="user4">
<kor>67</kor>
<eng>68</eng>
<math>68</math>
</student>
</students>.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style rel="stylesheet" type="text/css"></style>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
$.get('stu.xml',function(data,status,xhr){
$('tbody').empty();
console.log(data);
var arr=$(data).find('student');
// console.log(arr);
arr.each(function(idx,ele){
var num=$(ele).attr('num');
var name=$(ele).attr('name');
var kor=$(ele).find('kor').html();
var eng=$(ele).find('eng').html();
var math=$(ele).find('math').html();
// console.log(num,name,kor,eng,math);
$('<tr/>')
.append('<td>'+num+'</td>')
.append('<td>'+name+'</td>')
.append('<td>'+kor+'</td>')
.append('<td>'+eng+'</td>')
.append('<td>'+math+'</td>')
.appendTo('tbody');
});
});
});
</script>
</head>
<body>
<h1>ajax통신(xml)</h1>
<table>
<thead>
<th>학번</th>
<th>이름</th>
<th>국어</th>
<th>영어</th>
<th>수학</th>
</thead>
<tbody></tbody>
</table>
</body>
</html>JSON을 이용한 통신
.json
{"students":[
{"num":1,"name":"user1","kor":90,"eng":80,"math":78},
{"num":2,"name":"user2","kor":80,"eng":88,"math":98},
{"num":3,"name":"user3","kor":70,"eng":78,"math":48},
{"num":4,"name":"user4","kor":60,"eng":65,"math":78},
{"num":5,"name":"user5","kor":50,"eng":88,"math":88}
]}.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style rel="stylesheet" type="text/css"></style>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
$.get('stu.json',function(data){
// console.log(data);
data.students.forEach(function(ele,idx){
// console.log(ele);
$('<tr/>')
.append($('<td>').text(ele.num))
.append($('<td>').text(ele.name))
.append($('<td>').text(ele.kor))
.append($('<td>').text(ele.eng))
.append($('<td>').text(ele.math))
.appendTo('tbody');
});
});
});
</script>
</head>
<body>
<h1>ajax통신 (json)</h1>
<table>
<thead>
<th>학번</th>
<th>이름</th>
<th>국어</th>
<th>영어</th>
<th>수학</th>
</thead>
<tbody></tbody>
</table>
</body>
</html>json으로 파일 받아내기
$(function(){
$.get('stu.json',function(data){
// console.log(data);
JSON.parse(data).students.forEach(function(ele,idx){
...
});
},'text');
}); $(function(){
$.getJSON('stu.json',function(data){
// console.log(data);
data.students.forEach(function(ele,idx){
...
});
});
});=> JSON이 아닐시 불러오지 않는다.
ajax를 이용한 통신
xml
$.ajax({
type:'get',
url:'stu.xml',
dataType:'xml',
success:function(data){
console.log(typeof data,data);
},
error:function(xhr,status,error){
console.log(xhr,status,error);
}
});json
$.ajax({
type:'get',
url:'stu.json',
dataType:'json',
success:function(data){
console.log(typeof data,data);
},
error:function(xhr,status,error){
console.log(xhr,status,error);
}
});통신
$('form').submit(function(e){
// var id=$(e.target.id).value();
// var pw=$(e.target.pw).value();
// console.log($(e.target).serialize()); //query string을 만들어준다.
console.log($.param({key1:'val2',key2:'val2'}));
$.ajax({
type:'get',
url:'stu.json',
data:$(e.target).serialize(),
dataType:'json',
success:function(data){
console.log(typeof data,data);
data.students.forEach(function(ele,idx){
// console.log(ele);
$('<tr/>')
.append($('<td>').text(ele.num))
.append($('<td>').text(ele.name))
.append($('<td>').text(ele.kor))
.append($('<td>').text(ele.eng))
.append($('<td>').text(ele.math))
.appendTo('tbody');
});
},
error:function(xhr,status,error){
console.log(xhr,status,error);
}
});
return false;
});
});
</script>
</head>
<body>
<h1>ajax통신 (json-ajax)</h1>
<form action="#">
<div><label>id</label><input type="text" name="id"></div>
<div><label>pw</label><input type="password" name="pw"></div>
<div><button>전송</button></div>
</form>ajax를 통한 싱글 페이지 어플리케이션
asd'100일 챌린지 > 빅데이터기반 인공지능 융합 서비스 개발자' 카테고리의 다른 글
| Day 33 - Mysql 사용하기, vagrant로 배포하기 (0) | 2024.09.06 |
|---|---|
| Day 31 - servlet을 이용한 싱글 페이지 어플리케이션 (1) | 2024.09.04 |
| Day 26 - js 속성 이어서, js로 브라우저 제어하기 (0) | 2024.08.28 |
| Day 25 - css 애니메이션, js의 속성들 (0) | 2024.08.27 |
| Day 24 - html5, css (0) | 2024.08.26 |