day11 Modifying Effect Speeds †

http://tutsplus.com/lesson/modifying-effect-speeds/

↑

day12 Creating Custom Effect Methods †

http://tutsplus.com/lesson/creating-custom-effect-methods/

[source] [reload]

↑

day13 Full Control With animate †

http://tutsplus.com/lesson/full-control-with-animate/

[source] [reload]

<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8>
    <title>Lesson13</title>
    <style type="text/css">
/* ==================== STYLES ==================== */
.box {
  top: 30px;
  left: 0px;
  width: 200px;
  position: absolute;
  background: lightgray;
}
/* ==================== STYLES ==================== */
    </style>
    <script type="text/javascript"
    src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>    
    <script type="text/javascript">
/* ==================== SCRIPTS ==================== */
$(document).ready(function(){
  var box = $('div.box');

  box.on('mouseover', function(){
    box
      .animate({
        top: "+=50",
        left: "+=50",
        width : "-=50",
        height : "-=50",
      }, 500)
      .animate({
        width : "+=50",
        height : "+=50",
        queue : false
      }, 500);
  });

  box.on('mouseout', function(){
    box
      .animate({
        top: 30,
        left: 0,
      }, 1000, 'swing');
  });
});
/* ==================== SCRIPTS ==================== */
    </script>
  </head>
<body>
  ↓ Point Here !
  <div class="box">
    【箱】物を入れるための器。木、紙、皮革、金属、
    プラスチックなどで作り、身とふたとに分かれる。
    [英] a box； a case
  </div>
</body>
</html>
↑

day14 Homework Solutions †

http://tutsplus.com/lesson/jquery-animate-homework-solutions/

[source] [reload]

<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8>
    <title>Lesson14</title>
    <style type="text/css">
/* ==================== STYLES ==================== */
.box {
  top: 30px;
  left: 0px;
  width: 200px;
  position: absolute;
  background: lightgray;
}
/* ==================== STYLES ==================== */
    </style>
    <script type="text/javascript"
    src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>    
    <script type="text/javascript">
/* ==================== SCRIPTS ==================== */
$(document).ready(function(){
  var box = $('div.box');

  $.fn.looperMove = function(speed, fn) {
    return $(this)
      .animate({
        top: "+=50",
        left: "+=50",
        width : "-=50",
        height : "-=50",
        opacity : "toggle"
      }, speed || 500)
      .animate({
        width : "+=50",
        height : "+=50",
        opacity : "toggle"
      }, speed || 500, function(){
        $.isFunction(fn) && fn.call(this)
      });
  }

  box.on('mouseover', function(){
    box.looperMove(1000, function(){
      // console.log('looperMove ended')
    });
  });

  box.on('mouseout', function(){
    box
      .animate({
        top: 30,
        left: 0,
      }, 1000, 'swing');
  });
});
/* ==================== SCRIPTS ==================== */
    </script>
  </head>
<body>
  ↓ Point Here !
  <div class="box">
    【箱】物を入れるための器。木、紙、皮革、金属、
    プラスチックなどで作り、身とふたとに分かれる。
    [英] a box； a case
  </div>
</body>
</html>
↑

day15 The Obligatory Slider (First Stab) †

http://tutsplus.com/lesson/the-obligatory-slider/

[source] [reload]

<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8>
    <title>Lesson15</title>
    <style type="text/css">
/* ==================== STYLES ==================== */
* {
  margin: 0;
  padding: 0;  
}

.slider {
  width: inherit;
  height: 230px;
  overflow: scroll;
}

.slider ul {
  /*
  Javascript 無効時には、横に並べて表示する。
  $(document).ready() で幅を画像一枚分にし、はみ出た部分を表示しないようにする
  */
  width: 10000px;
  list-style: none;
}

.slider li {
  float: left; /* 左に回り込み指定 */
}

#slider-nav { 
  /*
  表示無効
  Javascript 無効時には、ボタンを表示しない。
  $(document).ready() で block (表示) に変更する
  */
  display: none;
  margin-left: 1em;
}

