特效介绍
超真实jQuery打造录音磁带效果,可以快进快退磁带,能够看到磁带快进快退效果,可以播放音乐,正面播放完了,点击“SWICH”按钮,可以切换到背面。“VOLUME”按钮可以调节音量。按钮采用金属质感效果,磁带是塑料效果。支持本地音乐和网络音乐,支持mp3格式和ogg格式音乐。
请注意:本插件时jQuery+html5写的,不兼容IE8。
使用方法
1、在head区域引入下面的js和css文件:<link rel="stylesheet" type="text/css" href="css/demo.css" /> <link rel="stylesheet" type="text/css" href="css/style.css" /> <link rel="stylesheet" type="text/css" href="css/knobKnob.css" /> <script type="text/javascript" src="js/modernizr.custom.69142.js"></script>2、把以下代码拷贝到您的html页面:
<div id="vc-container" class="vc-container"> <div class="vc-tape-wrapper"> <div class="vc-tape"> <div class="vc-tape-back"> <div class="vc-tape-wheel vc-tape-wheel-left"><div></div></div> <div class="vc-tape-wheel vc-tape-wheel-right"><div></div></div> </div> <div class="vc-tape-front vc-tape-side-a"> <span>A</span> </div> <div class="vc-tape-front vc-tape-side-b"> <span>B</span> </div> </div> </div> <div class="vc-loader"></div> </div><!-- //vc-container --> <script type="text/javascript" src="http://www.5imoban.net/download/jquery/jquery-1.8.3.min.js"></script> <script src="js/transform.js"></script> <script src="js/knobKnob.jquery.js"></script> <script type="text/javascript" src="js/jquery.cassette.js"></script> <script type="text/javascript"> $(function() { $( '#vc-container' ).cassette(); }); </script>3、歌曲地址的修改:
1)打开jquery.cassette.js文件,直接ctrl+F查找“歌曲名称::::::::::”,下一行就是歌曲名称,不带后缀名。
2)还是上面的js文件,ctrl+F查找“歌曲地址:::::::::::::::::”,下一行就是歌曲地址和歌曲后缀名。
3)技巧:当网络歌曲,路径不在一起,就把路径不同的部分和歌曲名都填写在歌曲名称里面,而后缀名和前缀相同的部分填写在相应地址,如:
http://mp3.jiuku.com/mp3/640/639171.mp3 和 http://mp3.jiuku.com/mp3/2010/639295.mp3 ,分析下,“http://mp3.jiuku.com/mp3/” 是二者的相同之处,剩下的都是不同之处,所以名称可以这么填写:
songs : [ '640/639171', '2010/639295', ],
而歌曲地址和后缀名可以这么填写:
mp3 : 'http://mp3.jiuku.com/mp3/' + this.name + '.mp3',
总之,要保证歌曲名+地址+后缀名=完整歌曲地址。