JS实用的动画弹出层效果实例


Posted in Javascript onMay 05, 2015

本文实例讲述了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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<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>

效果如下图所示:

JS实用的动画弹出层效果实例

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
二叉树的非递归后序遍历算法实例详解
Feb 07 Javascript
jQuery子属性过滤选择器用法分析
Feb 10 Javascript
JavaScript实现网页对象拖放功能的方法
Apr 15 Javascript
js实现滚动条滚动到页面底部继续加载
Dec 19 Javascript
Javascript 实现微信分享(QQ、朋友圈、分享给朋友)
Oct 21 Javascript
jQuery扩展+xml实现表单验证功能的方法
Dec 25 Javascript
Js判断H5上下滑动方向及滑动到顶部和底部判断的示例代码
Nov 15 Javascript
代码整洁之道(重构)
Oct 25 Javascript
vue2.0移动端滑动事件vue-touch的实例代码
Nov 27 Javascript
js数据类型转换与流程控制操作实例分析
Dec 18 Javascript
js实现div色块拖动录制
Jan 16 Javascript
js实现随机圆与矩形功能
Oct 29 Javascript
js日期范围初始化得到前一个月日期的方法
May 05 #Javascript
javascript实现捕捉键盘上按下的键
May 05 #Javascript
js中this用法实例详解
May 05 #Javascript
javascript中返回顶部按钮的实现
May 05 #Javascript
JS简单实现动画弹出层效果
May 05 #Javascript
教你使用javascript简单写一个页面模板引擎
May 05 #Javascript
关于延迟加载JavaScript
May 05 #Javascript
You might like
PHP面向对象——访问修饰符介绍
2012/11/08 PHP
php中explode函数用法分析
2014/11/15 PHP
如何使用php实现评委评分器
2015/07/31 PHP
Yii全局函数用法示例
2017/01/22 PHP
PHP使用Redis实现防止大并发下二次写入的方法
2017/10/09 PHP
IE事件对象(The Internet Explorer Event Object)
2012/06/27 Javascript
DWZ table的原生分页浅谈
2013/03/01 Javascript
js中settimeout方法加参数的使用实例
2014/02/27 Javascript
JavaScript中继承用法实例分析
2015/05/16 Javascript
JavaScript实现标题栏文字轮播效果代码
2015/10/24 Javascript
基于javascript实现根据身份证号码识别性别和年龄
2016/01/22 Javascript
通用无限极下拉菜单的实现代码
2016/05/31 Javascript
Angularjs 制作购物车功能实例代码
2016/09/14 Javascript
jQuery实现两个select控件的互移操作
2016/12/22 Javascript
深入对Vue.js $watch方法的理解
2017/03/20 Javascript
node安装--linux下的快速安装教程
2017/03/21 Javascript
express框架实现基于Websocket建立的简易聊天室
2017/08/10 Javascript
vue框架搭建之axios使用教程
2018/07/11 Javascript
Node.JS用纯JavaScript生成图片或滑块式验证码功能
2019/09/12 Javascript
这15个Vue指令,让你的项目开发爽到爆
2019/10/11 Javascript
js实现轮播图效果 z-index实现轮播图
2020/01/17 Javascript
js实现简单的贪吃蛇游戏
2020/04/23 Javascript
[56:21]LGD vs IG 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
linux系统使用python获取cpu信息脚本分享
2014/01/15 Python
Python随机生成彩票号码的方法
2015/03/05 Python
深入解析Python中的list列表及其切片和迭代操作
2016/03/13 Python
Python使用sklearn实现的各种回归算法示例
2019/07/04 Python
详解python UDP 编程
2020/08/24 Python
洛杉矶健身中心女性专用运动服饰品牌:Marika
2018/05/09 全球购物
意大利体育用品和运动服网上商店:Maxi Sport
2019/09/14 全球购物
澳大利亚窗帘商店:Curtain Wonderland
2019/12/01 全球购物
国家助学金获奖感言
2014/01/31 职场文书
向国旗敬礼活动总结
2014/09/27 职场文书
信息简报范文
2015/07/21 职场文书
CKAD认证中部署k8s并配置Calico插件
2022/03/31 Servers
Alexa停服!网站排名将何去何从?目前还没有替代品。
2022/04/15 杂记