zoukankan      html  css  js  c++  java
  • 音频audio,加层父级

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style type="text/css">
        body {
            background: #2b2938;
        }
    
        .cn_btn_audio {
            margin: 90px auto;
            width: 186px;
            height: 186px;
            background: url(http://img.d1xz.net/d/2018/07/5b56749f0817d.png) no-repeat;
            background-size: cover;
        }
        </style>
        <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    </head>
    
    <body>
        <div class="nc_info">
            <div class="cn_btn_audio J_btnAudio" data-id="1">
                <audio class="J_mp3Btn">
                    <source src="http://www.ytmp3.cn/down/49366.mp3" type="audio/mpeg" />
                </audio>
            </div>
        </div>
        <div class="nc_info">
            <div class="cn_btn_audio J_btnAudio" data-id="2">
                <audio class="J_mp3Btn">
                    <source src="http://www.ytmp3.cn/down/49366.mp3" type="audio/mpeg" />
                </audio>
            </div>
        </div>
        <div class="nc_info">
            <div class="cn_btn_audio J_btnAudio" data-id="3">
                <audio class="J_mp3Btn">
                    <source src="http://www.ytmp3.cn/down/49366.mp3" type="audio/mpeg" />
                </audio>
            </div>
        </div>
        <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.10.0/jquery.min.js"></script>
        <script type="text/javascript">
        $(function() {
            //播放完毕
            $('.J_mp3Btn').on('ended', function() {
                console.log("音频已播放完成");
                $('.J_btnAudio').css({
                    'background': 'url(http://img.d1xz.net/d/2018/07/5b56749f0817d.png)',
                    'background-size': 'cover'
                });
            })
    
    
            $('.J_btnAudio').click(function() {
                var cindex = $(this).data('id'); //定义个属性值
                console.log(cindex);
                $('.J_btnAudio').each(function(i) {
                    var z=$(this).data('id');
                    console.log('****'+z);
                    var audio = $(this).children('.J_mp3Btn')[0];
                    if (z == cindex) {  //判断属性值等于当前的值
                        if (audio.paused) { //如果当前是暂停状态
                            $(this).css({
                                'background': 'url(http://img.d1xz.net/d/2018/07/5b567509be452.png)',
                                'background-size': 'cover'
                            });
                            audio.play();
                        } else { //当前是播放状态
                            $(this).css({
                                'background': 'url(http://img.d1xz.net/d/2018/07/5b56749f0817d.png)',
                                'background-size': 'cover'
                            });
                            audio.pause();
                        }
                    } else {
                        if (!audio.paused) { //当前是播放状态
                            $(this).css({
                                'background': 'url(http://img.d1xz.net/d/2018/07/5b56749f0817d.png)',
                                'background-size': 'cover'
                            });
                            audio.pause();
                        }
                    }
    
                });
    
            });
        })
        </script>
    </body>
    
    </html>
  • 相关阅读:
    题解+补题
    信息安全导论期末复习
    Codeforces Round #104 (Div.2)
    中国计量大学现代科技学院第四届“中竞杯”程序设计校赛(同步赛)
    第一章练习-1
    【练习】购物车程序
    【转】Python中设置输出文字的颜色
    字符串,列表,元组,字典间的互相转换
    【转】Python Enhancement Proposal #8【PEP8】
    【转】pycharm的一些快捷键
  • 原文地址:https://www.cnblogs.com/huanghuali/p/9364663.html
Copyright © 2011-2022 走看看