jQuery DJ Hero ：结合jQuery&CSS3的酷炫效果

jQuery DJ Hero 结合了jQuery和CSS3技术，你可以选择开始，加速或减速，目前还没有真实的音乐效果，不过在后期会提供。

这个演示只能在支持CSS3的浏览器上工作，最新版本的Safari，Firefox，Chrome都支持。

 

查看演示：http://demo.marcofolio.net/jquery_dj/

 

作者提供了此演示的源代码，点击此处下载

 

部分代码如下：

 
// Function to be called when the play button is clicked.
// It changes from "play" to "pause" when records are spinning
// and starts both the vinyls.
$("#playbutton").click(function() {
   checkButtons();
   if(playing) {
      // Pause
      $("#playbtn").attr("src", "images/btn-play.png");
      playing = false;
      $(".vinyl").each(function() {
         // Clear the interval from the vinyl
         // to stop spinning
         var intervalHandle = $(this).data('intervalHandle');
         clearInterval(intervalHandle);
         $(this)
            .css({ 'cursor' : 'default' })
            .stop()
            .animate({rotate: '+=40deg'}, 800, 'easeOutCubic');            
      });
   } else {
      // Play
      $("#playbtn").attr("src", "images/btn-pause.png");
      playing = true;
      $(".vinyl").each(function() {
         $(this)
            .css({ 'cursor' : 'move' })
            .data('rotationAngle', 10);
         startSpinning($(this));
      });
   }
});

 

点击查看详情：http://www.marcofolio.net/webdesign/jquery_dj_hero_css3_and_jquery_fun.html

 

 

更多CSS3 & jQuery作品：

 

• jTypingHero-基于Guitar Hero开发的打字游戏
• jCharacterfall-也是一个打字游戏，不过与上面那个的效果不同，字母随水滴下落，速度会逐渐加快。
• jSlickmenu-jQuery的插件，用于创建菜单
• 查看更多