javascript MP3播放器的三种实现方法( 二)

最新推荐文章于 2024-01-25 12:30:01 发布

yangQin2008

最新推荐文章于 2024-01-25 12:30:01 发布

阅读量1.4k

点赞数

分类专栏： javascript 迷你播放器文章标签： javascript function class table div border

本文链接：https://blog.csdn.net/yangqin2008/article/details/3771575

版权

javascript 迷你播放器专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<html>
<head>
<title>aboutplayer</title>
<style>
body {
overflow:auto;
font-size:12px;
cursor:default;
background-color: #977E4A;
}

#table01 {
font-size:12px;
background-Color:black;
color:white;
text-align:center;
}

#playListTitle {
background-Color:#001122;
color:white;
font-size:12px;
font-weight:bold;
width:100%;
height:16px;
padding:2px;
}

#playList {
width:150px;
height:225px;
margin:0px;
font-size:12px;
background-Color:black;
color:white;
}

#musicList {
width:200px;
border:buttonface 4px groove;
height:80px;
position:absolute;
right:5px;
top:23px;
left: -1px;
}

#musicListTitle {
font-size:13px;
width:100%;
height:20px;
background-Color:#C5FFC5;
padding:3px;
font-weight:bold;
}

#musicList a {
text-decoration:none;
width:100%;
height:20px;
line-height:20px;
font-szie:20px;
line-height:20px;
padding-top:5px;
padding-left:10px;
}

#musicList a:hover {
background-Color:#E5FFE5;
}
.style1 {
color: #006699;
font-weight: bold;
}
.style2 {font-size: 12px}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
.style4 {font-size: 12px; color: #FFFF33; }
.style7 {font-family: "Times New Roman", Times, serif}
</style>
<script>

function playList_dragOver(){
event.returnValue=false;
}

function playList_dragEnter(){
event.returnValue=false;
event.dataTransfer.dropEffect='link';
}

function addMusic(){
if(event.srcElement.tagName=='A'){
strTxt=event.srcElement.innerText;
strURL=event.srcElement.href;
playList.innerHTML="";
playList.options[0]=new Option(strTxt,strURL);
playList.options[0].selected=true;
}
event.returnValue=false;

playList_dblClick();
return(false);
}

function playList_drop(){
strTxt=unescape(event.dataTransfer.getData('Text').split(":")[0]);
strURL=unescape(event.dataTransfer.getData('Text').split(":")[1]);
playList.options[playList.options.length]=new Option(strTxt,strURL);
}

function playList_dblClick(){
MediaPlayer1.detachEvent("PlayStateChange",checkPlayStatus);
MediaPlayer1.fileName=playList.value;
MediaPlayer1.play();
setTimeout('MediaPlayer1.play();MediaPlayer1.attachEvent("PlayStateChange",checkPlayStatus);',1000);
}

function musicList_dragStart(){
if(event.srcElement.tagName=='A'){
event.dataTransfer.setData('Text',escape(event.srcElement.innerText)+":"+escape(event.srcElement.href));
}else{
return(false);
}
}

function init(){
MediaPlayer1.AutoRewind=false;
MediaPlayer1.AutoStart=true;
MediaPlayer1.SendPlayStateChangeEvents=true;
MediaPlayer1.attachEvent("PlayStateChange",checkPlayStatus);
}

var dragswitch=0
var nsx
var nsy
var nstemp

function drag_dropns(name){
temp=eval(name)
temp.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP)
temp.οnmοusedοwn=gons
temp.οnmοusemοve=dragns
temp.οnmοuseup=stopns
}

function gons(e){
temp.captureEvents(Event.MOUSEMOVE)
nsx=e.x
nsy=e.y
}
function dragns(e){
if (dragswitch==1){
temp.moveBy(e.x-nsx,e.y-nsy)
return false
}
}

function stopns(){
temp.releaseEvents(Event.MOUSEMOVE)
}

//drag drop function for IE 4+
/

var dragapproved=false

function drag_dropie(){
if (dragapproved==true){
document.all.showimage.style.pixelLeft=tempx+event.clientX-iex
document.all.showimage.style.pixelTop=tempy+event.clientY-iey
return false
}
}

function initializedragie(){
iex=event.clientX
iey=event.clientY
tempx=showimage.style.pixelLeft
tempy=showimage.style.pixelTop
dragapproved=true
document.οnmοusemοve=drag_dropie
}

if (document.all){
document.οnmοuseup=new Function("dragapproved=false")
}

drag drop functions end here//

function hidebox(){
if (document.all)
showimage.style.visibility="hidden"
else if (document.layers)
document.showimage.visibility="hide"
}

</script>
<div id="showimage" style="position:absolute; width:500px; left:465px; top:18px; height: 0px;">
<table border="0" width="199" cellspacing="0" cellpadding="0">
<tr>
    <td width="100%"><table border="0" width="100%" cellspacing="0" cellpadding="0"
    height="36">
      <tr>
        <td width="100%" bgcolor="#C6FFC6" style="padding:4px" onMousedown="initializedragie()"><ilayer width="100%" onSelectStart="return false"><layer width="100%" onMouseover="dragswitch=1;drag_dropns(showimage)" onMouseout="dragswitch=0" class="style1">
        <div align="left" class="style2">
          <div align="center">用鼠标按着我拖拖看<span class="style7">^o^</span></div>
        </div>
        </layer>
        </ilayer></td>
        <td bgcolor="#00CCFF" style="cursor:hand"><strong><a href="#" onClick="hidebox();return false">×</a></strong></td>
      </tr>
      <tr>
        <td width="100%" style="padding:4px" colspan="2"><p> </p>
          <div id=musicList οndragstart="musicList_dragStart();">
            <div class="style2" id=musicListTitle>All Music</div>
            <span class="style2"><a href="F:/音乐/没有人比我更爱你.mp3" οnclick="addMusic();">没有人比我更爱你</a><br>
            <a href="http://www.gyvnet.com/music_new/web/user/usermusic/2308/2005063004283371564.mp3" οnclick="addMusic();">第一滴泪 - 动力火车</a><br>
            <a href="http://211.90.238.134/blog/upload/music/half.sugar.wma" οnclick="addMusic();">半糖主义 - SHE</a><br>
            <a href="http://web.163.sh.cn/~kkyhm/music/3.wma" οnclick="addMusic();">发如雪 - 周杰伦</a></span><br>
            <hr>
            <span class="style4">Tips: 把歌曲拖入播放列表<br>
            </span>
              <input type="button" class="style2" οnclick="doFull();" value="全屏/ESC返回">
              </div>
          </td>
      </tr>
    </table>
    </td>
</tr>
</table>
</div>
<div id=info></div>
<body>
</html>

yangQin2008

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript MP3播放器的三种实现方法( 二)

aboutplayerbody { overflow:auto; font-size:12px; cursor:default; background-color: #977E4A;}#table01 { font-size:12px; background-Color:black; color:white; text-align:center;}#playListTitle { back
复制链接

扫一扫

专栏目录