漂亮的弹出层效果
来源:互联网 发布:淘宝供销平台怎么填写 编辑:程序博客网 时间:2024/04/20 08:23
需要实现的功能:
简单的说:
一个表格,显示的是“标题”,
点击“显示”按钮,该行往下展开,显示“内容”信息。
再点击“隐藏”按钮,该行收缩回来,只显示“标题”信息。
效果类似:
http://social.microsoft.com/Forums/zh-CN/295/threads
弱弱的找了个类似功能的代码
源码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
body {
font: 12px/1.6em Tahoma,Verdana;
PADDING-TOP: 0px;
background-color: #016394;
line-height: 16.8px;
}
A {
FONT-SIZE: 12px;
TEXT-DECORATION: underline;
}
.list{
position:relative;;
background:#eee;
border:1px #ccc solid;
margin:10px;
height:30px;
width:100px;
cursor :pointer ;
}
.listShow{
position:relative;
background:#eff;
border:1px #ddd solid;
margin:10px;
height:30px;
width:100px;
cursor :pointer ;
}
.comment{
position:absolute;
left:0;
display:none;
position:absolute;
border:1px #ccc solid;
background:#fee;
width:200px;
height:200px;
overflow:hidden;
z-index:100;
}
</style>
</head>
<body>
<div class="list" id="list1"><a href="http://www.378q.com.cn" target="_blank">三七八蛋</a>
<div class="comment" id="comment1">
<a href="http://www.378q.com.cn/seo/" target="_blank">SEO</a><br/>
<a href="http://cms.378q.com.cn" target="_blank">CMS</a><br/>
<a href="http://oa.378q.com.cn" target="_blank">OA</a><br/>
<a href="http://www.378q.com.cn/s/" target="_blank">微博客</a><br/>
<a href="http://www.378q.com.cn/link/" target="_blank">网址导航</a></div>
</div>
<div class="list" id="list2"><a href="http://www.378q.com.cn/post/141.html" target="_blank">BT原创</a>
<div class="comment" id="comment2">
<a href="http://www.378q.com.cn/post/139.html" target="_blank">亚洲骑兵</a><br/>
<a href="http://www.378q.com.cn/post/137.html" target="_blank">亚洲步兵</a><br/>
<a href="http://www.378q.com.cn/post/135.html" target="_blank">欧美步兵</a><br/>
</div>
</div>
<div class="list" id="list3"><a href="http://www.378q.com.cn/post/133.html" target="_blank">BT转贴</a>
<div class="comment" id="comment3">
<a href="http://www.378q.com.cn/post/129.html" target="_blank">亚洲骑兵</a><br/>
<a href="http://www.378q.com.cn/post/128.html" target="_blank">亚洲步兵(小于500M) </a><br/>
<a href="http://www.378q.com.cn/post/123.html" target="_blank">亚洲步兵(大于等于500M) </a><br/>
<a href="http://www.378q.com.cn/post/122.html" target="_blank">欧美步兵</a><br/>
</div>
</div>
<div class="list" id="list4"><a href="http://www.378q.com.cn" target="_blank">迅雷下载</a>
<div class="comment" id="comment4">
<a href="http://www.378q.com.cn" target="_blank">HTTP迅雷小格式(小于200M)</a><br/>
<a href="http://www.378q.com.cn" target="_blank">HTTP迅雷大格式(大于等于200M)</a><br/>
</div>
</div>
<div class="list" id="list5"><a href="http://www.378q.com.cn/post/119.html" target="_blank">唯美图坊</a>
<div class="comment" id="comment5">
<a href="http://www.378q.com.cn/post/117.html" target="_blank">原创精品套图</a><br/>
<a href="http://www.378q.com.cn/post/114.html" target="_blank">图卡通贴图区</a><br/>
<a href="http://www.378q.com.cn/post/113.html" target="_blank">网友自拍贴图区</a><br/>
</div>
</div>
<div class="list" id="list6"><a href="http://www.378q.com.cn/post/107.html" target="_blank">在线视频</a>
<div class="comment" id="comment6">
<a href="http://www.378q.com.cn/post/97.html" target="_blank">新奇视频版</a><br/>
</div>
</div>
</body>
</html>
<script>
var zindex=0;
function $id(id){
return document.getElementById(id);
}
var Bind = function(object,fun){
var args = Array.prototype.slice.call(arguments).slice(2);
return function(){
return fun.apply(object,args);
}
}
function addEventHandler(oTarget, sEventType, fnHandler){
if(oTarget.addEventListener){oTarget.addEventListener(sEventType, fnHandler, false);}
else if(oTarget.attachEvent){oTarget.attachEvent('on' + sEventType, fnHandler);}
else{oTarget['on' + sEventType] = fnHandler;}
}
var Shower=function(){
this.list=null;
this.comment=null;
this.moveLeft=80; //弹出div的水平偏移距离
this.moveTop=20; //弹出div的竖直偏移距离
this.height=150; //弹出div的高
this.width=250; //弹出div的宽
this.time=800; //弹出div所用时间
this.init=function(lisObj,comObj){
this.list=lisObj;
this.comment=comObj;
var _this=this;
this._fnMove=Bind(this,this.move);
(function(){
var obj=_this;
addEventHandler(obj.list,"click",obj._fnMove);
})();
};
this.move=function(){
var _this=this;
var w=0; //水平偏移
var h=0; //竖直偏移
var height=0; //弹出div的高
var width=0; //弹出div的宽
var t=0;
var startTime = new Date().getTime();//开始执行的时间
if(!_this.comment.style.display||_this.comment.style.display=="none"){
_this.comment.style.display="block";
_this.comment.style.height=0+"px";
_this.comment.style.width=0+"px";
_this.list.style.zIndex=++zindex;
_this.list.className="listShow";
var comment=_this.comment.innerHTML;
_this.comment.innerHTML=""; //去掉显示内容
var timer=setInterval(function(){
var newTime = new Date().getTime();
var timestamp = newTime - startTime;
_this.comment.style.left=Math.ceil(w)+"px";
_this.comment.style.top=Math.ceil(h)+"px";
_this.comment.style.height=height+"px";
_this.comment.style.width=width+"px";
t++;
var change=(Math.pow((timestamp/_this.time-1), 3) +1); //根据运行时间得到基础变化量
w=_this.moveLeft*change;
h=_this.moveTop*change;
height=_this.height*change;
width=_this.width*change;
if(w>_this.moveLeft){
clearInterval(timer);
_this.comment.style.left=_this.moveLeft+"px";
_this.comment.style.top=_this.moveTop+"px";
_this.comment.style.height=_this.height+"px";
_this.comment.style.width=_this.width+"px";
_this.comment.innerHTML=comment; //回复显示内容
}
},1,_this.comment);
}else{
_this.hidden();
}
}
this.hidden=function(){
var _this=this;
var flag=1;
var hiddenTimer=setInterval(function(){
if(flag==1){
_this.comment.style.height=parseInt(_this.comment.style.height)-10+"px";
}else{
_this.comment.style.width=parseInt(_this.comment.style.width)-15+"px";
_this.comment.style.left=parseInt(_this.comment.style.left)+5+"px";
}
if(flag==1 && parseInt(_this.comment.style.height)<10){
flag=-flag;
}
if(parseInt(_this.comment.style.width)<20){
clearInterval(hiddenTimer);
_this.comment.style.left="0px";
_this.comment.style.top="0px";
_this.comment.style.height="0px";
_this.comment.style.width="0px";
_this.comment.style.display="none";
if(_this.list.style.zIndex==zindex){
zindex--;
};
_this.list.style.zIndex=0;
_this.list.className="list";
}
},1)
}
}
window.onload=function(){
//建立各个菜单对象
var shower1=new Shower();
shower1.init($id("list1"),$id("comment1"));
var shower2=new Shower();
shower2.init($id("list2"),$id("comment2"));
var shower3=new Shower();
shower3.init($id("list3"),$id("comment3"));
var shower4=new Shower();
shower4.init($id("list4"),$id("comment4"));
var shower5=new Shower();
shower5.init($id("list5"),$id("comment5"));
var shower6=new Shower();
shower6.init($id("list6"),$id("comment6"));
}
</script>
- 漂亮的弹出层效果
- Ajax弹出漂亮可拖动的提示层(窗)效果
- 强烈推荐,功能强大,超漂亮的弹出层效果
- 制作漂亮的弹出层
- 超漂亮的仿腾讯弹出层效果(兼容主流浏览器)
- 漂亮的javascript对话框(弹出层)组件
- 一个漂亮的浮动层效果
- Javascript弹出层的效果
- 弹出层效果的制作
- Web前端设计模式--制作漂亮的弹出层...
- 可拖拽移动漂亮的zDialog弹出层代码
- Web前端设计模式--制作漂亮的弹出层
- 一个简单又漂亮的JS弹出窗体效果
- 项目开发经验分享—漂亮的弹出框效果
- 一个流行的弹出层的效果
- 一个流行的弹出层的效果
- 一个流行的弹出层的效果!
- 可拖动的弹出层提示效果
- javascript1
- 难得的机遇,巨大的挑战
- 晶体三极管工作原理
- suningin详解笔试面试题
- 自动化侦查工具
- 漂亮的弹出层效果
- tomcat解析(十五)StandardContext.start的其它内容
- 三网融合--移动淡定
- DOS 开远程桌面服务 SQL执行
- 移动MM要走进大学!
- 设置中的字体大小?
- 嵌入式Linux之我行——嵌入式数据库sqlite在2440上的移植(转)
- Ubuntu系统目录结构
- 杯具”箴言成网络流行语