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 相关文章推荐
动态的改变IFrame的高度实现IFrame自动伸展适应高度
Dec 28 Javascript
jquery设置text的值示例(设置文本框 DIV 表单值)
Jan 06 Javascript
jQuery获取节点和子节点文本的方法
Jul 22 Javascript
laytpl 精致巧妙的JavaScript模板引擎
Aug 29 Javascript
JavaScript实现同步于本地时间的动态时间显示方法
Feb 02 Javascript
JS实现横向拉伸动感伸缩菜单效果代码
Sep 04 Javascript
JS实现随机颜色的3种方法与颜色格式的转化
Jan 05 Javascript
angularJs中datatable实现代码
Jun 03 Javascript
小程序:授权、登录、session_key、unionId的详解
May 15 Javascript
解决layer 动态加载select 失效的问题
Sep 18 Javascript
p5.js临摹动态图形的方法
Oct 23 Javascript
微信小程序实现签字功能
Dec 23 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下使用SMTP发邮件的代码
2008/01/10 PHP
php实现天干地支计算器示例
2014/03/14 PHP
php计算年龄精准到年月日
2015/11/17 PHP
使用 laravel sms 构建短信验证码发送校验功能
2017/11/06 PHP
PHP获取对象属性的三种方法实例分析
2019/01/03 PHP
PHP7 其他修改
2021/03/09 PHP
层序遍历在ExtJs的TreePanel中的应用
2009/10/16 Javascript
js调用AJAX时Get和post的乱码解决方法
2013/06/04 Javascript
javascript数组去重方法终极总结
2014/06/05 Javascript
javascript实现链接单选效果的方法
2015/05/13 Javascript
jQuery增加自定义函数的方法
2015/07/18 Javascript
关于JS中二维数组的声明方法
2016/09/24 Javascript
浅谈bootstrap使用中的一些问题以及解决过程
2016/10/18 Javascript
BootStrap Table后台分页时前台删除最后一页所有数据refresh刷新后无数据问题
2016/12/28 Javascript
jQuery中Datatables增加跳转到指定页功能
2017/02/08 Javascript
vue iview实现动态路由和权限验证功能
2018/04/17 Javascript
AngularJs分页插件使用详解
2018/06/30 Javascript
详解三种方式解决vue中v-html元素中标签样式
2018/11/22 Javascript
Angular封装搜索框组件操作示例
2019/04/25 Javascript
[01:17]Ti4 循环赛第一日回顾
2014/07/11 DOTA
[01:16:16]DOTA2-DPC中国联赛定级赛 RNG vs Phoenix BO3第二场 1月8日
2021/03/11 DOTA
python基于mysql实现的简单队列以及跨进程锁实例详解
2014/07/07 Python
python读取xlsx的方法
2018/12/25 Python
Pycharm设置utf-8自动显示方法
2019/01/17 Python
tensorflow模型文件(ckpt)转pb文件的方法(不知道输出节点名)
2020/04/22 Python
Python requests及aiohttp速度对比代码实例
2020/07/16 Python
美国一家全面的在线零售鞋类公司:SHOEBACCA
2017/01/06 全球购物
巴黎卡诗美国官方网站:始于1964年的头发头皮护理专家
2017/07/10 全球购物
一套.net面试题及答案
2016/11/02 面试题
环保公益广告语
2014/03/13 职场文书
珍惜资源保护环境的建议书
2014/05/14 职场文书
法院授权委托书范文
2014/08/02 职场文书
组工干部演讲稿
2014/09/02 职场文书
安全先进班组材料
2014/12/26 职场文书
导游词之河北滦平金山岭长城
2019/10/16 职场文书
详解pytorch创建tensor函数
2022/03/22 Python