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 相关文章推荐
漂亮的widgets,支持换肤和后期开发新皮肤
Apr 23 Javascript
JQuery 学习笔记 选择器之五
Jul 23 Javascript
浅谈JavaScript编程语言的编码规范
Oct 21 Javascript
Javacript实现颜色梯度变化和渐变的效果代码
May 31 Javascript
APP中javascript+css3实现下拉刷新效果
Jan 27 Javascript
AngularJs Understanding the Controller Component
Sep 02 Javascript
jquery实现输入框实时输入触发事件代码
Dec 21 Javascript
详解vue组件中使用路由方法
Feb 12 Javascript
使用apifm-wxapi模块中的问题及解决方法
Aug 05 Javascript
vue element upload组件 file-list的动态绑定实现
Oct 11 Javascript
JS实现碰撞检测效果
Mar 12 Javascript
基于JQuery实现页面定时弹出广告
May 08 jQuery
教你使用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
我的论坛源代码(五)
2006/10/09 PHP
php获取ip的三个属性区别介绍(HTTP_X_FORWARDED_FOR,HTTP_VIA,REMOTE_ADDR)
2012/09/23 PHP
一个严格的PHP Session会话超时时间设置方法
2014/06/10 PHP
用PHP去掉文件头的Unicode签名(BOM)方法
2017/06/22 PHP
php实现将二维关联数组转换成字符串的方法详解
2017/07/31 PHP
浅谈PHP中如何实现Hook机制
2017/11/14 PHP
PHP 爬取网页的主要方法
2018/07/13 PHP
JavaScript获取客户端计算机硬件及系统等信息的方法
2014/01/02 Javascript
原生javascript实现Tab选项卡切换功能
2015/01/12 Javascript
用JavaScript实现页面重定向功能的教程
2015/06/04 Javascript
浅谈Javascript数组(推荐)
2016/05/17 Javascript
JS中对象与字符串的互相转换详解
2016/05/20 Javascript
Select下拉框模糊查询功能实现代码
2016/07/22 Javascript
关于JavaScript中事件绑定的方法总结
2016/10/26 Javascript
js自定义QQ菜单效果
2017/01/10 Javascript
详解node-ccap模块生成captcha验证码
2017/07/01 Javascript
Node接收电子邮件的实例代码
2017/07/21 Javascript
JS中关于正则的巧妙操作
2017/08/31 Javascript
通过vue-cli3构建一个SSR应用程序的方法
2018/09/13 Javascript
微信小程序点餐系统开发常见问题汇总
2019/08/06 Javascript
微信小程序实现倒计时功能
2020/11/19 Javascript
[03:08]TI9战队档案 - Vici Gaming
2019/08/20 DOTA
python解析发往本机的数据包示例 (解析数据包)
2014/01/16 Python
Python出现segfault错误解决方法
2016/04/16 Python
浅谈Python中range和xrange的区别
2017/12/20 Python
django如何连接已存在数据的数据库
2018/08/14 Python
解决tensorflow添加ptb库的问题
2020/02/10 Python
Python进程间通信multiprocess代码实例
2020/03/18 Python
Pycharm激活方法及详细教程(详细且实用)
2020/05/12 Python
keras 两种训练模型方式详解fit和fit_generator(节省内存)
2020/07/03 Python
高中自我鉴定范文
2013/11/03 职场文书
便利店促销方案
2014/02/20 职场文书
2014年幼儿园植树节活动方案
2014/03/02 职场文书
学校运动会霸气口号
2014/06/07 职场文书
五一劳动节慰问信
2015/02/14 职场文书
毕业设计答辩开场白
2015/05/29 职场文书