如果点击某个div层置顶显示的话
需要用到Z-index 值
而使用zIndex值 就必须对元素进行绝对定位
可以用如下方法 让被点击的层置顶
//创建一个公共Z值var z=999
//然后获取所有div
var aDiv=document.getElementsByTagName('div')
//遍历元素
for(var i=0i<aDiv.lengthi++){
//添加事件
aDiv[i].onclick=function(){
//控制当前点击的div每次点击就z++
//比如这次点击了z值到了1000
//然后下一个div点击的时候
//把这个值赋给他 然后他还++一次 变成1001
//这样那个又是最高的了
this.style.zIndex=z++
}
}
<html><body>
<ul>
<li onclick="topLine(event)">111</li>
<li onclick="topLine(event)">222</li>
<li onclick="topLine(event)">333</li>
</ul>
</body>
</html>
<script type="text/javascript">
//思路：获取当前行，复制，删除，插入到第一行。
var topLine = function(event){
event = event || window.event
var t = event.currentTarget,$t = $(t)
var html = t.outHTML
$t.remove()
$t.parent().find('li:first-child').before(html)
}
</script>
1、加入语音提示<audio id="sound" autoplay="autoplay">
动态加入播放语音文件代码：
document.getElementById("sound").src="<%=basePath%>admin/media/global.wav"
2、动态弹出消息提示框：
在此处我导入了jquery.gritter.js和jquery.gritter.css,具体实现代码：
jQuery(document).ready(function() {
setInterval(function(){
$.post('ajax/linecheck',function(data){
var json=eval("("+data+")")
$.each(json,function(index,item){
$("#line"+item.id).html("")
$.each(item.localList,function(index,item2){
if(item2.attendOCList!=""){
$("#line"+item.id).append("<li class='in' id='in"+item2.id+"'><div class='avatar'>"
+item2.location+"</div><div class='message'><ul id=li"+item2.id+"></ul></div></li>")
}
$.each(item2.attendOCList,function(index,item3){
if(item3.status==0){
$("#li"+item2.id).append("<li class='user'><span class='username'>"+item3.person_name
+"</span><br><span style='color:red' class='username'>时间: "
+ item3.today+" "+item3.times +"</span><br><span class='username'>电话:"
+item3.person_phone+"</span><br><span class='username'>身份证:"
+item3.card_id+"</span></li><hr>")
}else{
$("#li"+item2.id).append("<li class='user'><span class='username'>"
+item3.person_name+"</span><br><span style='color:red' class='username'>时间: "
+ item3.today+" "+item3.times +"</span><br><span class='username'>电话:"
+item3.person_phone+"</span><br><span class='username'>身份证:"
+item3.card_id+"</span></li><hr>")
document.getElementById("sound").src="<%=basePath%>admin/media/global.wav"
setTimeout(function () {
var unique_id = $.gritter.add({
title: item3.person_name+"("+item2.location+")",
text:"<span class='username'>"+item3.person_name
+"</span><br><span style='color:red' class='username'>时间: "
+ item3.today+" "+item3.times +"</span><br><span class='username'>电话:"
+item3.person_phone+"</span><br><span class='username'>身份证:"+item3.card_id+"</span>",
sticky: true,
time: '',
class_name: 'my-sticky-class'
})
setTimeout(function () {
$.gritter.remove(unique_id, {
fade: true,
speed: 'slow'
})
}, 12000)
}, 2000)
}
})
})