#slider-nav button {
  padding: 1em;
  margin-right: 1em;
  border-radius: 10px;
  cursor: pointer;
}
/* ==================== STYLES ==================== */
    </style>
    <script type="text/javascript"
    src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>    
    <script type="text/javascript">
/* ==================== SCRIPTS ==================== */
$(document).ready(function(){
  // $(document).ready() 時点の image
  //
  //         読み込み          onloadイベント
  // --------------------------------------
  // IE      済   (width > 0)  発生しない
  // Firefox 途中 (width > 0)  発生する
  // Safari  未   (width = 0)  発生する
  // Chrome  未   (width = 0)  発生する
  //
  $(window).on('load', initialize);  
});

function initialize() {
  var sliderArea = $('div.slider');
  var ul = sliderArea.children('ul');
  var li = ul.find('li');
  var img = ul.find('img');  
  var width = img[0].width;
  var totalWidth = width * img.length;

  sliderArea.css({
    'width' : width,
    'overflow' : 'hidden'
  });

  // 右に水星、左に冥王星をもう一つ追加
  // 右端の水星にスライド終了後、アニメーションなしで左の水星に移動
  // 左端の冥王星にスライド終了後、アニメーションなしで右の冥王星に移動
  ul.append($.clone(li[0]));
  ul.prepend($.clone(li[li.length - 1]));
  ul.css({
    "margin-left" : -1 * width
  })

  var buttonArea = $('#slider-nav');
  var buttons = buttonArea.children('button');
  buttonArea.show();
  buttons.on('click', function(){
    var $this = $(this);
    var direction = $this.data('dir');

    if (direction == 'next') {
      ul.animate({
        "margin-left" : "-=" + width
      }, function(){
        // 右端の水星(Javascript で足したもの)に来たら、左端へ
        if ( -1 * totalWidth > parseInt(ul.css('margin-left'))) {
          ul.css('margin-left', -1 * width);
        }
      });
    } else {
      ul.animate({
        "margin-left" : "+=" + width
      }, function(){
        // 左端の冥王星(Javascript で足したもの)に来たら、右端へ
        if (0 == parseInt(ul.css('margin-left'))) {
          ul.css('margin-left', -1 * totalWidth);
        }        
      });
    }
  });
}
/* ==================== SCRIPTS ==================== */
    </script>
  </head>
<body>
<div class="slider">
  <ul>
    <li><img src="mercury.png" alt="mercury"/></li>
    <li><img src="venus.png" alt="venus"/></li>
    <li><img src="earth.png" alt="earth"/></li>
    <li><img src="mars.png" alt="mars"/></li>
    <li><img src="jupiter.png" alt="jupiter"/></li>
    <li><img src="saturn.png" alt="saturn"/></li>
    <li><img src="uranus.png" alt="uranus"/></li>
    <li><img src="neptune.png" alt="neptune"/></li>
    <li><img src="pluto.png" alt="pluto"/></li>    
  </ul>
</div>
<div id="slider-nav">
  <button data-dir="prev">Previous</button>
  <button data-dir="next">Next</button>
</div>
</body>
</html>
↑

day16 Prototypal Inheritance and Refactoring the Slider †

http://tutsplus.com/lesson/prototypal-inheritance-and-refactoring-the-slider/

[source] [reload]

<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8>
    <title>Lesson16</title>
    <style type="text/css">
/* ==================== STYLES ==================== */
* {
  margin: 0;
  padding: 0;  
}

.slider {
  width: inherit;
  height: 230px;
  overflow: scroll;
}

.slider ul {
  /*
  Javascript 無効時には、横に並べて表示する。
  $(document).ready() で幅を画像一枚分にし、はみ出た部分を表示しないようにする
  */
  width: 10000px;
  list-style: none;
}

.slider li {
  float: left; /* 左に回り込み指定 */
}

#slider-nav { 
  /*
  表示無効
  Javascript 無効時には、ボタンを表示しない。
  $(document).ready() で block (表示) に変更する
  */
  display: none;
  margin-left: 1em;
}

