js+css3 爱心陨落+背景音乐可循环可选择播放实例

<!doctype html>
<html lang="en" charset="utf-8">
<head>
<meta charset="utf-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="爱心,飘落">
<meta name="Description" content="">
<title>爱心飘落</title>
<style>
body{
     overflow:hidden;/*超出隐藏*/
   background:url("image/xl.jpg");
   height:920px;
}
    .snowfall-flakes{
       width:10px;
       height:16px;
       /*border:1px solid blue;*/
       /*position:relative;相对定位：参考物*/
       /*4个角顺时针方向：左上、右上、右下、左下*/
       /*border-radius:50% 25% 25% 30%;*/
       }
       /*
         顺时针方向
       斜杠前面是水平边，斜杠后面是竖直边
         border-radius:50% 25% 25% 30%/50% 25% 25% 30%;

   }
   /*.heart div{/*混合选择器：选择的越详细，优先级越高
   position:absolute;绝对定位：相对于拥有定位属性的最近的父元素定位
   width:10px;
   height:16px;
   background-color:red;
   border-radius:10px 10px 0 0;
   }
    .heart .left{
      transform:rotate(-45deg);/*css3变换属性，逆时针旋转45度
      left:-4px;距离参考物左边距离
   }
   .heart .right{
        transform:rotate(45deg);/*css3变换属性，顺时针旋转45度
   }*/
   .snowfall-flakes:before,.snowfall-flakes:after{
       /*在div的前面添加内容*/
       content:"";/*content:伪类的内容，不能省略，没有内容就为空*/
       position:absolute;/*绝对定位：相对于拥有定位属性的最近的父元素定位*/
       width:10px;
       height:16px;
       background-color:red;
       border-radius:10px 10px 0 0;
       -webkit-transform: rotate(45deg);
        /* Safari 和 Chrome */
        -moz-transform: rotate(45deg);
        /* Firefox */
        -ms-transform: rotate(45deg);
        /* IE 9 */
        -o-transform: rotate(45deg);
        /* Opera */
        transform: rotate(45deg);
   }
   .snowfall-flakes:before{
       left:-4px;
       -webkit-transform: rotate(-45deg);
        /* Safari 和 Chrome */
        -moz-transform: rotate(-45deg);
         /* Firefox */
         -ms-transform: rotate(-45deg);
         /* IE 9 */
         -o-transform: rotate(-45deg);
         /* Opera */
         transform: rotate(-45deg);
   }
   .music{
        width:50px;
       height:50px;
        background:url("image/music.png");
       border-radius:50%;
        cursor:pointer;
       position:fixed;
        top:20px;
       right:40px;
   }
   .rotate{
         /*
       css3自定义动画：动画名称时间匀速运动无限重复
       */
         animation:rot 10s linear infinite;
      }
      /*关键帧控制每一帧*/
      @keyframes rot{
         from{
             transform:rotate(0deg);
       }
       to{
             transform:rotate(360deg);
       }
      }

   /*歌名表*/
   .menu{
       position:fixed;
       top:60px;
       right:30px;
   }
   .menu li{
         width:80px;
        list-style:none;
       font-size:14px;
       font-family:'kaiti';
       line-height:30px;
       background:#ccc;
       text-align:center;
       border-bottom:1px solid black;
       cursor:pointer;
   }
</style>
</head>
<body>
    <audio autoplay id="mymusic" src="Music/子陵-周郎顾.mp3">
   </audio>
   <input type="text" value="子陵-周郎顾" id="tt" style="display:none"/>
   <div class="music rotate" id="play"></div>
   <div class="menu" id="menu">
         <ul>
             <li>子陵-周郎顾</li>
           <li>just a kiss</li>
           <li>I Can</li>
           <li>清欢怅</li>
       </ul>
   </div>
    
   <script src="JS/jquery-1.7.2.min.js"></script>
   <script src="JS/snowfall.jquery.min.js"></script>
   <script type="text/javascript">
        $(document).snowfall({
             flakeCount:80//爱心个数
       })
       //鼠标点击播放暂停音乐
       //定义一个变量来确定播放暂停开关
       var onoff=true;

       var oMymusic=document.getElementById("mymusic");
       var oPlay=document.getElementById("play");
       oPlay.addEventListener("click",function(){
             if(onoff){//关闭音乐
                 oMymusic.pause();
                 this.className="music";
               onoff=false;//关闭开关
           }
           else{
                 oMymusic.play();
               this.className="music rotate";
               onoff=true;
           }
       })
       window.onload=function(){
            document.getElementById("menu").style.display="none";
       }
       //鼠标移入，显示歌名表
       oPlay.addEventListener("mouseover",function(){
             document.getElementById("menu").style.display="";
       })
       //选歌
       var oLi=document.getElementsByTagName("li");
       //console.log(oLi);
       for(var i=0,len=oLi.length;i<len;i++){
             oLi[i].addEventListener("click",function(){
             //console.log(this.innerHTML);
             oMymusic.src="Music/"+this.innerHTML+".mp3";
           document.getElementById("tt").value=this.innerHTML;
           oMymusic.play();
           oPlay.className="music rotate";
           onoff=true;
           document.getElementById("menu").style.display="none";
            })
       }
       //播放结束后自动跳转到下一首歌
       oMymusic.addEventListener("ended",function(){
            //console.log("abc");
           var s=document.getElementById("tt").value;
            //console.log(s);
           var n=0;
           var len=oLi.length;
           for(var i=0;i<len;i++){
               //console.log(oLi[i].innerHTML);
               if(s==oLi[i].innerHTML){
                    n=i;
               }
           }

           if(n+1<len){
               oMymusic.src="Music/"+oLi[n+1].innerHTML+".mp3";
               document.getElementById("tt").value=oLi[n+1].innerHTML;
                oMymusic.play();
                oPlay.className="music rotate";
                onoff=true;
               }
           if(n+1==len){
               oMymusic.src="Music/"+oLi[0].innerHTML+".mp3";
               document.getElementById("tt").value=oLi[0].innerHTML;
                oMymusic.play();
                oPlay.className="music rotate";
                onoff=true;
           }
       })
   </script>
</body>
</html>

效果：

js+css3 爱心陨落+背景音乐可循环可选择播放 实例

猜你喜欢

js+css3 爱心陨落+背景音乐可循环可选择播放实例