奉獻一個實用的JS動畫彈出層效果_層和布局特效

奉獻一個實用的JS動畫彈出層效果,只作了一些簡單的彈出顯示和隱藏，主要是想把一個標題和一個彈出菜單當成一個類來考慮，需要修改的地方還有不少，先提供給大家供研究。

<!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>
<title>動畫彈出層</title>
<style>
.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="" id="show">
0
</div>
<div class="list" id="list1">1
	<div class="comment" id="comment1">模板無憂<br/>
</div>
<div class="list" id="list2">2
	<div class="comment" id="comment2">mb5u.com</div>
</div>
<div class="list" id="list3">3
	<div class="comment" id="comment3">網頁特效</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;  
		this.moveTop=20;
		this.height=150;
		this.width=250;
		this.time=800;
		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;
						$id("show").innerHTML=w;
							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"));

}
</script>

所屬頻道：層和布局特效/更新時間：2012-11-09

[收藏][報錯][返回列表]

相關層和布局特效：

奉獻一個實用的JS動畫彈出層效果_層和布局特效

層和布局特效Rss訂閱特效代碼搜索

層和布局特效推薦

猜你也喜歡看這些