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 내비게이션'같은 검색, 나눠주는 물건 같은 것을 사용해 봤기 때문에 마침내 자신이 좋아하는 동작을 할 수 있게 되었다.
좋은 게 있으면 지금까지의 은혜에 보답할 수 있었으면...

좋은 웹페이지 즐겨찾기