jquery-mp3播放。

最新推荐文章于 2022-04-15 13:43:22 发布

wangxinqiang1129

最新推荐文章于 2022-04-15 13:43:22 发布

阅读量815

点赞数

分类专栏： jquery

本文链接：https://blog.csdn.net/wangxinqiang1129/article/details/8995214

版权

jquery 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>mp3文件播放</title>
</head>
<style>
body{background:#fff;}
.ex_title_box{ font: bold 18px/1.125 "微软雅黑","Microsoft YaHei",Arial; color:#444; text-align:center; padding:10px; clear:both;}
.ex_info_box{ clear:both; padding:8px; font-size:12px; color:#555;}
.ex_info_box b{ color:#333; padding: 0 10px 0 0;}
.table-list-warp { width:99%; margin:0 auto; font: 12px Verdana, Geneva, sans-serif; padding:5px 0;}
.table-list-warp .tab-all { border-collapse:collapse; width:100%;}
.table-list-warp .tab-all thead td ,.table-list-warp .tab-all thead th{ white-space:nowrap; text-align:center; padding:4px;border:solid 1px #666; color:#000;}
.table-list-warp .tab-all thead th{ background:#f3c2cd;}
.table-list-warp .tab-all tbody td { text-align:center; vertical-align: middle; padding:4px; border-bottom:solid 1px #eee; border:solid 1px #666; color:#333; background:#fff;}
.table-list-warp .tab-all .green{ color:#0f840f; font-weight:bold;}
.table-list-warp .tab-all .white{ color:#fff;}
.table-list-warp .tab-all .red{ color:#F00;}
.table-list-warp .tab-all tbody tr.even-n td{ background:#fbf9e4;}
.table-list-warp .tab-all tbody td.c-center{ text-align:center;}
.table-list-warp .tab-all td input, .table-list-warp .tab-all td select { padding:5px;border:solid 1px;border-color:#b8b8b8 #dcdcdc #dcdcdc #b8b8b8; color:#666; font-family:Verdana, Geneva, sans-serif; }

#clazz_student_list li{list-style:none;}
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.17zuoye.com/public/framework/scripts/jquery.jmp3.min.js?v=1.0.1"></script>
<body>

   <div class="table-list-warp">
       <table class="tab-all">
           <thead >
               <tr>
                   <th>名次</th>
                   <th>用户姓名</th>
                   <th>跟读练习</th>
               </tr>
           </thead>
           <tbody>
               <tr>
                   <td>1</td>
                   <td>荆欣<br />
                   <span class="green">(32998)</span></td>
                   <td>91 <span class="mp3" url="http://cdn.17zuoye.com/upload/media/homework/20120209/1328798406633.mp3" title="下载声音">
                       <img src="http://cdn.17zuoye.com/public/app/default/images/mp3_play_icon.jpg"/>
                   </span></td>
               </tr>

           </tbody>
       </table>
   </div>
   <script>
       $(function(){
           $(".mp3").live("click",function(){
               if( $(this).attr("isplay") == 1 ){
                   return false;
               }
               var curPlay = $(".mp3[isplay='1']");
               if( curPlay.length > 0 ){
                   curPlay.html('http://cdn.17zuoye.com/public/app/default/images/mp3_play_icon.jpg');
                   curPlay.attr("isplay", 0);
               }
               $(this).attr("isplay", 1);
               $(this).html($(this).attr("url"));
               $(this).jmp3({
                   playerpath: 'http://cdn.17zuoye.com/resources/framework/jmp3/singlemp3player_18x18.swf?v=6.0',
                   width:18,
                   height:18,
                   autoplay:true
               });
           });

       });

   </script>
</body>
</html>

wangxinqiang1129

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery-mp3播放。

mp3文件播放body{background:#fff;}.ex_title_box{ font: bold 18px/1.125 "微软雅黑","Microsoft YaHei",Arial; color:#444; text-align:center; padding:10px; clear:both;}.ex_info_box{ clear:both; padding:8
复制链接

扫一扫