#slider-nav button {
  padding: 1em;
  margin-right: 1em;
  border-radius: 10px;
  cursor: pointer;
}
/* ==================== STYLES ==================== */
    </style>
    <script type="text/javascript"
    src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>    
    <script type="text/javascript">
/* ==================== SCRIPTS ==================== */

/* ▽▽▽ここからプロジェクトのライブラリ (mylib.js などにする)▽▽▽ */
function Slider(container) {
  this.container = container;

  $(window).on('load', $.proxy(this.initialize, this));  
}

Slider.prototype.initialize = function() {
  var ul = this.container.children('ul');
  var li = ul.find('li');
  var img = ul.find('img');

  var width = img[0].width;
  var totalWidth = width * img.length;

  this.container.css({
    'width' : width,
    'overflow' : 'hidden'
  });

  // 右に火星、左に冥王星をもう一つ追加
  // 右端の火星にスライド終了後、アニメーションなしで左の火星に移動
  // 左端の冥王星にスライド終了後、アニメーションなしで右の冥王星に移動
  ul.append($.clone(li[0]));
  ul.prepend($.clone(li[li.length - 1]));
  ul.css({
    "margin-left" : -1 * width
  })

  this.ul = ul;
  this.width = width;
  this.totalWidth = totalWidth;
}

Slider.prototype.next = function() {
  this.ul.animate({
    "margin-left" : "-=" + this.width
  }, $.proxy(function(){
    // 右端の火星(Javascript で足したもの)に来たら、左端へ
    if ( -1 * this.totalWidth > parseInt(this.ul.css('margin-left'))) {
      this.ul.css('margin-left', -1 * this.width);
    }
  }, this));
}

Slider.prototype.prev = function() {
  this.ul.animate({
    "margin-left" : "+=" + this.width
  }, $.proxy(function(){
    // 左端の冥王星(Javascript で足したもの)に来たら、右端へ
    if (0 == parseInt(this.ul.css('margin-left'))) {
      this.ul.css('margin-left', -1 * this.totalWidth);
    }
  }, this));
}
/* △△△ここまでプロジェクトのライブラリ (mylib.js などにする)△△△ */

$(document).ready(function(){
  var slider = new Slider($('div.slider'));

  var buttonArea = $('#slider-nav');
  var buttons = buttonArea.children('button');
  buttonArea.show();
  buttons.on('click', function(){
    var $this = $(this);
    var direction = $this.data('dir');
    if (direction == 'next') {
      slider.next();
    } else {
      slider.prev();
    }
  });
});
/* ==================== SCRIPTS ==================== */
    </script>
  </head>
<body>
<div class="slider">
  <ul>
    <li><img src="mercury.png" alt="mercury"/></li>
    <li><img src="venus.png" alt="venus"/></li>
    <li><img src="earth.png" alt="earth"/></li>
    <li><img src="mars.png" alt="mars"/></li>
    <li><img src="jupiter.png" alt="jupiter"/></li>
    <li><img src="saturn.png" alt="saturn"/></li>
    <li><img src="uranus.png" alt="uranus"/></li>
    <li><img src="neptune.png" alt="neptune"/></li>
    <li><img src="pluto.png" alt="pluto"/></li>    
  </ul>
</div>
<div id="slider-nav">
  <button data-dir="prev">Previous</button>
  <button data-dir="next">Next</button>
</div>
</body>
</html>
↑

day17 Your Questions Answered †

http://tutsplus.com/lesson/your-questions-answered/

↑

day18 Quiz #2 – Effects †

http://tutsplus.com/lesson/jquery-30-days-quiz-2/

quiz2.png
↑

day19 $.each and Templating †

http://tutsplus.com/lesson/each-and-templating/

[source] [reload]

<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8>
    <title>Lesson19</title>
    <style type="text/css">
/* ==================== STYLES ==================== */
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

div {
  float: left;
  border: solid 1px;
  border-color: darkred;
  margin: 1px;
}
/* ==================== STYLES ==================== */
    </style>
    <script id="planetTemplate" type="text/template">
