效果如下:
前台代码
<!-- 使用h5写的提醒图片-->
<style>
.tx{ width:38px;height:30px;display:inline- block;background:url("../../../images/sos.gif") no-repeat;position:relative;top:5px;left:3px;<!-- 使用h5写的提醒图片-->
}
</style>
<!--下载的音乐 -->
<a href="#" id="MsgNum"><i onclick="remind()"><i class="hasxx"></i></i></a>
<audio autoplay="autoplay" loop="loop" id="remindSound"></audio><!--下载的音乐 -->
<!--当进入时候就会执行方法-->
$(document).ready(function (){
remindTasking();
});
<!--执行完以下代码之后为重点:添加提示图片以及音乐-->
function remindTasking(){
$.ajax({
url: "/remind/remindList.html",
type: "post",
dataType:"json",
cache: false,
async: false,
success: function(data){//请求成功之后
if(data.length>0){//如果有数据
$('#MsgNum').attr("title","你有"+data.length+"条未读消息");
$('#recolor').attr("color","red");
$("#remindSound").attr("src","../../../music/7821.mp3");//添加音乐
$('#MsgNum .hasxx').addClass('tx');//添加显示的图片
}else{ //如果没有数据
$("#remindSound").attr("src","");//将音乐清空
$('#recolor').attr("color","white");
$('#MsgNum .hasxx').removeClass('tx');//将显示的提示图片去掉
}
}
})
}
如果有数据此时会有图片音乐,如上图所示:
注: (1)后台代码我就不写了;
(2)添加音乐使用的标签:
(3)图片就不多说了;
希望对你有用