|
|
当前位置: 站长天下 / 表单抽奖 / html5手机重力摇一摇抽奖代码插件带音乐
html5手机重力摇一摇抽奖代码插件带音乐
标签:

插件介绍

    一款html5手机重力摇一摇抽奖代码插件,带有音乐的手机摇一摇开奖。

    浏览器兼容性

    浏览器兼容性
    时间:2018-06-30
    阅读:

html5手机重力摇一摇抽奖代码插件带音乐

简要教程

一款html5手机重力摇一摇抽奖代码插件,带有音乐的手机摇一摇开奖。

HTML结构

<!-- 红包音乐 -->
<audio id="shakemusic" src="music/red-01.mp3" style="display: none;"></audio> 
<audio id="openmusic" src="music/red-02.mp3" style="display: none;"></audio> 
<!-- End 红包音乐 -->
<!-- 红包 -->
<div class="red_bg"> 
<div class="red-ts"></div> 
<div class="red-ss-bg"> 
<span class="red-ss animated"></span> 
</div> 
<div class="red-jh"> 
您还有<span>3</span>次机会 
</div> 
<div class="red-tc"> 
<!-- 已中奖 -->
<div class="red-yzj"> 
<div class="red-tc-k"> 
<p>¥<span>50.00</span>元</p> 
恭喜你获得</br>打包幸福代金券 
</div> 
<div class="red-tc-btn"> 
<button>查看优惠券</button> 
</div> 
</div> 
<!-- End 已中奖 -->
<!-- 未中奖 -->
<!-- <div class="red-yzj"> 
<div class="red-tc-k"> 
<img src="img/red-bw.png"> 
哎呀!</br>您的优惠券被风刮走了啊 
</div> 
<div class="red-tc-btn"> 
<button>再摇一次</button> 
</div> 
</div> -->
<!-- End 未中奖 -->
<!-- 机会用光了 -->
<!-- <div class="red-yzj"> 
<div class="red-tc-k"> 
<img src="img/red-jh.png"> 
机会用光了哦!</br>明天再来吧! 
</div> 
<div class="red-tc-btn"> 
<button>返回主页</button> 
</div> 
</div> -->
<!-- End 机会用光了 -->
</div> 
</div> 
<!-- End 红包 -->


网友评论

网友评论