jquery之音乐播放控件

0x00:

找资源找半天找不到，一怒之下自己用jquery写了个略抠的播放控件。hhh

0x01:

html:

    <button type = 'button' id = 'sign'>♪</button>
    <div id = 'num'>♫</div>
    <div id = 'O'>`</div>
    <div id = 'flower'>♩</div>
    <!-- <div id = 'eight'>♬</div> -->
    
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=520 height=86 src="" id = 'mp3'></iframe>

css:

#mp3
{
  position: relative;
    left:-40%; 
    top:-23%;
    opacity:0.8;
     z-index: 999999999999;
    display: none;
}
#sign
{
    position: fixed;
    top: 3%;
    right: 3%;
    color:#04ABCD;
    font-size:38px;
    border: 0;
    background-color:transparent;
    z-index: 999999999999999999;
    outline:none; 
}
#num
{
    position: fixed;
    top: 2.3%;
    right: 2.8%;
    color:white;
    font-size:22px;
    z-index: 999999999999999999;
    display: none;
}
#O
{
position: fixed;
    top: 5px;
    right: 2%;
    color:yellow;
    font-size:22px;
    z-index: 999999999999999999;
    display: none;
}
#flower
{
position: fixed;
    top: 2.5%;
    right: 1.5%;
    font-size:22px;
    color:red;
    z-index: 999999999999999999;
    display: none;
}

jquery:

$(document).ready(function()
{
    var number = 0;
    $('#mp3').attr('src','//music.163.com/outchain/player?type=2&id=408332049&auto=1&height=66');

    $('#sign').mouseover(function()
    {
        number +=1;
        if(number % 2 == 0)
        {

     
                   
    $('#sign').css(
        {
                'transform':'rotate(30deg)','-ms-transform':'rotate(30deg)',
                '-moz-transform':'rotate(30deg)','-webkit-transform':'rotate(30deg)',
                '-o-transform':'rotate(30deg)'
        },function()
        {
            $('#sign').css(
        {
                'transform':'rotate(330deg)','-ms-transform':'rotate(330deg)',
                '-moz-transform':'rotate(330deg)','-webkit-transform':'rotate(330deg)',
                '-o-transform':'rotate(330deg)'
        });
        });
            $('#O,#flower,#num').fadeIn(100,function()
            {
            $('#O,#flower,#num').fadeOut(1500);
                
            });
        
        // $('#sign').hide();

        }else{

        $('#sign').css(
        {
                'transform':'rotate(330deg)','-ms-transform':'rotate(330deg)',
                '-moz-transform':'rotate(330deg)','-webkit-transform':'rotate(330deg)',
                '-o-transform':'rotate(330deg)'
        });
        $('#O,#flower,#num').fadeIn(100,function()
            {
            $('#O,#flower,#num').fadeOut(1500);

        });

        }
    });

    $('#sign').click(function()
    {
            number +=1;
       
            if(number % 2 == 0)
            {
            $('#mp3').attr('src','//music.163.com/outchain/player?type=2&id=408332049&auto=1&height=66');
            }else{
                 $('#mp3').attr('src','');
            }

    });
});

0x03:

外表样式如下：

1.实现了鼠标滑过出现三个符号并渐变隐藏

2.单击关闭歌曲，再单击播放歌曲。

有不懂的欢迎来问，3025098126

By Kind && 红衣