<!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. ArrayList原理(一)

    需要使用到动态数组的时候用的最多的就是ArrayList了,底层其实是Object数组,以下demo基于JDK1.8: List<Integer> list  = new ArrayLis ...

  2. nginx错误页面重定向

    一.Nginx错误页面优雅显示的原因?   当我们访问网站时,由于特殊的原因,经常会出现诸如403,404,503等错误,这极大的影响用户的访问体验,所以我们很有必要做一下错误页面的优雅显示,以提升用 ...

  3. FME2010 案例分析: 动态批量转换

    Link: http://blog.163.com/antufme@126/blog/static/140492492201022545726452/?suggestedreading&wum ...

  4. rdd去重

    a=[[1,2,3,2,3,4],[3,4,5,6,7,5,3,2]]b=sc.parallelize(a) d=b.flatMap(lambda x:x)  #铺平 ,形成一个rdd e=d.dis ...

  5. 46. Permutations (Back-Track,Sort)

    Given a collection of numbers, return all possible permutations. For example,[1,2,3] have the follow ...

  6. 关于ueditor使用说明

    1.后台配置文件config.json中的各种prefix,相对的都是网站(发布后的)的根目录, 2.需要在iis下将net文件夹转换为应用程序 3.<div>    <h1> ...

  7. ROS标定IDS相机

    参考 ROS 相机标定http://blog.csdn.net/ArtistA/article/details/51125560 ROS里的标定程序只要使用了OPNCV的标定程序: opencv 相机 ...

  8. [Java] 通过XPath获取XML中某个节点的属性

    /** * Get PA Url * @author jzhang6 * @return url */ public String getPAUrl(){ String PAUrl = "& ...

  9. Linux系统下安装ncurses库

    ncurses库是一个Linux系统下的图形支持的函数库,字符终端处理库,包括面板和菜单. 今天在安装ncurses库的时候遇到了一些问题,现将遇到的问题所叙如下: 首先说明:本次安装采用的是源码包的 ...

  10. 在VMware中设置CentOS7的网络

    为了能够使用XShell来管理我们安装好的CentOS7系统,所以我们要先设置CentOS7的网络使其能够联网.  1.选择vmware的编辑,然后点击虚拟网络编辑器     2.点击更改设置(需要有 ...