<!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>

音频audio,加层父级的更多相关文章

  1. 无法加载父级样式或设置IIS的asp站点启用父路径

    打开IIS 1.单击站点,在"IIS"区域中找到ASP图标,双击. 2.找到"启用父路径"项目,将对应的值设置为"TRUE"即可.   顶

  2. image以最小边为标准填满正方形父级元素

    需求: 上传图片并实现预览, 图片以最小边为标准填满正方形的父级div,且不变形,且点击可以预览大图. 有两种实现方式: 1.div+img标签, 利用object-fit:cover,据说兼容性不好 ...

  3. layer弹出层设置相对父级元素定位

    layer弹出层默认是相对body固定定位的,可是项目中一般需要相对某个盒子相对定位,下面是个加载弹层例子: var loadIndex = layer.open({ type: 3, //3 表示加 ...

  4. text-align：center；在ie7下，父级加上会让block状态的子元素居中。

    text-align:center:在ie7下,父级加上会让block状态的子元素居中.ie8以上不会.

  5. 关于子元素的margin-top对父级容器无效

    如果不想看那么长,看下面这句话就好了. 刚开始我没看到这个总结时一直是使用自己摸索出来paddin-top解决,发现该方式并不好.亲测给父级加一个overflow不为visiable的属性就直接解决了 ...

  6. ThinkPHP 关联模型中查询某条记录的父级(非查询子级)

    数据表 id      cat_name      cat_pid 76     手机.数码     0 84     手机配件        76 86     蓝牙耳机        84 从属关 ...

  7. Devexpress TreeList选择父级联动

    Treelist当显示复选框后,父级和子级的复选框没有关联,使用过程中很不便,如图所示 自己给treelist添加父子级联动 /// <summary> /// 初始化TreeList,父 ...

  8. JS获取与遍历节点的兄弟父级

    发布:脚本学堂/JavaScript  编辑:JB01   2014-01-23 15:40:11  [大 中 小] 介绍下js获取节点的兄弟.父级与子元素的方法,学习下js遍历节点的操作方法,有需要 ...

  9. <转载>如何解决子级用float浮动父级div高度不能自适应的问题

    转载:http://www.kwstu.com/ArticleView/divcss_2013101582430202 解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内 ...

随机推荐

  1. Windows10 IME占用过高临时解决办法

    解决方案: 在管理员模式下运行命令提示符,并输入如下命令 if exist "%SystemRoot%\System32\InputMethod\CHS\ChsIME.exe" ( ...

  2. 自学jquery，下午实现前后台交互--成为牛逼的女程序员

    希望周末能够把搜索质量对比的页面做出来!!! 牛逼的薰衣草程序员,fighting

  3. C# 将Word,Execl,PPT,Project, 文件转成PDF, 不依赖Office!!

    git 地址 https://gitee.com/bandung/Execl_WordTOPDF.git 包括了各种破解的dll Word转PDF 挨个引用 Word转PDF public void ...

  4. spring boot 2

    服务端验证: // 1.修改实体 @Min(value = 18,message = "必须大于18岁") private int age; // 2.修改add方法 @PostM ...

  5. for 续1

    --------siwuxie095                 /f 是四个参数中最复杂的一个,非常强大,不过其复杂性 令人望而生畏     /f 用途: 能够对字符串进行操作,也能够对命令的返 ...

  6. DropDownList控件的使用方法

    1. 使用代码添加数据 <asp:DropDownList ID="DropDownList1" runat="server"> </asp: ...

  7. JavaScript 分号使用总结

    没有应该不应该,只有你自己喜欢不喜欢.JavaScript 语法长得 C-like 不代表它本质上和 C 是一类语言,所有直觉性的 "当然应该加分号" 都是保守的.未经深入思考的草 ...

  8. 在sublime text中添加JavaScript的build-system

    -step 1: 下载安装node.js, 并添加到path变量中. -step 2: 在sublime text中新建一个build-system. tools --> build-syste ...

  9. Apache ab.exe压测工具使用

    Apache的ab命令模拟多线程并发请求,测试服务器负载压力,也可以测试nginx.lighthttp.IIS等其它Web服务器的压力. 1,打开cmd,找到安装apache的目录,cd  目录进去, ...

  10. docker 初始化执行.sh修改.properties文件

    1.testmysql.properties rootuser=aarootpass=bb 2.用环境变量修改testmysql.properties里面的rootuser和rootpass的值的脚本 ...