JS簡單實現動畫彈出層效果

2024-05-06 16:19:21

字體：大中小

來源：轉載

供稿：網友

本文給大家介紹的是是一款javascript彈出層特效,支持點擊觸發js彈出層,滑過觸發js彈出層,帶動畫效果js彈出層,可自定義函數回調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">內容顯示111<br/>

</div>

<div class="list" id="list2">2

<div class="comment" id="comment2">內容顯示222</div>

</div>

<div class="list" id="list3">3

<div class="comment" id="comment3">內容顯示333</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>