<!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. 学习Maven之PropertiesMavenPlugin

    1.PRoperties-maven-plugin是个什么鬼? 介绍前我们先看一个问题,比如我们有一个maven项目结构如下:一般我们都把一些配置文件放到像src/main/resources/jdb ...

  2. myeclipse通过数据表生成jpa或hibernate实体

    1. 创建数据库连接 2. 选择表 3. 生成 hibernate mapping 4. 生产jpa

  3. nice & renice

    [nice & renice & getpriority & setpriority] 1.nice & renice 参考:http://man.ddvip.com/ ...

  4. ProjectLeader感悟

    1 首先项目的目标清晰明确,开发的方案也必须清晰明确. 确保两点的做法,是面对面的访谈,很简单的可以打电话或者QQ或者邮件:方案要多次揣摩,设计出合理的方案.如果发以上两点做不好,你就会受到组员的鄙视 ...

  5. mybatis总结回顾

    1.mybatis的介绍 轻量级数据持久层框架,替代hibernate 2.mybatis的入门 导包-->配置文件(类名.xml.SqlMapConfig.xml) 类名.xml:放映射.sq ...

  6. 数据结构notes

    1. 一份很好的数据结构教程,图文并茂,简明扼要,列出每种结构的定义和优缺点,非常适合初学者 via @ranyif https://www.interviewcake.com/data-struct ...

  7. sqlserver2014新特性

    1.SQL Server 2014新特性探秘(1)-内存数据库 在传统的数据库表中,由于磁盘的物理结构限制,表和索引的结构为B-Tree,这就使得该类索引在大并发的OLTP环境中显得非常乏力,虽然有很 ...

  8. hashlib 算法介绍

    Python的hashlib提供了常见的摘要算法,如MD5,SHA1等等. 什么是摘要算法呢?摘要算法又称哈希算法.散列算法.它通过一个函数,把任意长度的数据转换为一个长度固定的数据串(通常用16进制 ...

  9. JAVA定时关机小程序

    大一刚学java时候做的小程序.由于当时迅雷还没有下载完成关机,晚上要下很多学习资料.只有自己算时间然后通过shutdown命令设置时间关机. 当时通过shutwodn命令,想到能否通过java做一个 ...

  10. 搭建vue脚手架，包含Axios、qs、Element-UI、mock等插件的安装配置

    1.安装node.vue这些最基础最简单的安装的就一一省略过. 1.1 axios 安装 1.2安装 Element-Ui 插件 1.3 安装 qs 1.4  安装 Mock 2.新建一个vue工程, ...