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>
<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>

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

Javascript 相关文章推荐
JS替换字符串中字符即替换全部而不是第一个
Jun 04 Javascript
JS面向对象基础讲解(工厂模式、构造函数模式、原型模式、混合模式、动态原型模式)
Aug 16 Javascript
EasyUI实现二级页面的内容勾选的方法
Mar 01 Javascript
JQuery核心函数是什么及使用方法介绍
May 03 Javascript
js遮罩效果制作弹出注册界面效果
Jan 25 Javascript
Vue 2.0学习笔记之Vue中的computed属性
Oct 16 Javascript
微信小程序异步处理详解
Nov 10 Javascript
Angular6新特性之Angular Material
Dec 28 Javascript
vue项目前端知识点整理【收藏】
May 13 Javascript
基于Node.js搭建hexo博客过程详解
Jun 25 Javascript
vue使用showdown并实现代码区域高亮的示例代码
Oct 17 Javascript
浅谈Vue使用Cascader级联选择器数据回显中的坑
Oct 31 Javascript
教你使用javascript简单写一个页面模板引擎
May 05 #Javascript
关于延迟加载JavaScript
May 05 #Javascript
Javascript闭包(Closure)详解
May 05 #Javascript
javascript实现仿IE顶部的可关闭警告条
May 05 #Javascript
JS实现点击按钮后框架内载入不同网页的方法
May 05 #Javascript
JS实现随机乱撞彩色圆球特效的方法
May 05 #Javascript
jquery实现图片随机排列的方法
May 04 #Javascript
You might like
PHP下操作Linux消息队列完成进程间通信的方法
2010/07/24 PHP
PHP的加密方式及原理
2012/06/14 PHP
理解Javascript_14_函数形式参数与arguments
2010/10/20 Javascript
当前页禁止复制粘贴截屏代码小集
2013/07/24 Javascript
javascript 通用loading动画效果实例代码
2014/01/14 Javascript
JavaScript 学习笔记之操作符
2015/01/14 Javascript
对JavaScript客户端应用编程的一些建议
2015/06/24 Javascript
bootstrapfileinput实现文件自动上传
2016/11/08 Javascript
JS如何设置iOS中微信浏览器的title
2016/11/22 Javascript
详解Html a标签中href和onclick用法、区别、优先级别
2017/01/16 Javascript
vue实现移动端图片裁剪上传功能
2020/08/18 Javascript
Node做中转服务器转发接口
2017/10/18 Javascript
简述Angular 5 快速入门
2017/11/04 Javascript
js数组方法reduce经典用法代码分享
2018/01/07 Javascript
jquery获取select选中值的文本,并赋值给另一个输入框的方法
2018/08/21 jQuery
JS 正则表达式验证密码、邮箱格式的实例代码
2018/10/28 Javascript
解决iview多表头动态更改列元素发生的错误的方法
2018/11/02 Javascript
解决vue elementUI中table里数字、字母、中文混合排序问题
2020/01/07 Javascript
vue组件中传值EventBus的使用及注意事项说明
2020/11/16 Javascript
[03:38]TI4西雅图DOTA2前线报道 71专访
2014/07/08 DOTA
python Django连接MySQL数据库做增删改查
2013/11/07 Python
全面分析Python的优点和缺点
2018/02/07 Python
Python批处理删除和重命名文件夹的实例
2018/07/11 Python
解决Python发送Http请求时,中文乱码的问题
2020/04/30 Python
Python趣味实例,实现一个简单的抽奖刮刮卡
2020/07/18 Python
python 深度学习中的4种激活函数
2020/09/18 Python
乌克兰品牌化妆品和香水在线商店:Bomond
2020/01/14 全球购物
开办加工厂创业计划书
2014/01/03 职场文书
食品安全处置方案
2014/06/14 职场文书
2014年预算员工作总结
2014/12/05 职场文书
2014年个人工作总结模板
2014/12/15 职场文书
吧主申请感言怎么写
2015/08/03 职场文书
Python使用protobuf序列化和反序列化的实现
2021/05/19 Python
《堡垒之夜》联动《刺客信条》 4月7日正式上线
2022/04/06 其他游戏
Windows server 2012 配置Telnet以及用法详解
2022/04/28 Servers
win10壁纸在哪个文件夹 win10桌面背景图片文件位置分享
2022/08/05 数码科技