audio(音频样式)

作者：kevinhehe
版本：v.1
依赖：mocha.css

点击运行Demo

样式1 .mocha-audio-scheme1

<div class="mocha-audio mocha-audio-scheme1 mocha-audio-skin1">
    <a id="mochaAudioPlay" class="mocha-audio-btn" href="javascript:;"><span class="mocha-audio-icon-play"></span></a>
    <a id="mochaAudioPause" class="mocha-audio-btn" href="javascript:;" style="display:none;"><span class="mocha-audio-icon-pause"></span></a>
    <div class="mocha-audio-info">
        <p>音频名称 3'33"</p>
        <p>音频简介内容</p>
    </div>
</div>

audio实例化JS

依赖zepto.js组件

<script src="http://game.gtimg.cn/images/js/zepto/zepto.min.js"></script>
<script>    (function mochaAudioFunc(){        $("#mochaAudioPlay").bind("tap",function(){            $(this).css("display","none");            $("#mochaAudioPause").css("display","inline-block");        })        $("#mochaAudioPause").bind("tap",function(){            $(this).css("display","none");            $("#mochaAudioPlay").css("display","inline-block");        })    })()</script>
    (function mochaAudioFunc(){
        $("#mochaAudioPlay").bind("tap",function(){
            $(this).css("display","none");
            $("#mochaAudioPause").css("display","inline-block");
        })
        $("#mochaAudioPause").bind("tap",function(){
            $(this).css("display","none");
            $("#mochaAudioPlay").css("display","inline-block");
        })
    })()

</script>

修改模块皮肤CSS

模块的默认皮肤类.mocha-audio-skin1，您可以在您项目的page.css里修改.mocha-audio-skin1皮肤类，或者新增.mocha-audio-skin2。

/* skin */
.mocha-audio-skin1{font-size: .16rem;}
.mocha-audio-skin1 .mocha-audio-btn{background-color: #3f3f3f;}
.mocha-audio-skin1 .mocha-audio-icon-play{border-left-color:#fff;}
.mocha-audio-skin1 .mocha-audio-icon-pause{background: linear-gradient(90deg, #fff 37%, transparent 37%, transparent 63%, #fff 63%);}