仿照新浪微薄删除冒泡提示效果

模仿新浪微薄删除冒泡提示效果

看新浪微薄的冒泡删除效果挺不错，大大提升了用户的体验，大致想了个思路，只实现了基本的效果，还要加上鼠标点位，弹出层的写入等操作。

下面是一个简单的例子，通过一个定义了position:absolute属性的层作为遮罩层，然后通过setInterval()来改变内容层的bottom属性：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>测试</title>
</head>
<body>
<style type="text/css">
.eg{width:20px;height:14px;margin-left:250px;color:#000;text-decoration:none;}
.yin{width:120px;height:80px;overflow:hidden;position:absolute;left:210px;top:300px;}
#nay{width:116px;height:30px;margin-top:5px;background-color:#fff;position:relative;border:1px solid #ccc;box-shadow:4px 4px 4px #333;}
</style>
<script type="text/javascript">
/**
 * 模仿新浪微薄 删除冒泡提示
 * 用一个div作为遮罩层 设置这个div的position:absolute
 * 内容层设置position:relative 通过setInterval来改变
 * 内容层的bottom值，
 */
function maopao(pid,ev){
	var topH = 2;
	var timer = setInterval(function(){
		var NtopH = document.getElementById('nay').style.bottom;
		NtopH = NtopH.replace('px','');
		NtopH = parseInt(NtopH);
		if(NtopH > -1){
			clearInterval(timer);
		}else{
			document.getElementById('nay').style.bottom = (NtopH + 20) + "px";
		}
		},100);
	
}
function quxiao(){
	var topH = -80;
	var timer = setInterval(function(){
		var NtopH = document.getElementById('nay').style.bottom;
		NtopH = NtopH.replace('px','');
		NtopH = parseInt(NtopH);
		if(NtopH < -80){
			clearInterval(timer);
		}else{
			document.getElementById('nay').style.bottom = (NtopH - 20) + "px";
		}
		},100);	
}
</script>
js冒泡弹出<br/>
<hr/>
<br/>
<br/>
<div style="width:300px;height:300px;margin:0 auto;border:1px solid #ccc;">
	
</div>

<div id='lay' class='yin'>
	<div id='nay' style="bottom:-80px"><button>确定</button> <button onclick="quxiao()">取消</button></div>
</div>
<a class="eg" onclick="maopao('lay',this)" href="javascript:void(0)">删除</a>
</body>
</html>

1 楼王斌_code 2011-11-18

效果有点生硬，用jquery可以省不少事，而且效果很好

2 楼王斌_code 2011-11-18

有bug,先点删除，再点取消，在冒泡消失前，点击删除（构造事件的多重触发），再点击删除，就会出现问题了！没有加入到事件的多重触发导致的事件紊乱的机制

3 楼 myfreespace 2011-11-23

嗯谢谢提示，正在修改中

仿照新浪微薄 删除冒泡提示效果

相关推荐

仿照新浪微薄删除冒泡提示效果