두부찌개

http://hugoware.net/snippets/jquery-dual-scroll

html

css

.div01{width:200px;height:200px;overflow-y:auto;background:#000;color:#fff;}
.div02{width:200px;height:200px;overflow-y:auto;background:#000;color:#fff;}

jQuery

var tbox1 = $('.tlans-box .txt-box .txtarea-view.tbox1');
var tbox2 = $('.tlans-box .txt-box .txtarea-view.tbox2');

var height = parseInt(tbox2.css('height'));

var hold = false;
var window_scroll = true;
tbox1.add(tbox2)
   .mouseenter(function() { window_scroll = false; })
   .mouseleave(function() { window_scroll = true; });

var locked = false;
var sync_to = function(source, target) {
   if (locked) { return locked = false, true; }
   locked = true;

   var percent = source.scrollTop() / (source[0].scrollHeight - height);
   var top = (target[0].scrollHeight - height) * percent;
   target[0].scrollTop = top;
}

tbox1.scroll(function(e) { sync_to.call(e, tbox1, tbox2); });
tbox2.scroll(function(e) { sync_to.call(e, tbox2, tbox1); });

jQuery HTML5 Audio / Video Library

jPlayer는 커스터마이징이 가능한 오디오 플레이어

배포사이트 : http://jplayer.org/

script

$("#jquery_jplayer_1").jPlayer({
   ready: function () {
      $(this).jPlayer("setMedia", {
         m4a: "/resource/tts_10.mp3"    //음원 경로
      });
   },
   play: function() { // To avoid multiple jPlayers playing together.
      $(this).jPlayer("pauseOthers");
   },
   swfPath: "/resource/script/jplayer",    //jplayer 경로
   supplied: "m4a",
   cssSelectorAncestor: "#jp_container_1",
   wmode: "window",
   globalVolume: true,
   useStateClassSkin: true,
   autoBlur: false,
   smoothPlayBar: true,
   keyEnabled: true,
   defaultPlaybackRate : .5     //배속. 디폴트 1
});

html

<div class="player">

   <div id="jquery_jplayer_1" class="jp-jplayer"></div>

   <div id="jp_container_1" class="jp-audio" role="application" aria-label="media player">

      <div class="jp-controls">
         <button class="jp-play" role="button" tabindex="0">play</button>
         <button class="jp-pause" role="button">Pause</button>
         <button class="jp-stop" role="button">Stop</button>
      </div>

   </div>

</div>

커스텀 스크롤바를 만들어주는 플러그인

배포사이트 : http://manos.malihu.gr/jquery-custom-content-scroller/

데모 : http://manos.malihu.gr/repository/custom-scrollbar/demo/examples/complete_examples.html