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

myfreespace

浏览: 228484 次
性别:
来自: 北京

最近访客更多访客>>

zjy_369

Qlancet

msconfigs

mxl154265

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javascript 冒泡效果新浪微薄

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

下面是一个简单的例子，通过一个定义了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
顶

0
踩

分享到：

phpexcel 生成表格 | js 标签切换功能

2011-08-25 00:10
浏览 1384
评论(3)
分类:Web前端
查看更多

3 楼 myfreespace 2011-11-23

嗯谢谢提示，正在修改中

2 楼王斌_code 2011-11-18

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

1 楼王斌_code 2011-11-18

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

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

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

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

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

评论

发表评论

相关推荐

最近访客更多访客>>

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