<!-- ==================== TEMPLATE ==================== -->
<div>
  <img src="%%planet%%.png" alt="%%planet%%"/>
  <ul>
    <li>直径 : %%diameter%% km</li>
    <li>公転距離 : %%dist%% AU</li>
    <li>自転周期 : %%rotation%%</li>
    <li>公転周期 : %%revolution%%</li>
    <li>光度 : %%luminous%% 等星</li>
  </ul>
</div>
<!-- ==================== TEMPLATE ==================== -->
    </script>
    <script type="text/javascript"
    src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>    
    <script type="text/javascript">
/* ==================== SCRIPTS ==================== */
var planets = [
  { 
    planet : 'mercury',
    diameter : '4878',
    dist : '0.387',
    rotation : '58.65日',
    revolution : '87.97日',
    luminous : '-2.4'
  },{ 
    planet : 'venus',
    diameter : '12104',
    dist : '0.723',
    rotation : '243.0日',
    revolution : '224.7日',
    luminous : '-4.7'
  },{ 
    planet : 'earth',
    diameter : '12756',
    dist : '1.00',
    rotation : '23.93時間',
    revolution : '365.26日',
    luminous : ''
  },{ 
    planet : 'mars',
    diameter : '6787',
    dist : '1.524',
    rotation : '1.026日',
    revolution : '686.98日',
    luminous : '-3.0'
  },{ 
    planet : 'jupiter',
    diameter : '142800',
    dist : '5.203',
    rotation : '9.8時間',
    revolution : '11.86年',
    luminous : '-2.8'
  },{ 
    planet : 'saturn',
    diameter : '120660',
    dist : '9.539',
    rotation : '10.2時間',
    revolution : '29.46年',
    luminous : '-0.5'
  },{ 
    planet : 'uranus',
    diameter : '51118',
    dist : '19.18',
    rotation : '17.9時間',
    revolution : '84年',
    luminous : '5.3'
  },{ 
    planet : 'neptune',
    diameter : '49528',
    dist : '30.06',
    rotation : '19.1時間',
    revolution : '164.8年',
    luminous : '7.8'
  },{ 
    planet : 'pluto',
    diameter : '2320',
    dist : '39.53',
    rotation : '6.4日',
    revolution : '248.5年',
    luminous : '13.6'
  }
];

$(document).ready(function(){
  var template = $.trim($('#planetTemplate').html());
  var flagment = '';

  $.each( planets, function( index, obj ){
    flagment += 
      template
        .replace(/%%planet%%/ig, obj.planet)
        .replace(/%%diameter%%/ig, obj.diameter)
        .replace(/%%dist%%/ig, obj.dist)
        .replace(/%%rotation%%/ig, obj.rotation)
        .replace(/%%revolution%%/ig, obj.revolution)
        .replace(/%%luminous%%/ig, obj.luminous);
  });

  $('body').append(flagment);
});
/* ==================== SCRIPTS ==================== */
    </script>
  </head>
<body>
</body>
</html>
↑

day20 Say Hello to Handlebars †

http://tutsplus.com/lesson/say-hello-to-handlebars/

← Day 10 以前 : Javascript Learn jQuery in 30 Days (01-10)
→ Day 21 以降 : Javascript Learn jQuery in 30 Days (21-30)

HTML

添付ファイル: fileuranus.png 1678件 [詳細] filevenus.png 1619件 [詳細] filepluto.png 1763件 [詳細] filequiz2.png 1564件 [詳細] filesaturn.png 1669件 [詳細] fileneptune.png 1745件 [詳細] filemars.png 1812件 [詳細] filejupiter.png 1762件 [詳細] filemercury.png 1983件 [詳細] fileearth.png 1916件 [詳細] filelesson16.html 2359件 [詳細] filelesson15.html 2265件 [詳細] filelesson14.html 2306件 [詳細] filelesson19.html 2442件 [詳細] filelesson13.html 2678件 [詳細] filelesson12.html 2603件 [詳細]
トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS   sitemap
Last-modified: 2012-02-24 (金) 21:42:22 (3999d)
Short-URL: https://hondou.homedns.org:443/pukiwiki/index.php?cmd=s&k=26c3bdf991
ISBN10
ISBN13
9784061426061