主页 / 网络编程 /

JS简单实现动画弹出层效果

网络编程 2021-07-04 21:47www.168986.cn编程入门
本文给大家介绍的是是一款javascript弹出层特效,支持点击触发js弹出层,滑过触发js弹出层,带动画效果js弹出层,可自定义函数回调js弹出层。

JS简单实现动画弹出层效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://.w3./TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://.w3./1999/xhtml">
<head>
<title>动画弹出层</title>
<style>
.list{
position:relative;;
background:#eee;
border:1px #c 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 ;
}
.ment{
position:absolute;
left:0;
display:none;
position:absolute;
border:1px #c 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="ment" id="ment1">内容显示111<br/>
</div>
<div class="list" id="list2">2
<div class="ment" id="ment2">内容显示222</div>
</div>
<div class="list" id="list3">3
<div class="ment" id="ment3">内容显示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.ment=null;
this.moveLeft=80; 
this.moveTop=20;
this.height=150;
this.width=250;
this.time=800;
this.init=function(lisObj,Obj){
this.list=lisObj;
this.ment=Obj;
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.ment.style.display||_this.ment.style.display=="none"){
_this.ment.style.display="block";
_this.ment.style.height=0+"px";
_this.ment.style.width=0+"px";
_this.list.style.zIndex=++zindex;
_this.list.className="listShow";
var ment=_this.ment.innerHTML; 
_this.ment.innerHTML=""; //去掉显示内容
var timer=setInterval(function(){
var newTime = new Date().getTime();
var timestamp = newTime - startTime;
_this.ment.style.left=Math.ceil(w)+"px";
_this.ment.style.=Math.ceil(h)+"px";
_this.ment.style.height=height+"px";
_this.ment.style.width=width+"px";
t++;
var change=(Math.pow((timestamp/_this.time-1), 3) +1); //根据运行时间得到基础变化量
w=_this.moveLeftchange;
h=_this.moveTopchange;
height=_this.heightchange;
width=_this.widthchange;
$id("show").innerHTML=w;
if(w>_this.moveLeft){
clearInterval(timer);
_this.ment.style.left=_this.moveLeft+"px";

_this.ment.style.=_this.moveTop+"px"; _this.ment.style.height=_this.height+"px";

_this.ment.style.width=_this.width+"px";
_this.ment.innerHTML=ment; //回复显示内容
}
},1,_this.ment);
}else{
_this.hidden();
}
}
this.hidden=function(){
var _this=this;
var flag=1;
var hiddenTimer=setInterval(function(){
if(flag==1){
_this.ment.style.height=parseInt(_this.ment.style.height)-10+"px";
}else{ _this.ment.style.width=parseInt(_this.ment.style.width)-15+"px";
_this.ment.style.left=parseInt(_this.ment.style.left)+5+"px";
}
if(flag==1 && parseInt(_this.ment.style.height)<10){
flag=-flag;
}
if(parseInt(_this.ment.style.width)<20){
clearInterval(hiddenTimer);
_this.ment.style.left="0px";
_this.ment.style.="0px";
_this.ment.style.height="0px";
_this.ment.style.width="0px";
_this.ment.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("ment1"));
var shower2=new Shower();
shower2.init($id("list2"),$id("ment2"));
var shower3=new Shower();
shower3.init($id("list3"),$id("ment3"));
}
</script>

以上所述就是本文的全部内容了，希望大家能够喜欢。

上一篇：javascript中返回顶部按钮的实现 下一篇：教你使用javascript简单写一个页面模板引擎

编程语言

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by