<!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. C++全总结

    // CPPTEST.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include<iostream> #include & ...

  2. 新手C#int.Parse、int.TryParse的学习2018.08.04

    int.Parse()用于将字符串转换为32为int类型,但是在遇到非数字或者类似1.545这种小数的时候会报错,后来采用了int.TryParse,这个在转换后会判断是否可以正常转换,若不能,会返回 ...

  3. How To Use Google Flags

    ［How To Use Google Flags］ 1.Commandline flags are flags that users specify on the command line when ...

  4. linux install jupyter notebook

    install sudo pip install jupyter notebook start sudo jupyter notebook 一般,文件目录默认在你启动的位置.你可以在notebook里 ...

  5. 裸函数naked解析

    先分享一个案例: #include <stdio.h> __declspec(naked) void Test() { int x; x = ; __asm ret; } int main ...

  6. Linux汇编与C互相调用

    一.简介 C语言调用汇编有两种方式:1.通过内嵌汇编  2.通过编译链接. 二.基础知识 对于C和汇编语言的接口主要有两个问题需要解决 1.调用者与被调用者的参数传递 正常的,定义一个函数总是希望它完 ...

  7. Linux enca命令

    一.简介 enca是Linux下的文件编码转换工具. 二.安装 http://dl.cihar.com/enca/   http://www.2cto.com/os/201404/295528.htm ...

  8. java 控制反转和依赖注入的理解

    开始好好学习java基础和思想~ 控制反转(IOC)是Spring框架的核心思想,用我自己的话说,就是你要做一件事,别自己可劲new了,你就说你要干啥,然后外包出去就好~ 依赖注入(DI) 在我浅薄的 ...

  9. [C#] == VS Equals

    声明:本篇博客翻译自:https://www.codeproject.com/Articles/1111680/equalsequals-VS-Equals-in-Csharp 由于水平(技术水平+英 ...

  10. viewDidAppear在何时调用？

    [viewDidAppear在何时调用] If the view belonging to a view controller is added to a view hierarchy directl ...