redamoon
5/11/2015 - 2:24 PM

JdGvGO

JdGvGO

JdGvGO.markdown
content_copyfile_download
  • Rendered
  • Source

JdGvGO ('-' * 6)

A Pen by redamoon on CodePen.

License.

index.html
content_copyfile_download
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8" />
  <title>demo</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://code.jquery.com/color/jquery.color-2.1.2.js"></script>
</head>
<body>
<div class="mod-btn is-btn--type01 js-target-btn h-mb10"><span>ボタン</span></div>
<div class="mod-btn is-btn--type02 js-target-btn"><span>ボタン</span></div>
</body>
</html>
script.js
content_copyfile_download
/*var Sample = {
  name: 'sampleくん',
  age: '30',
  init: function() {
    // 何かしらの処理
  },
  sayHello: function() {
    document.write('Hello,' + this.name +'です');
    console.log('Hello,' + this.name +'です');
  }
}
Sample.name = "yonpuruくん";
Sample.sayHello(); // Hello, yonpuruくんです*/
var Btn = (function(){
  var _targetBtn = $('.js-target-btn');
  function HoverBtnType01(){
    _targetBtn.hover(
      function(){
        $(this).find('span').stop().animate({'marginLeft':'25px'},100);
      },
      function () {
        $(this).find('span').stop().animate({'marginLeft':'0px'},300);
      }
    );
  }
  function HoverBtnType02(){
    var color_type01 = '#FF0000',
        color_type02 = '#0000FF';
    _targetBtn.hover(
      function(){
        $(this).stop().animate({'backgroundColor': '#FF00FF'},200);
      },
      function () {
        if($(this).hasClass('is-btn--type01')){
          $(this).stop().animate({'backgroundColor': color_type01},300);
        } else if($(this).hasClass('is-btn--type02')){
          $(this).stop().animate({'backgroundColor': color_type02},300);
        }
      }
    );
  }
  return {
    HoverBtnType01: HoverBtnType01, //公開する機能のみ返す
    HoverBtnType02: HoverBtnType02 //公開する機能のみ返す
  }
})();
/*Btn.HoverBtnType01();*/
Btn.HoverBtnType02();

var Sample = (function(){
  var _nickName = 'sampleくん';
  var _age = '30';
  function _init(){
    // 初期値
  }
  function _sayHello(){
    document.write('Hello,' + _nickName +'です');
    /*console.log('Hello,' + _nickName +'です');*/
  }
  _init();
  return {
    sayHello: _sayHello //公開する機能のみ返す
  }
})();
Sample._nickName = 'hogehogeくん' // 変更できない
Sample.sayHello(); // Hello, sampleくんです。
style.css
content_copyfile_download
body{
  background: #CCC;
}
.mod-btn{
  border-radius:10px;
  padding: 10px;
  cursor: pointer;
}
.is-btn--type01{
  background: #FF0000;
}
.is-btn--type02{
  background: #0000FF;
  color: #FFF;
}
.h-mb10{
  margin-bottom:10px;
}