Javascript로 애니메이션 필기 (JQuery) 를 하는 초보자
9099 단어 JavaScript
상당히 간단하게 자바스크립트 동작을 사용하다.
사실 잘 못하는 자바스크립트는 한번 해 보면 훨씬 간단해진다.(초보자용)
Javascript는 잘 못하지만 할 때 즐거워져요.
나처럼 못하는 사람을 향해
JQuery 읽기
HTML5로 쓸 때와 안 쓸 때 기법이 좀 다르다는 것을 주의해라.
최근에 HTML5로 쓰기로 결정했습니다.아이야, 빨리 처리해.
HTML5 시<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
이외에<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
나는 자주 JQuery를 js 폴더에 넣는데, 이것은 또 어떻게 된 일입니까?
읽는 속도와 차이가 있습니까?
서버에 배치할 때<script src="./js/jquery-1.7.2.min.js"></script>
이쯤에서 의문이 생겼군..
예를 들어 JQuery 버전을 서버에 올리는 것은 어떤 차이가 있습니까?
전혀 몰라요.공부 안 하면
어쨌든 움직이고 싶어요.
아니, 어쨌든 나는 이렇게 생각한다.
뭐, 처음 공부할 때 "어쨌든 움직이고 싶어!"내 생각엔
사이트를 만들 때는 거의 활동이 없었지만.
처음에 숨어서 액션을 하다가 나온 놈이 SEO 쪽에서는 어떻게 될지...
이런 정보가 있어서 어떻게 써야 할지 모르겠어요.
페이지가 표시된 후 이동합니다.
먼저 페이지로 이동하는 순간부터 애니메이션을 시작하는 유형입니다.
나는 또 다른 작법이 있다고 생각한다. 여기는 나의 취향에 따라 쓴 것이다.
● 모바일박스1과 같은 요소.
● 왼쪽에서 50% 거리로 이동한다.
● 5000초 이동.
즉시 이동$(function() {
$('.box1').animate({
'left': '50%'
},5000);
});
CSS의 예입니다.
CSS.box1 {
position: absolute;
top: 20px;
left: 0;
width: 20%;
예를 들어 CSS에서 margin으로 거리를 구분할 때 Javascript를 사용할 때 쓰기 방법을 주의해야 한다.
● MarginLeft의 느낌으로 쓴다.
● Margin-left가 아니다.
Javascript
일단 분해되면
기본적$(function() {
この中に書く。
});
애니메이션$(function() {
$('.box1')//////////////ここで要素を指定
.animate({//////////アニメーションするよ
'left': '50%'//////左から50%の所までいくよ
},5000);///////////////5秒かけていくよ
});
평소에 줄을 잘 바꾸지 않는다.
아, 시간을 지정하면 초가 되기 전에 잊지 말라"며 웃었다.
이런 느낌.$(function() {
$('.box1').animate({'left': '50%'},5000);
});
버튼을 누르면 움직인다.
만약 어떤 버튼식의 물건을 눌렀다면 움직여야 한다.
버튼 자체도div로 둘러싸여 있다.
● 시간을 정하지 않았다.
●div 요소가 id일 때는 #.
누르기만 하면 움직인다$('.botan1').click(function(){
$('#box1').animate({'marginLeft': '500px'});
});
나는 여러 가지 동작을 동시에 하고 싶다.
● 쉼표(,)로 표시를 구분합니다.
● 마지막 지시에는 쉼표가 필요 없다.
동시 이동 $('.box2')
.animate({
'width': '45%',
'right': '-15%',
'top': '-15%'
},5000);
나는 연속으로 운행하고 싶다.
● .애니메이션 동작을 누르다.
연속 이동$('.koumori1')
.animate({ 'right': '15%', 'top': '15%'},1000)
.animate({ 'right': '25%', 'top': '5%'},1000)
.animate({ 'right': '15%', 'top': '15%'},600);
만지면 신나요.
이렇게 멋진 동작을 하는 메뉴가 좋을 것 같아요.
지금까지'JQuery 내비게이션'같은 검색, 나눠주는 물건 같은 것을 사용해 봤기 때문에 마침내 자신이 좋아하는 동작을 할 수 있게 되었다.
좋은 게 있으면 지금까지의 은혜에 보답할 수 있었으면...
Reference
이 문제에 관하여(Javascript로 애니메이션 필기 (JQuery) 를 하는 초보자), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/tabo_purify/items/e25bc05b40e18feec811
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="./js/jquery-1.7.2.min.js"></script>
아니, 어쨌든 나는 이렇게 생각한다.
뭐, 처음 공부할 때 "어쨌든 움직이고 싶어!"내 생각엔
사이트를 만들 때는 거의 활동이 없었지만.
처음에 숨어서 액션을 하다가 나온 놈이 SEO 쪽에서는 어떻게 될지...
이런 정보가 있어서 어떻게 써야 할지 모르겠어요.
페이지가 표시된 후 이동합니다.
먼저 페이지로 이동하는 순간부터 애니메이션을 시작하는 유형입니다.
나는 또 다른 작법이 있다고 생각한다. 여기는 나의 취향에 따라 쓴 것이다.
● 모바일박스1과 같은 요소.
● 왼쪽에서 50% 거리로 이동한다.
● 5000초 이동.
즉시 이동
$(function() {
$('.box1').animate({
'left': '50%'
},5000);
});
CSS의 예입니다.CSS
.box1 {
position: absolute;
top: 20px;
left: 0;
width: 20%;
예를 들어 CSS에서 margin으로 거리를 구분할 때 Javascript를 사용할 때 쓰기 방법을 주의해야 한다.● MarginLeft의 느낌으로 쓴다.
● Margin-left가 아니다.
Javascript
일단 분해되면
기본적
$(function() {
この中に書く。
});
애니메이션$(function() {
$('.box1')//////////////ここで要素を指定
.animate({//////////アニメーションするよ
'left': '50%'//////左から50%の所までいくよ
},5000);///////////////5秒かけていくよ
});
평소에 줄을 잘 바꾸지 않는다.아, 시간을 지정하면 초가 되기 전에 잊지 말라"며 웃었다.
이런 느낌.
$(function() {
$('.box1').animate({'left': '50%'},5000);
});
버튼을 누르면 움직인다.
만약 어떤 버튼식의 물건을 눌렀다면 움직여야 한다.
버튼 자체도div로 둘러싸여 있다.
● 시간을 정하지 않았다.
●div 요소가 id일 때는 #.
누르기만 하면 움직인다$('.botan1').click(function(){
$('#box1').animate({'marginLeft': '500px'});
});
나는 여러 가지 동작을 동시에 하고 싶다.
● 쉼표(,)로 표시를 구분합니다.
● 마지막 지시에는 쉼표가 필요 없다.
동시 이동 $('.box2')
.animate({
'width': '45%',
'right': '-15%',
'top': '-15%'
},5000);
나는 연속으로 운행하고 싶다.
● .애니메이션 동작을 누르다.
연속 이동$('.koumori1')
.animate({ 'right': '15%', 'top': '15%'},1000)
.animate({ 'right': '25%', 'top': '5%'},1000)
.animate({ 'right': '15%', 'top': '15%'},600);
만지면 신나요.
이렇게 멋진 동작을 하는 메뉴가 좋을 것 같아요.
지금까지'JQuery 내비게이션'같은 검색, 나눠주는 물건 같은 것을 사용해 봤기 때문에 마침내 자신이 좋아하는 동작을 할 수 있게 되었다.
좋은 게 있으면 지금까지의 은혜에 보답할 수 있었으면...
Reference
이 문제에 관하여(Javascript로 애니메이션 필기 (JQuery) 를 하는 초보자), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/tabo_purify/items/e25bc05b40e18feec811
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
$('.botan1').click(function(){
$('#box1').animate({'marginLeft': '500px'});
});
$('.box2')
.animate({
'width': '45%',
'right': '-15%',
'top': '-15%'
},5000);
$('.koumori1')
.animate({ 'right': '15%', 'top': '15%'},1000)
.animate({ 'right': '25%', 'top': '5%'},1000)
.animate({ 'right': '15%', 'top': '15%'},600);
Reference
이 문제에 관하여(Javascript로 애니메이션 필기 (JQuery) 를 하는 초보자), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/tabo_purify/items/e25bc05b40e18feec811텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)