<!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. 使用TCPDF输出完美的中文PDF文档

    TCPDF是一个用于快速生成PDF文件的PHP5函数包.TCPDF基于FPDF进行扩展和改进.支持UTF-8,Unicode,HTML和XHTML.在基于PHP开发的Web应用中,使用它来输出PDF文 ...

  2. 【常见CPU架构对比】维基百科

    Comparison of instruction set architectures https://en.wikipedia.org/wiki/Comparison_of_instruction_ ...

  3. Dirichlet Process

    http://www.cnblogs.com/zhangbojiangfeng/p/5962039.html [各种函数推导]

  4. Shrio04 自定义Realm

    1 说明 1.1 Realm的作用 Realm和认证和授权时的数据交互有关,相当于DAO层. 1.2 AuthorizingRealm >层次关系图 >作用继承AuthorizingRea ...

  5. web图形方案比较html5、GML、SVG、VML

    GML.SVG和VML都是基于XML的可用来描述矢量图形的标记语言,都是XML词表,它们的语法并不难理解,但它们都有各自不同的用途和特点,下面简单介绍一下. GML(Geography Markup  ...

  6. Laravel 5.4 实现无限级分类

    最近在工作中遇到一个需求,是要在laravel 5.4中实现无限级分类,但发现网上这个的资料较少,所以只能自己来实现了,下面这篇文章主要给大家介绍了关于在laravel 5.4中实现无限级分类的方法示 ...

  7. wmi收集系统信息 发送到服务器打印

    #include "WMIManager.h" #include <vector> #include <string> #include <boost ...

  8. linux git server 简易搭建 （ssh访问）

    git的服务器搭建,如果无需权限控制,仅团队内部使用,初始化一个服务器仓库,其他人通过ssh访问这个文件夹即可.如需复杂的管理,建议使用gitlab. yum install git -y id gi ...

  9. 初识STM32

    1.什么是STM32 A.ST是意法半导体,一个公司名,即SOC厂商,生产芯片的厂商.ARM公司是IP厂商,即只生产内核的厂商. B.M-Microelectronics的缩写,表示微控制器,大家注意 ...

  10. JVM 垃圾回收- 转载 知识碎片

    最近关注了一下垃圾回收的问题,想了解一下JVM 关于方法区的垃圾回收机制,找了几篇文章,不同的文章从不同角度讲述了一下,嗯... 拼凑起来 记录一下, 有些未验证正确性... JVM 方法区 当JVM ...