JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<h1>HTML5 + CSS3 CD</h1>
<p>web-kitの先行実装のCSS3を使っています。<br />ChromeかSafariでご覧ください。<br />
クリックすると音がでます。</p>
<section class="conBox">
<h2>Favorite Music</h2>

<ul id="musicLog">
</ul>
<footer class="entryFooter">
<p class="more"><a href="http://booklog.jp/users/pino7x/Music">Powered by Booklog</a></p>
</footer>
</section>

<!--/ #subSet-->
<aside id="subSet" class="clearFix">

<audio id="audio1"><!--/controls-->
  <source src="http://panda-space.com/mp3/test001.mp3" />
  <p>HTML5 Audio 非対応ブラウザ</p>
</audio>

<!--/ #subSet --></aside>

CSS

h1{
  margin:10px;
  font-size:138%;
}
p,h2{
  margin:10px;
  font-size:108%;
}

/*======Start Book And Music Logs==============*/
#musicLog{
  padding:0px 0px 0px 24px;
  height:220px;
}

#musicLog li{
  float:left;
  margin:0px 20px 20px 0px;
  
  width:75px;
  height:75px;
  
  -webkit-box-shadow: 0 3px 6px rgba(0,0,0, .5);
     -moz-box-shadow: 0 3px 6px rgba(0,0,0, .5);
          box-shadow: 0 3px 6px rgba(0,0,0, .5);
  
  -webkit-border-radius: 38px;
     -moz-border-radius: 38px;
        border-radius: 38px;
}


#musicLog li a {
  display:block;
  width:75px;
  height:75px;
  
  -webkit-border-radius: 38px;
     -moz-border-radius: 38px;
        border-radius: 38px;
      
  -webkit-transform-origin: 50% 50%;
       -o-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  
  overflow:hidden;
  
  -webkit-transition: all 40s ease-in-out;
     -moz-transition: all 40s ease-in-out;
       -o-transition: all 40s ease-in-out;
          transition: all 40s ease-in-out;

}
#musicLog li a:hover {
  //-webkit-transform: translate(0px, 0px) scale(1) rotate(10800deg);  
}
#musicLog li a.select{
  -webkit-transform: translate(0px, 0px) scale(1) rotate(108000deg);
　　　-moz-transform: translate(0px, 0px) scale(1) rotate(108000deg);
       -o-transform: translate(0px, 0px) scale(1) rotate(108000deg); 
          transform: translate(0px, 0px) scale(1) rotate(108000deg); 
}

#musicLog li a>div{
  margin:30px auto;
  width:14px;
  height:14px;
  background-color:#FFFFFF;
  -webkit-border-radius: 7px;
     -moz-border-radius: 7px;
　　　　　　border-radius: 7px;
  -webkit-box-shadow:inset 0 0px 2px rgba(0,0,0, .5);
     -moz-box-shadow:inset 0 0px 2px rgba(0,0,0, .5);
          box-shadow:inset 0 0px 2px rgba(0,0,0, .5);
  
}

.entryFooter{
  clear:both;
}
/*======End Book And Music Logs  ==============*/

JavaScript

$(document).ready(function(){
  
  var miuscLogList = $('ul#musicLog');
  
  function setLogs(json, catalog){
     var targetList = (catalog === 'Books') ? bookLogList : miuscLogList;
     var _Count = 0;
     for (var i=0; i<json.books.length; i++){
      
      if(json.books[i].catalog === catalog){
        
        _Count += 1;
        
        var _Url = json.books[i].url, _Title = json.books[i].title, _Author = json.books[i].author, _Img = json.books[i].image;

        targetList.append(
          $('<li/>',{'class':(catalog === 'Books') ? 'bL' : 'mL'})
          .append($('<a/>',{
              'title' : _Title + ':' + _Author,
              'target' : '_blank'
              }).css({'background-image':'url(' + _Img + ')'})
                  .append($('<div />', {'id':'svg-circle' + i}))
            )
          );
        
        if(_Count > 8) return false;
      }
    }
  }
  
  function loadBL(){
    $.ajax({
      type: "GET",
      url: "http://api.booklog.jp/json/pino7x",
      dataType: "jsonp",
      data: { 
      "count"  : 50, 
      "status" : 0
      },
      success: function(json){
        setLogs(json, 'Music');
      }
    });
  }
  
  miuscLogList.find('a').live('click',function(){
    if($(this).attr('class').indexOf('select') > -1){
      musicPause();
      $(this).removeClass('select');
      replaceList($(this).parent());
      
    }else{
      musicPlay();
      $(this).addClass('select');
    }
  });
  

  
  //力技の処理なので、何か良い方法があれば、、、
  function replaceList(repObj){
    var _Index = repObj.index();
    var _CLONE = repObj.clone();
    if(_Index === 0){//=============first Obj
      var _After = repObj.next();
      repObj.remove();
      _After.before(_CLONE);
    
    }else{//========================other Obj
      var _Before = repObj.prev();
      repObj.remove();
      _Before.after(_CLONE);
    }
  }
  
  
  var audioObj = document.getElementById("audio1");
  var masterVol = audioObj.volume;

  function musicPlay(){
   ...